JS性能优化 document.createDocumentFragment

在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法。

但是,如果当我们要向document中添加大量数据时(比如1w条),如果像上面的代码一样,逐条添加节点,这个过程就可能会十分缓慢。 

documentFragment 被所有主流浏览器支持。所以,没有理由不用。

DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。

因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元素位置和几何上的计算)。因此,使用文档片段document fragments 通常会起到优化性能的作用(better performance)。

var container = document.getElementById("container");
var content = document.getElementById("content");
// Content Generator
var size = 400;
var frag = document.createDocumentFragment();
for (var cell=0, cl=content.clientWidth/size; cell<cl; cell++) {
    elem = document.createElement("div");
    elem.className = "cell";
    elem.style.backgroundColor = cell%2 > 0 ? "#ddd" : "";
    elem.innerHTML = cell;
    frag.appendChild(elem);
}
content.appendChild(frag);


Mozilla居然有中文的这种文档,真棒!
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment




修改时间 2017-12-29

真诚赞赏,手留余香
赞赏
随机推荐
一个LOGO的设计过程
Photoshop路径描边绘制线性图标
Node.js Buffer(缓冲区)
javascript获取当前时间
Mac下用命令行压缩和解压rar文件的方法
vim 教程
Nginx 如何配置 Basic Auth 认证
You Don't Need jQuery
PS手绘20171016
PS 画彩色同心圆
QQ号

微信联系我

夜间模式切换
回到顶部