jQuery的性能

想象你必須做很多DOM操作（在我的情況下，它是一種動態列表）。jQuery的性能

請看下面的例子：

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對象陣列。

「$根」是一個UL元素

此代碼後是會發生什麼事，無論UL的是動畫（滾動），最後，執行該代碼的動畫的回調中：

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

這工作得很好，我唯一能做的就是表演。我會緩存我正在放置的所有DOM元素。沒有深入研究jQuery的源代碼，我的性能問題是否存在？

jQuery使用DocumentFragments來附加事物嗎？

如果創建

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

一個新的DOM元素，只在該點存儲在內存中是不是？

來源

2010-04-19 jAndy

我幾天前也遇到了同樣的問題。它的，如果你做這種方式要快得多：

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對象，你不需要reslect它的insertAfter）

來源

2010-04-19 11:24:10 meo

好，它確實這樣做更快。不幸的是，我不能這樣做，因爲pages [pindex]包含帶有.data和事件處理程序的jQuery對象。但無論如何+1。 – jAndy 2010-04-19 11:49:15

一個接一個地創建DOM節點通常比創建一個HTML字符串並讓瀏覽器處理它（通過innerHTML）要慢。這裏有關於這個的more details。

來源

2010-04-19 10:40:30 elias

如果您考慮性能，則應該將所有<li>子元素的整個元素構造爲一個字符串。對字符串連接使用「+ =」操作。最後使用jQuery在您的網頁中插入構造的字符串。

請參閱http://www.sitepen.com/blog/2008/05/09/string-performance-an-analysis/關於字符串性能。

來源

2010-04-19 10:46:07 Oleg

有一個slide from John Resig（jQuery創建者），他說jQuery確實在內部使用文檔片段。在下面的幻燈片中，他簡要地解釋瞭如何構建一個輕量級的文檔片段並將其附加到一個操作中，指出這個「ends up being really fast」。如果您還沒有（如您自己提及文檔片段），您可能需要考慮這一點。

至於與$('<div>')創建新元素的過程中，documentation說：

但如果字符串的似乎是一個HTML片段，jQuery的嘗試由HTML描述來創建新的DOM元素。然後創建並返回一個引用這些元素的jQuery對象。

如果您爲更復雜的html代碼片段提供單一標籤和「瀏覽器的innerHTML機制」，jQuery將使用「原生JavaScript createElement（）函數」。

來源

2010-04-19 10:49:53 Wolfram

jQuery的性能

回答

相關問題