记一次vue长列表的内存性能分析和优化

记一次vue长列表的内存性能分析和优化

 

好久没写东西，博客又长草了，这段时间身心放松了好久，都没什么主题可以写了
上周接到一个需求，优化vue的一个长列表页面，忙活了很久也到尾声了，内存使用和卡顿都做了一点点优化，还算有点收获
写的有点啰嗦，可以看一下我是怎么进行这个优化的，也许有点帮助呢

这个长列表页面，其实是一个实时日志上报的页面，随着页面打开时间的增加，日志数量也会增多，常规的页面布局和渲染免不了会遇到性能问题。

使用了vue框架，框架内部的虚拟DOM和组件缓存已经做了一些优化，比起原生实现是有了一些优化处理。

但这个页面是用到element-ui的el-table组件，渲染出来的是表格数据列表，众所周知，表格在渲染的时候需要绘制整个表格区，所以，

第一步就是将表格实现改为其他元素标签实现

这一步操作之后，其实没什么大的变化的，几千条日志（每条日志还有很多信息）左右，滚动页面明显卡顿严重

而需求又改不了，日志可以展开查看详情或收起，已经看过的日志在下次看的时候不需要加载，新的日志会实时添加进来

以前在做大表格数据鼠标滑过行着色的时候，也有严重的卡顿，当时主要的优化手段是不对所有数据进行处理，仅处理视窗可见区域，也可以在这里试试，所以

第二步就是仅渲染视窗可见的数据

这种方案的原理是使用一个大容器作为滚动区域，里面有一个内容区域，JS通过数据数量和每条数据的高度计算出内容区的高度，内容区用padding或绝对定位撑开滚动区域，让容器可滚动，另外就是数据项了，滚动的时候，计算当前滚动位置scrollTop，再从数据项中找出各项的高度，从头到尾计算出此时容器中放什么数据

哈哈哈 ... 这文字描述简直了，看不懂就不看了吧，可以去看下别人的解说

知道原理之后，实现起来也不难，不过代码就写的比较凌乱了，还是使用现成的比较成熟的vue插件吧，比较方便

复制粘贴一顿猛操作之后，页面重新展现出来，想着应该可以收工了吧

然鹅，测试的时候发现，页面内存使用可以达到一两G，看来不仅要优化卡顿，还要优化内存使用

 

 

还能遇到这种少见的页面崩溃，也算是开了眼了

 

 

这个方案是把原先页面应该渲染的所有DOM拆分出来，动态地渲染该渲染的部分，

所以就会有一个问题，动态计算需要时间，当滚动非常快的时候会有明显的卡顿现象，所以

第三步就是进行函数节流，即控制scroll事件的处理，在规定的时间内仅触发一次

代码参考

// 函数节流，频繁操作中间隔 delay 的时间才处理一次
function throttle(fn, delay) {
    delay = delay || 200;
    
    var timer = null;
    // 每次滚动初始的标识
    var timestamp = 0;

    return function() {
        var arg = arguments;
        var now = Date.now();
        
        // 设置开始时间
        if (timestamp === 0) {
            timestamp = now;
        }
        
        clearTimeout(timer);
        timer = null;
        
        // 已经到了delay的一段时间，进行处理
        if (now - timestamp >= delay) {
            fn.apply(this, arg);
            timestamp = now;
        }
        // 添加定时器，确保最后一次的操作也能处理
        else {
            timer = setTimeout(function() {
                fn.apply(this, arg);