前端性能優化：DocumentFragments或innerHTML取代複雜的元素注入

時間 2019-12-01

標籤前端性能優化 documentfragments innerhtml 取代複雜元素注入欄目系統性能简体版

原文原文鏈接

日期：2013-6-19 來源：GBin1.com javascript

我們的瀏覽器執行愈來愈多的特性，而且網絡逐漸向移動設備轉移，使咱們的前端代碼更加緊湊，如何優化，就變得愈來愈重要了。前端給力的地方是能夠有許多種簡單的策略和代碼習慣讓咱們能夠保證最理想的前端性能。咱們這個系列的主題就是要告訴你9種代碼小技巧，只須要一分鐘，就能夠優化你現有的代碼。 html

使用DocumentFragments或者innerHTML代替複雜的元素注入

DOM操做在瀏覽器上是要付稅的。儘管性能提高是在瀏覽器，DOM很慢，若是你沒有注意到，你可能會察覺瀏覽器運行很是的慢。這就是爲何減小建立集中的DOM節點以及快速注入是那麼的重要了。前端

如今假設咱們頁面中有一個<ul>元素，調用AJAX獲取JSON列表，而後使用JavaScript更新元素內容。一般，程序員會這麼寫： java

var list = document.querySelector('ul');
ajaxResult.items.forEach(function(item) {
    // 建立<li>元素
    var li = document.createElement('li');
    li.innerHTML = item.text;

    // <li>元素常規操做，例如添加class，更改屬性attribute，添加事件監聽等

    // 迅速將<li>元素注入父級<ul>中
    list.apppendChild(li);
});

上面的代碼實際上是一個錯誤的寫法，將<ul>元素帶着對每個列表的DOM操做一塊兒移植是很是慢的。若是你真的想要使用document.createElement，而且將對象當作節點來處理，那麼考慮到性能問題，你應該使用DocumentFragement。程序員

DocumentFragement 是一組子節點的「虛擬存儲」，而且它沒有父標籤。在咱們的例子中，將DocumentFragement想象成看不見的<ul>元素，在 DOM外，一直保管着你的子節點，直到他們被注入DOM中。那麼，原來的代碼就能夠用DocumentFragment優化一下： ajax

var frag = document.createDocumentFragment();

ajaxResult.items.forEach(function(item) {
    // 建立<li>元素
    var li = document.createElement('li');
    li.innerHTML = item.text;

    // <li>元素常規操做
    // 例如添加class，更改屬性attribute，添加事件監聽，添加子節點等

    // 將<li>元素添加到碎片中
    frag.appendChild(li);
}); ........

via Nelly@極客標籤瀏覽器

來源：前端性能優化：DocumentFragments或innerHTML取代複雜的元素注入性能優化