本文探讨了在处理超长列表时如何进行性能优化，主要介绍了两种方法：时间分片和虚拟滚动。时间分片利用requestAnimationFrame配合浏览器渲染，避免频繁DOM操作。然而，当DOM元素过多时，页面仍可能卡顿，此时引入虚拟滚动，仅渲染可视区域，从而显著提升用户体验。
不停的往页面中插入元素，记录JS执行时间和浏览器渲染时间
<body>
<div id="app"></div>
<script>
let timer = Date.now()
let total = 100;
for (let i = 0; i < total; i++) {
let li = document.createElement('li')
li.innerHTML = i;
app.appendChild(li)
}
setTimeout(() => {
console.log(Date.now() - timer, '浏览器渲染的时间')
}, 0);
console.log(Date.now() - timer, 'JS脚本执行的时间')
</script>
</body>
如何做好渲染优化，我们有两个方法：时间分片和虚拟滚动
时间分片
<body>
<div id="app"></div>
<script>
let timer = Date.now()
最低0.47元/天 解锁文章
211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
