前端: 如何优化列表大批量的数据渲染

需求点：如何列表数据渲染进行优化？

最近业务上也碰到这个问题点。上网也查了查资料，貌似也经常问，特此写文章记录下来。

关于如何处理以上上面的业务痛点：
就两点：
1 、虚拟列表是最主流的解决方案，不渲染所有的数据，只渲染可视区域中的数据。当用户滑（滚）动时，通过监听 scroll 来判断是上滑还是下拉，从而更新数据。同理 IntersectionObserver 和 getBoundingClientRect 都能实现
2、时间分片主要是分批渲染DOM，使用 requestAnimationFrame 来让动画更加流畅
tips: 第二点就不详细讲述了，文末有链接对应，可自行享用。

话不多说直接上代码:不懂的可下方评论或者私信:

<template><divref="list":style="{height}"class="infinite-list-container"@scroll="scroll($event)"><divref="phantom"class="infinite-list-phantom"/><divref="content"class="infinite-list"><div><divv-for="item in visibleData"ref="items":id="item._index":key="item._index"class="infinite-list-item"><!-- <slot ref="slot" :item="item.item"></slot> --><p><span style="color:red">{{ item.id }}</span>{{ item.value }}</p></div></div></div></div>
</template>
<script>
export default {props: {/** 需要渲染的数据 */listData: {type: Array,default: () => []},/** 每项高度 */itemSize: {type: Number,default: 200},/** 视口高度 */height: {type: String,default: '100%'}},data() {return {screenHeight: 0, // 可视区域高度startOffset: 0, // 偏移量start: 0, // 起始索引end: null // 结束索引};},computed: {/** 列表总高度 */listHeight() {return this.listData.length * this.itemSize;},/** 可显示的列表项数 */visibleCount() {return Math.ceil(this.screenHeight / this.itemSize);},/** 偏移量对应的style */getTransform() {return `transform3d(0, ${this.startOffset}px, 0)`;},/** 可显示列表数据 */visibleData() {return this.listData.slice(this.start, Math.min(this.end, this.listData.length));}},mounted() {this.screenHeight = this.$el.clientHeight;this.start = 0;this.end = this.start + this.visibleCount;},created() {this.initPositions();},updated() {this.$nextTick(function() {if (!this.$refs.items || !this.$refs.items.length) {return;}// 获取真实元素大小，修改对应的尺寸缓存this.updateItemsSize();// 更新列表总高度let height = this.positions[this.positions.length - 1].bottom;this.$refs.phantom.style.height = height + 'px';// 更新真实偏移量this.setStartOffset();});},methods: {/** 滚动事件 */scroll(e) {// 当前滚动位置let scrollTop = this.$refs.list.scrollTop;// 此时的开始索引this.start = this.getStartIndex(scrollTop);// 此时的结束索引this.end = this.start + this.visibleCount;// 此时的偏移量this.setStartOffset();},initPositions() {this.positions = this.listData.map((d, index) => ({index,height: this.estimatedItemSize,top: index * this.estimatedItemSize,bottom: (index + 1) * this.estimatedItemSize}));},/** 获取列表起始索引 */getStartIndex(scrollTop = 0) {return this.binarySearch(this.positions, scrollTop);},/** 二分查找 */binarySearch(list, value) {let start = 0;let end = list.length - 1;let tempIndex = null;while (start <= end) {let midIndex = parseInt((start + end) / 2);let midValue = list[midIndex].bottom;if (midValue === value) {return midIndex + 1;} else if (midValue < value) {start = midIndex + 1;} else if (midValue > value) {if (tempIndex === null || tempIndex > midIndex) {tempIndex = midIndex;}end = end - 1;}}return tempIndex;},/** 获取当前列表项的当前尺寸 */updateItemsSize() {let nodes = this.$refs.items;nodes.forEach(node => {let rect = node.getBoundingClientRect();let height = rect.height;let index = +node.id.slice(1);let oldHeight = this.positions[index].height;let dValue = oldHeight - height;// 存在差值if (dValue) {this.positions[index].bottom = this.positions[index].bottom - dValue;this.positions[index].height = height;for (let k = index + 1; k < this.positions.length; k++) {this.positions[k].top = this.positions[k - 1].bottom;this.positions[k].bottom = this.positions[k].bottom - dValue;}}});},/** 获取当前位置的便宜量 */setStartOffset() {let startOffset = this.start >= 1 ? this.positions[this.start - 1].bottom : 0;this.$refs.content.style.transform = `translate3d(0,${startOffset}px,0)`;}}
};
</script><style lang="less" scoped>
.infinite-list-container {overflow: auto;position: relative;-webkit-overflow-scrolling: touch;
}.infinite-list-phantom {position: absolute;left: 0;top: 0;right: 0;z-index: -1;
}.infinite-list {left: 0;right: 0;top: 0;position: absolute;
}.infinite-list-item {padding: 5px;color: #555;box-sizing: border-box;border-bottom: 1px solid #999;
}
</style>

这几篇文章讲述的很详细还有对应效果:
link
link2