了解DocumentFragment 给咱们带来的性能优化

首先咱们须要了解 DocumentFragment 是什么？

w3c 上面的详细解释：link here 

 

我把关键点写下来了：

DocumentFragment 节点不属于文档树，继承的 parentNode 属性老是 null。

不过它有一种特殊的行为，该行为使得它很是有用，即当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的全部子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操做

同时咱们了解到当须要对页面DOM进行操做的时候必然会致使屡次 重绘、回流（什么是重绘，回流？）。这样会加大页面的负担。影响页面性能。所以咱们能够建立这样一个临时占位符。进行操做如下是DEMO:

 

 

// Create the fragment
var fragment = document.createDocumentFragment();

//add DOM to fragment 

for(var i = 0; i < 10; i++) {
    var spanNode = document.createElement("span");
    spanNode.innerHTML = "number:" + i;
    fragment.appendChild(spanNode);
}

//add this DOM to body
document.body.appendChild(spanNode);

 

 

 

同时我以为这里咱们还能够进行衍生：好比我要获取一个已知src的img的宽度和高度。如何作呢？

这里我就不引用DocumentFragment(这个应用场景没有必要)。

var img = new Image();
img.onload = function() {
    alert(this.width + 'x' + this.height);
　  img = null; 
} 

img.src = 'http://images.blogjava.net/blogjava_net/bearrui/8_1.jpg';

这样咱们就能够得到图片的宽度和高度了。他们的原理都是同样的即引入一个缓存dom来临时存储。

同时你们要注意一个问题。我以前发现有个问题 即我把 img.src = 'http://images.blogjava.net/blogjava_net/bearrui/8_1.jpg';放到onload 方法上面在ie下面就会有问题。当有img缓存的状况下onload不会触发？为啥呢？ 在IE浏览器下面不会像其余浏览器下面 那样检测缓冲区是否已经有此图片，有的话直接就触发此事件。这个须要注意