Js中的appenChild,insertBefore--createDocumentFragment

標籤：

平時項目中會有一些流程，或者是評論相關的東西，這些一般只會是在頁面初次載入一部分，剩餘部分搞一個更多的標籤，當點擊更多的時候，ajax請求把所有資料載入完（當然這裡也有分頁的實現方法，本篇不作討論), ajax載入的資料一般會運用到appendChild,insertBefore方法來附加在原來標籤前後，相信大家對迴圈附加一定很熟練了，這裡我要寫的是另一種在效能方面比較贊的方法--運用文檔片段,在低版本的IE下，缺少最佳化機制，迴圈附加造成的迴流和渲染，會讓瀏覽器hold不住（幾何改變會造成瀏覽器重排）

看看一般appendChild做法，當然你可以直接innerHtml或者jquery的Html到容器上，這裡是考慮原HTML可能包含事件，才把Html字串轉換為節點。

 1 var ele=document.creatElement("div"); 2  3 ele.innerHtml=html;//ajax擷取到的 4  5 var divs=ele.childNodes;//所以子節點 6  7 for(var i=0,length=divs.length;i<length;i++) 8  9   {10 11       container.appendChild(divs[i].cloneNode(true));//複製到需要附加的容器12 13 }

View Code

最佳化:

1 //接上例子2 var fragment=document.createDocumentFragment();3 4 for(var i=0;length=divs.length;i++){5     fragment.apendChild(divs[i].cloneNode(true));6 7 }8 //最後一次性附加到容器9 container.appendChild(fragment);

View Code

擴充原型:

 1 //IE9+ 2 //IE678隱藏了對HTMLElement的訪問 3 //請用var appendHtmlOp=function(el,html){ 4 //        el.appendChild(frament);//這裡不能用this，this指向了window; 5 //} 6 HTMLElement.prototype.appendHtmlOp=function(html){ 7            var div=document.createElement("div"),nodes=null, 8                         fragment=document.createDocumentFragment(); 9 10                 div.innerHTML=html;11                 nodes=div.childNodes;12               for(var i=0,length=nodes.length;i++){13                         fragment.appendChild(nodes[i].cloneNode(true));14             }15           this.appendChild(fragment);16           //釋放17           nodes=null;18           fragment=null;19 20 }

View Code

同理也是可以直接修改insertBefore的；把前面的最後的appendChild改為insertBefore;

當然可以傳個標識參數來區分;

 1 var appendHtmlOp=function(el,html,where){ 2     var     div=document.createElement("div"),fragment=document.createDocumentFragment();nodes=null; 3  4    where=where||"bottom"; 5   div.innertHTML=html; 6   nodes=div.childNodes; 7  for(var i=0,length=nodes.length;i<length;i++){ 8             fragement.appendChild(nodes[i].cloneNode(true)); 9    }10       where!=="before"?el.appendChild(fragment):el.insertBefore(fragment,el.firstChild);11 }

View Code

 

這就是文檔片段最佳化法，來減少appendChild多次直接附加在HTML後，使其呈現幾何數值增加；

 

Js中的appenChild,insertBefore--createDocumentFragment