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

发布时间：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');  
ul.style.display = 'none';  
appendDataToElement(ul, data);  
ul.style.display = 'block';

使用文档片段(document fragment)在当前DOM之外构建一个子树，再把它拷贝回文档

const ul = document.getElementById('list');  
const fragment = document.createDocumentFragment();  
appendDataToElement(fragment, data);  
ul.appendChild(fragment);

（编辑：衢州站长网）

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

4/5

首页

尾页