最近一直听到一道面试题，即：后端返回10000条数据，前端怎么渲染到页面上？
首先想到的应该是分批处理，比如每次处理10条或者20条，然后处理的逻辑放到setTimeout里面，这样不会阻塞主逻辑和页面渲染。
所以第一版代码如下：
<h1>渲染一万条数据</h1> <a href="https://baidu.com" target="_blank">百度一下</a> <ul class="content"></ul> <script> console.log(1); // 总数据 const total = 10000, // 每次处理数据 each = 20, // 需要处理次数 needTimes = Math.ceil(total / each), // 父容器 content = document.querySelector('.content') // 当前处理次数 let currentTime = 0 // 处理元素插入 function add() { setTimeout(() =>{ console.log(3); for (let i = 0; i < each; i++) { const li = document.createElement('li') li.innerText = Math.floor(i+currentTime*each) content.appendChild(li) } currentTime++; if (currentTime < needTimes) add(); },1000/60) } add(); console.log(2) </script> 复制代码
我们观察上面的代码，可以优化的点是add方法中的插入操作，我们知道元素的插入会消耗浏览器性能并引起页面重排，那我们把每次需要处理的元素收集起来，进行一次插入操作，这样相比之前单个元素插入就要好一些，但是这个时候如果用普通的Dom元素就会造成我们不需要的层级嵌套，有没有一个好的方法解决这个问题呢？
答案就是createDocumentFragment
该方法创建一个新的空白的文档片段，使用方法如下：
let fragment = document.createDocumentFragment(); 复制代码
fragment 是一个指向空DocumentFragment对象的引用，DocumentFragments 是DOM节点。它们不是主DOM树的一部分。
通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树，在DOM树中，文档片段被其所有的子元素所代替。
因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面重排。
因此，使用文档片段通常会带来更好的性能。
优化后的代码如下：
<h1>渲染一万条数据</h1> <a href="https://baidu.com" target="_blank">百度一下</a> <ul class="content"></ul><script> console.log(1); // 总数据 const total = 10000, // 每次处理数据 each = 20, // 需要处理次数 needTimes = Math.ceil(total / each), // 父容器 content = document.querySelector('.content') // 当前处理次数 let currentTime = 0 // 处理元素插入 function add() { setTimeout(() =>{ console.log(3); const fragment = document.createDocumentFragment() for (let i = 0; i < each; i++) { const li = document.createElement('li') li.innerText = Math.floor(i+currentTime*each) fragment.appendChild(li) } content.appendChild(fragment) currentTime++; if (currentTime < needTimes) { add(); } },1000/60) } add(); console.log(2) </script> 复制代码
接下来我们主逻辑中能优化的点就是setTimeout了，我们知道setTimeout的执行时间会受到任务队列影响，并不一定完全按照第二个参数设置的毫秒数执行，而且上面我们设置了间隔时间假定为一秒60帧，是写死的。那针对这一部分我们有什么办法优化呢？
答案就是requestAnimationFrame
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画
该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
注意：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()
那它有什么优点呢？
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或重排中完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。由系统决定回调函数的执行时机,不会引起丢帧，不会卡顿
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这就意味着更少的的CPU，GPU和内存使用量
3、requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销
优化后的代码如下：
<h1>渲染一万条数据</h1> <a href="https://baidu.com" target="_blank">百度一下</a> <ul class="content"></ul> <script> console.log(1); // 总数据 const total = 10000, // 每次处理数据 each = 20, // 需要处理次数 needTimes = Math.ceil(total / each), // 父容器 content = document.querySelector('.content') // 当前处理次数 let currentTime = 0 // 处理元素插入 function add() { console.log(3); const fragment = document.createDocumentFragment() for (let i = 0; i < each; i++) { const li = document.createElement('li') li.innerText = Math.floor(i+currentTime*each) fragment.appendChild(li) } content.appendChild(fragment) currentTime++; if (currentTime < needTimes) { window.requestAnimationFrame(add) } } window.requestAnimationFrame(add) console.log(2) </script> 复制代码
至此，个人认为就是比较完美的答案了，相关特性大家可以copy代码测试一下，本人亲测有效
如果您有更好的方法，欢迎评论区讨论！感谢阅读！
