「虛擬」dom操縱？

Question

我知道做多個dom操作是不好的，因爲它會強制多次重繪。

即：

$('body').append('<div />') 
     .append('<div />') 
     .append('<div />') 
     .append('<div />'); 

取而代之的是更好的做法顯然是：

$('body').append('<div><div></div><div></div><div></div><div></div></div>'); 

但我好奇的虛擬操作

即：

$('<div />').append('<div />') 
      .append('<div />') 
      .append('<div />') 
      .append('<div />') 
      .appendTo('body'); 

是仍然不好，很明顯，調用一個函數會有一些開銷，但是會有什麼嚴重的性能命中？

---

原因，我問的是這樣的：

var divs = [ 
    {text: 'First', id: 'div_1', style: 'background-color: #f00;'}, 
    {text: 'Second', id: 'div_2', style: 'background-color: #0f0;'}, 
    {text: 'Third', id: 'div_3', style: 'background-color: #00f;'}, 
    {text: 'Fourth', id: 'div_4', style: 'background-color: #f00;'}, 
    {text: 'Fifth', id: 'div_5', style: 'background-color: #0f0;'}, 
    {text: 'Sixth', id: 'div_6', style: 'background-color: #00f;'} 
]; 

var element = $('<div />'); 

$.each(divs, function(i,o){ 
    element.append($('<div />', o)); 
}); 

$('body').append(element); 

想像一下div的陣列已經從描述形式的數據庫表（好吧，我使用的div的例子，但也可以是很容易取代輸入）或類似的東西。

或「推薦」的版本中，我們有：

var divs = [ 
    {text: 'First', id: 'div_1', style: 'background-color: #f00;'}, 
    {text: 'Second', id: 'div_2', style: 'background-color: #0f0;'}, 
    {text: 'Third', id: 'div_3', style: 'background-color: #00f;'}, 
    {text: 'Fourth', id: 'div_4', style: 'background-color: #f00;'}, 
    {text: 'Fifth', id: 'div_5', style: 'background-color: #0f0;'}, 
    {text: 'Sixth', id: 'div_6', style: 'background-color: #00f;'} 
]; 

var element = '<div>'; 

$.each(divs, function(i,o){ 
    element += '<div '; 

    $.each(o, function(k,v){ 
     if(k != 'text'){ 
      element += k+'="'+v+'" '; 
     }    
    }); 

    element += '>'+o.text+'</div>'; 

}); 

element += '</div>'; 

$('body').append(element); 

Answer 1

首先，雖然它是偉大的，瞭解潛在的性能命中這樣你應該總是通過測量來看看你甚至有一個問題開始。

如果你無法感知的問題，寫最可讀的代碼。

如果你能感覺到一個問題，措施，改變和措施。

說了這麼多之後，您發佈的最後一個示例涉及到尚未寫入DOM的元素，因此直到appendTo將元素添加到DOM時纔會重新繪製。

我會感到非常驚訝，如果你能抓住第二個和第三個例子之間的速度差 - 而且相當驚訝，如果你能看到的任何人之間的主要區別。

Answer 2

如果追加節點時，真的很擔心性能，你需要使用documentfragments。這些將允許您在不重繪的情況下將元素附加到dom。 John Resign在這個主題上有一個excellent article。他注意到性能提高了200-300％。我在我的一個應用程序中實現了文檔片段，並可以確認他的聲明。

Answer 3

我認爲，如果你開始到這種代碼是一個性能瓶頸的時候，你應該使用的模板，而不是DOM操作。

但是，是的，使用文檔片段的方法（把所有節點到節點分離連接到DOM之前）將是在大多數情況下更快，幾乎從來不慢。

• http://mustache.github.com/
• https://developers.google.com/closure/templates/docs/helloworld_js
• https://developer.mozilla.org/en-US/docs/JavaScript_templates

Answer 4

不管發生在良好的老一代的標記在運行時？ 嚴重的是，發生了什麼？

我同意@ Sohnee關於可讀性重要性的觀點，但DOM操作是瀏覽器可以執行的一些最昂貴的操作。維護一串標記的選項可以做到完全可讀，並且提供超出可以忽略的用戶體驗改進。

在this jsperf中，我們在運行時創建了一個10x100表格 - 這對於數據分頁是一個完全合理的（而不是迄今爲止最複雜的情​​景）。在運行最新版本Chrome的四核機器上，直接DOM操作腳本需要60ms才能完成，而標記緩存需要3ms。

這是在我的設置上難以區分的差異，但那些坐在企業防火牆後面仍然被迫使用過時版本的IE瀏覽器的糟糕數字處理人員呢？如果所需的DOM操作會變得更加沉重，屬性操作和積極強迫？

我只是說如果你想優化一些JavaScript，這不是一個糟糕的地方開始。