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

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

DOM操作在瀏覽器上是要付稅的。盡管性能提升是在瀏覽器，DOM很慢，如果你沒有注意到，你可能會察覺瀏覽器運行非常的慢。這就是為什么減少創建集中的DOM節點以及快速注入是那么的重要了。

現在假設我們頁面中有一個元素，調用AJAX獲取JSON列表，然后使用JavaScript更新元素內容。通常，程序員會這么寫：

var list = document.querySelector('ul'); ajaxResult.items.forEach(function(item) { // 創建

• 元素
  var li = document.createElement('li');
  li.innerHTML = item.text;
  
  //
• 元素常規操作，例如添加class，更改屬性attribute，添加事件監聽等
  
  // 迅速將
• 元素注入父級
  • • 中
  
  
  • • list.apppendChild(li);
  
  
  • });

上 面的代碼其實是一個錯誤的寫法，將元素帶著對每一個列表的DOM操作一起移植是非常慢的。如果你真的想要 使用document.createElement，并且將對象當做節點來處理，那么考慮到性能問題，你應該使用DocumentFragement。

DocumentFragement 是一組子節點的“虛擬存儲”，并且它沒有父標簽。在我們的例子中，將DocumentFragement想象成看不見的元素，在 DOM外，一直保管著你的子節點，直到他們被注入DOM中。那么，原來的代碼就可以用DocumentFragment優化一下：

var frag = document.createDocumentFragment();ajaxResult.items.forEach(function(item) { // 創建

• 元素
  var li = document.createElement('li');
  li.innerHTML = item.text;
  
  //
• 元素常規操作
  // 例如添加class，更改屬性attribute，添加事件監聽，添加子節點等
  
  // 將
• 元素添加到碎片中
  frag.appendChild(li);
  });
  
  // 最后將所有的列表對象通過DocumentFragment集中注入DOM
  document.querySelector('ul').appendChild(frag);

為DocumentFragment追加子元素，然后再將這個DocumentFragment加到父列表中，這一系列操作僅僅是一個DOM操作，因此它比起集中注入要快很多。

如果你不需要將列表對象當做節點來操作，更好的方法是用字符串構建HTML內容：

var htmlStr = '';ajaxResult.items.forEach(function(item) {// 構建包含HTML頁面內容的字符串 htmlStr += '

• ' + item.text + '

'; });// 通過innerHTML設定ul內容 document.querySelector('ul').innerHTML = htmlStr;

這當中也只有一個DOM操作，并且比起DocumentFragment代碼量更少。在任何情況下，這兩種方法都比在每一次迭代中將元素注入DOM更高效。

總結

以上是生活随笔為你收集整理的用DocumentFragments或innerHTML取代复杂的元素注入的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。