高性能渲染海量列表数据

• 效率低时间分片相当于代码替用户去触发懒加载，伴随着 事件循环 逐次的渲染DOM，渲染消耗的总时间肯定比一次渲染所有DOM多不少。
• 不直观因为页面是逐渐渲染的，如果用户直接把滚动条拖到底部看到的并不是最后的数据，需要等待整体渲染完成。
• 性能差实际开发出的代码不是一个<tr> or <li>标签加数据绑定这么简单，随着 dom 结构的复杂（事件监听、样式、子节点...）和 dom 数量的增加，占用的内存也会更多，不可避免的影响页面性能。

分析真实业务场景，用户正常情况下是不会去浏览全部数据的。因此除特殊情况外，将全部数据渲染到列表中是无用且浪费资源的行为，我们只需要根据用户的视窗进行部分渲染即可，而这就要用到下文的虚拟列表。

虚拟列表概念

虚拟列表实现

<!-- 可视区域的容器 -->
<div class="container" ref="virtualList">
    <!-- 占位，用于形成滚动条 -->
    <div class="phantom"></div>
    <!-- 列表项的渲染区域 -->
    <div class="content">
        <!-- item-1 --> 
        <!-- item-2 --> 
        <!-- ...... --> 
        <!-- item-n -->
    </div>
</div>

export default {
  ......
  props: {
    listData:{
      type:Array,
      default: () => []
    },
    itemSize: {
      type: Number,
      default: 200
    }
  },
  computed:{
    // 列表总高度
    listHeight() {
      return this.listData.length * this.itemSize;
    },
    // 可显示的列表项数
    visibleCount() {
      return Math.ceil(this.screenHeight / this.itemSize)
    },
    // 获取真实显示列表数据
    visibleData() {
      return this.listData.slice(this.start, this.end);
    }
  },
  mounted() {
    // 初始化数据
    this.screenHeight = this.$el.clientHeight;
    this.start = 0;
    this.end = this.start + this.visibleCount;
  },
  data() {
    return {
      screenHeight:0, // 可视区域高度
      start:0,        // 起始索引
      end:null,       // 结束索引
    };
  },
};

窗口滚动

容器滚动绑定监听事件，当滚动后，我们要获取 距离顶部的高度scrollTop ，然后计算 开始索引start 和 结束索引end ，根据他们截取数据，并计算 当前偏移量currentOffset 用于将渲染区域偏移至可见区域中 。

export default {
  ...
  mounted() {
      ...
      this.$refs.virtualList.addEventListener('scroll', event => this.scrollEvent(event.target))
  },  
  data() {
    return {
      ...
      curretnOffset: 0, // 当前偏移量
    };
  },
  ...
  methods: {
    scrollEvent(target) {
      //当前滚动位置
      let scrollTop = target.scrollTop;
      //此时的开始索引
      this.start = ~~(scrollTop / this.itemSize);
      //此时的结束索引
      this.end = this.start + this.visibleCount;
      //此时的偏移量
      this.currentOffset = scrollTop - (scrollTop % this.itemSize);
    }
  }
  ...
}

完整代码实现

<template>
  <div class="container" ref="virtualList">
    // 占位元素
    <div class="phantom" :style="{ height: listHeight + 'px' }"></div>
    // 渲染区域
    <div
      class="content"
      :style="{ transform: `translate3d(0, ${currentOffset}px, 0)` }"
    >
      <div
        v-for="item in visibleData"
        :key="item.id"
        :style="{ height: itemSize + 'px', lineHeight: itemSize + 'px' }"
        class="list-item"
      >
        {{ item.value }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [],
      itemSize: 50,
      screenHeight: 0,
      currentOffset: 0,
      start: 0,
      end: 0,
    };
  },
  mounted() {
    for (let i = 1; i <= 1000; i++) {
      this.listData.push({id: i, value: '字符内容' + i})
    }
    this.screenHeight = this.$el.clientHeight;
    this.start = 0;
    this.end = this.start + this.visibleCount;
    this.$refs.virtualList.addEventListener("scroll", (event) =>
      this.scrollEvent(event.target)
    );
  },
  computed: {
    listHeight() {
      return this.listData.length * this.itemSize;
    },
    // 渲染区域元素数量
    visibleCount() {
      return Math.ceil(this.screenHeight / this.itemSize);
    },
    visibleData() {
      return this.listData.slice(this.start, this.end);
    },
  },
  methods: {
    scrollEvent(target) {
      const scrollTop = target.scrollTop;
      this.start = ~~(scrollTop / this.itemSize);
      this.end = this.start + this.visibleCount;
      this.currentOffset = scrollTop - (scrollTop % this.itemSize);
    },
  },
};
</script>

<style scoped>
.container {
  position: relative;
  height: 90vh;
  overflow: auto;
}
.phantom {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}
.content {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  text-align: center;
}
.list-item {
  padding: 10px;
  border: 1px solid #999;
}
</style>

优化

滚动发生后，scroll回调会频繁触发，但并不是每一次回调都是有效的。很多时候会造成重复计算的问题，从性能上来说无疑存在浪费的情况。（滚动一下会触发几十次）。

防抖与节流

我们通过 节流函数 来限制触发频率，通过 防抖函数 保证最后一次滚动的回调正确的进行。

export default {
  ...
  mounted() {
    ...
    // 绑定滚动事件
    let target = this.$refs.virtualList
    let scrollFn = (event) => this.scrollEvent(event.target)
    let debounce_scroll = lodash.debounce(scrollFn, 320)
    let throttle_scroll = lodash.throttle(scrollFn, 160)
    target.addEventListener("scroll",  debounce_scroll);
    target.addEventListener("scroll",  throttle_scroll);
  },
  ....
 }

• 动态高度
  多行文本、图片之类的可变内容，会导致列表项的高度并不相同。
  解决方法： 以预估高度先行渲染，然后获取真实高度并缓存。
• 白屏闪烁
  回调执行也有执行耗时，如果滑动过快会出现白屏/闪烁的情况。为了使页面平滑滚动，我们还需要在可见区域的上方和下方渲染额外的项目，给滚动回调一些缓冲时间。
• 内存占用
  一次性请求大量数据可能会使后端处理时间增加，过大的响应体也会导致请求中Content Download 耗时增加，建议通过请求接口分片获取渲染数据。