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

真诚赞赏,手留余香
赞赏
随机推荐
安卓项目结构图
PHPExcel读取和写入Excel文件
浅谈javascript的Touch事件
CentOS 8 安装 Apache 和 PHP
Node.js 断言模块 Assert 模块
browser-sync 浏览器自动刷新
Nodejs路由实现方式和顺序
Cordova 权限问题 Error: spawn EACCES
JavaScript 代码保护技术 混淆和加密
JS 页面加载触发事件 document.ready和onload的区别