瞭解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瀏覽器下面不會像其餘瀏覽器下面 那樣檢測緩衝區是否已經有此圖片，有的話直接就觸發此事件。這個須要注意