【开发必看】你真的了解回流和重绘吗？

发布时间：2019-01-26 23:07:46 所属栏目：建站来源：腾讯云加社区

导读：副标题#e# 回流和重绘可以说是每一个web开发者都经常听到的两个词语，可是可能有很多人不是很清楚这两步具体做了什么事情。最近有空对其进行了一些研究，看了一些博客和书籍，整理了一些内容并且结合一些例子，写了这篇文章，希望可以帮助到大家。浏览器的

考虑我们要执行一段批量插入节点的代码：

function appendDataToElement(appendToElement, data) {  
    let li;  
    for (let i = 0; i < data.length; i++) {  
        li = document.createElement('li');  
        li.textContent = 'text';  
        appendToElement.appendChild(li);  
    }  
}  
const ul = document.getElementById('list');  
appendDataToElement(ul, data);

如果我们直接这样执行的话，由于每次循环都会插入一个新的节点，会导致浏览器回流一次。

我们可以使用这三种方式进行优化:

隐藏元素，应用修改，重新显示

（编辑：衢州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

3/5

首页

尾页