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




随机推荐
photoshop 数位板 两小时练习
「漫画」眼睛的画法
jQuery.position()不可靠
Photoshop 色彩基础
webpack使用vue与cordova
用Nodemon监控项目文件夹,自动重启NodeJS应用
我眼中的前端框架jQuery,Angular,React,Vue——以及我看前端架构
webpack-dev-server 无法通过ip访问
20170313 夜晚停电
Photoshop 智能对象 学习笔记