分片加载超长列表渲染
很早以前就有面试问超长列表如何优化，那时候觉得一般前端不会有这种功能，有也是分页，也就没有去关注。今天分享一个超长列表渲染的优化方法，分片加载，现在几乎也都不会用了，但是还是要知道这个东西。
先明确eventloop的机制，js是单线程的，当你第一个主线程执行过程中，遇到宏任务就放到宏任务队列，遇到微任务就放到微任务队列，这一次主线程执行完了之后，会把微任务队列清空，接着GUI渲染页面，然后再去宏任务队列里面把到时的宏任务提取出来从主线程执行，一直循环。
先明确，页面渲染是在清空微任务之后：
<ul id="wrap"></ul>
<script>
let time;
Promise.resolve().then(res => {
for (let i = 0; i < 10000000000; i++) {}
console.log('微任务执行完毕', new Date() - time);//微任务执行完毕 11124
})
document.getElementById('wrap').innerHTML = '页面渲染了';
time = new Date();
console.log('页面渲染语句执行');
</script>
接着看看渲染十万条数据页面使用的时间和js执行的时间：
<ul id="wrap"></ul>
<script>
let total = 100000;
let time = new Date();
for (let i = 0; i < total; i++) {
let li = document.createElement('li');
li.innerHTML = i;
document.getElementById('wrap').appendChild(li);
}
console.log('js执行时间', new Date() - time);//js执行时间 710
setTimeout(function () {
console.log('页面渲染时间', new Date() - time);//页面渲染时间 4771
})
</script>
Js执行很快，但是页面渲染要将近5秒，如果是一百万条数据测试了一下将近一分钟。所以我们要分片渲染。
分片渲染：
<ul id="wrap"></ul>
<script>
let total = 100000;
let time = new Date();
let index = 0;
let id = 0;
function loadList() {
index += 50;
if(index < total){
setTimeout(function () {
for (let i = 0; i < 50; i++) {
let li = document.createElement('li');
li.innerHTML = id++;
document.getElementById('wrap').appendChild(li);
}
loadList();
})
}
}
loadList()
</script>
分片渲染用的时间会比没分片长，好处就是不需要等所有渲染出来，可以直接看到数据，你拖动滚动条，还能看见页面还在加载。
这边要注意一点，新版本浏览器对页面渲染做了优化，会等js执行完毕一次性更新页面，不会在for循环的时候执行一条插入一条，如果为了兼容ie，要用文档碎片进行渲染。也可以用requestAnimationFrame这个宏任务替代定时器，性能会稍微好一些。
虽然分片渲染可以优化，但是这种方法，页面的dom还是过多了，所以这种方法现在也几乎不会用了，一般会使用虚拟列表方法去优化。
（可添加好友共同进步）
Coding 个人笔记