一、渲染

1、DocumentFragment

使用DocumentFragment保存新增的节点最后一次性插入。创建方法：document.createDocumentFragment()

2、使用setTimeout切分任务

由于一个长时任务会阻塞页面渲染，可以使用setTimeout拆分为多个任务，因为宏任务【之间】可以更新UI。将数据分页，每次setTimeout渲染一页数据

image

3、用requestAnimationFrame替换setTimeout

setTimeout和setInterval的问题是，它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那代码就要等前面的任务完成后再执行。

requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果

requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率

在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量

requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销

image

4、懒加载

在列表底部放一个blank节点，当此节点出现在视图中时再加载下一页
在或者判断滚动到最底部时加载下一页，判断 parent.scrollTop + parent.clientHeight >= parent.scrollHeight

image

5、虚加载

如果页面一直下拉加载，会因为渲染的dom过多而卡顿。这时用到虚加载：仅渲染固定数量的数据，未渲染的部分使用padding-top和padding-bottom来占位。当列表滚动时，通过列表scrollTop来计算此时应渲染总列表中的哪几条数据。

const DRAW_COUNT = 20; // 实际渲染的数据项数量
const CARD_HEIGHT = 144; // 每项的高度

data() {
  return {
    drawStartIndex : 0
  };
}

computed: {
    msgDrawList() { // 实际渲染的列表
      return this.msgList.slice(this.drawStartIndex, this.drawEndIndex);
    },
    realMsgCount() { 
      return this.msgList.length;
    },
    drawEndIndex() { // 实际渲染的最后一条数据的下标
      return Math.min(this.drawStartIndex + DRAW_COUNT, this.realMsgCount);
    },
    listPaddingTop() { // 列表顶部占位
      return this.drawStartIndex * CARD_HEIGHT + "px";
    },
    listPaddingBottom() { // 列表底部占位
      return (this.realMsgCount - this.drawEndIndex) * CARD_HEIGHT + "px";
    },
 }

// 列表滚动时：
let scrollTimer = null;

onListScroll() {
      if (scrollTimer) {
        return;
      }
      scrollTimer = setTimeout(() => {
        let v = parseInt(elScroll.scrollTop / CARD_HEIGHT);
        this.drawStartIndex = v > 4 ? 4 : 0; // 在上方不可见区域再渲染4个
        clearTimeout(scrollTimer);
        scrollTimer = null;
      }, 250);
}