前言上一篇简单讲了时间分片的原理,今天接着来看虚拟列表的实现。虚拟列表与时间分片的最大区别在于,时间分片是减少了绘制的总时长,增加了绘制的次数,而虚拟列表则是完全减少要绘制的数据量,通过计算控制准确显示每次要渲染的数据。大白话来讲时间分片是把一次渲染5W数据变为一次渲染100条,渲染500次。而虚拟列表则是固定只渲染一次100条数据,随着用户的控制每次都是只变化这100条数据,不需要像时间分片那样渲染500次。虚拟列表虚拟列表 是一种按需渲染的技术,如屏幕高度为500px,一行数据高度为50px,那么一次只渲染10条数据到屏幕上, 随着用户滚动,每次都只改变可视区域内这10条数据固定高度虚拟列表实现每条数据固定高度可视区域高度偏移量起始索引和结束索引可视区域总高度由上面条件可以继续推算以下内容:占位总高度:总数据 * 每条数据高度可显示的列表项数:可视区域高度 / 每条高度偏移量: 滚动超出1条数据高度时候才发生变化 滚动 - (滚动偏移量 % 每条数据固定高度)真实列表数据:截取起始索引 到 结束索引的数据<template> <div ref=&quo
前言开发过程中,通常会碰到大量DOM渲染的场景,如万级以上的数据渲染就会开始卡的飞起,针对此列情况列出常见的第一种优化方案:分片渲染// 一次性渲染 <ul id="container"></ul>const total = 100000; let ul = document.getElementById('container') for (let i = 0; i < pageCount; i++) { let li = document.createElement("li"); li.innerText = ~~(Math.random() * total); ul.appendChild(li); }技巧该方案下我们需要用到requestAnimationFrame,不同于setTimeout,它会随着系统为我们提供更加流畅的动画表现,以及DocumentFragment,作为一个内存的DOM片段,它不会去计算其中的样式表消耗,尽管现代浏览器本身优化就已经
Harexs
风归云动,天河泻梦