利用文档碎片来添加DOM节点

众所周知,改变DOM结构会导致屏幕重绘,这是非常消耗性能的行为,但我们有时候必须要删减或者更新现有的DOM结构。以增加子节点为例,我们来看下文档碎片的用法。

举个例子先,我们准备利用Javascript把两个段落动态地添加至<body>里,也就是为<body>添加子节点。通常我们会这么写:

?View Code JAVASCRIPT
var p, text;
p = document.createElement('p'); //创建P节点
text = document.createTextNode('这是第一段内容哗哗哗'); //创建文本节点
p.appendChild(text); //将文本添加至P节点
document.body.appendChild(p); //将含有文本的P节点追加至网页里
 
p = document.createElement('p');
text = document.createTextNode('这是第二段内容啦啦啦');
p.appendChild(text);
document.body.appendChild(p);

可以看到原网页的DOM结构更新了两次,也就是说导致了两次屏幕重绘,如果要添加3段、4段……N段,那就要重绘相应的次数,这是相当不可取的。今天我们主要来看下文档碎片的妙用。碎片的精妙之处就在于我们可以把想要添加的子节点全部放在一个文档碎片中,而最后再把碎片的内容统一添加到网页中。无论你要添加多少节点多少内容,最终追加到网页DOM中只有那么一次,屏幕重绘也就只是发生了一次而已。我们来看下代码:

?View Code JAVASCRIPT
var fragment, p, text;
fragment = document.createDocumentFragment(); //创建一个文档碎片
p = document.createElement('p'); //创建P节点
text = document.createTextNode('这是第一段内容哗哗哗'); //创建文本节点
p.appendChild(text);//将文本添加至P节点
fragment.appendChild(p); //将含有文本的P节点追加至文档碎片里
 
p = document.createElement('p');
text = document.createTextNode('这是第二段内容啦啦啦');
p.appendChild(text);
fragment.appendChild(p);
 
document.body.appendChild(fragment); //把碎片里的两段内容一同追加到网页中

代码很简单,注释也很明显,使用碎片只改变了一次原网页的DOM结构。虽然代码量多了一些,但相对于屏幕重绘上节省的性能,完全可以忽略不计。对于想深入了解各个浏览器上性能提高情况的朋友,可以在代码前后各new出一个date(),然后相减得出运行时间。

这里只是添加2个段落节点,有兴趣的朋友可以加个for循环添加成千上万个节点,再来比较下定能让您爱上文档碎片。