最近一直听到一道面试题,即:后端返回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代码测试一下,本人亲测有效
如果您有更好的方法,欢迎评论区讨论!感谢阅读!