jQuery性能

Question

想象您必須做很多DOM操作（就我而言，它是一個動態列表）。

看這個例子：

var $buffer = $('<ul/>', {
                'class': '.custom-example',
  'css':  {
   'position':  'absolute',
   'top':   '500px'
  }
           });

$.each(pages[pindex], function(i, v){
 $buffer.append(v);
});

$buffer.insertAfter($root);

“頁面”是一個數組，將LI元素保存為jQuery對象。

“ $ root”是UL元素

這段代碼之后發生的事情是，兩個UL都進行了動畫處理（滾動），最后，在動畫的回調中執行了以下代碼：

$root.detach();
$root = $buffer;
$root.css('top', '0px');
$buffer = null;

效果很好，我唯一想得到的就是性能。 我確實緩存了所有要使用的DOM元素。 在不深入研究jQuery源代碼的情況下，是否有可能出現我的性能問題？

jQuery是否使用DocumentFragments附加內容？

如果您使用創建新的DOM元素

var new = $('<div/>') 

它現在只存儲在內存中嗎？

Answer 1

如果您考慮性能，則應將所有<li>子元素作為字符串構造整個<ul>元素。 對字符串串聯使用“ + = ”操作。 最后，使用jQuery在網頁內插入構造的字符串。

有關字符串性能的信息，請參見http://www.sitepen.com/blog/2008/05/09/string-performance-an-analysis/ 。

Answer 2

John Resig （jQuery的創建者）有一張幻燈片 ，他說jQuery實際上確實在內部使用文檔片段。 在下面的幻燈片中，他簡要地解釋了如何構建一個輕量級的文檔片段，並將其附加到一個操作中，說明此操作“ 最終變得非常快 ”。 如果您還沒有這樣做的話，您可能想研究一下（正如您自己提到的文檔片段）。

至於使用$('<div>')創建新元素的過程， 文檔說：

但是，如果該字符串看起來像是HTML代碼段，則jQuery嘗試創建HTML所描述的新DOM元素。 然后，創建並返回一個引用這些元素的jQuery對象。

如果您提供單個標記，則jQuery使用“本機JavaScript createElement（）函數”，而對於更復雜的html代碼段，則使用“瀏覽器的innerHTML機制”。

Answer 3

幾天前我也遇到了同樣的問題。 如果這樣做的話，速度會更快：

var buffer = $('<ul class="custom-example" style="position: absolute; top:500px"></ul>')

var html = ''

$.each(pages[pindex], function(i, v){
   html += v
});

buffer.html(html)

buffer.insertAfter($root);

（注意：在您的示例緩沖區中，緩沖區已經是一個jquery對象，您無需為insertAfter更改它）

Answer 4

通常一一創建DOM節點要比創建HTML字符串並使瀏覽器（通過innerHTML）對其進行處理要慢。 這是有關此的更多詳細信息。