如何在使用JQuery創建或刪除數十個div時優化性能？

背景：在我正在研究的當前項目中，我創建了一個jQuery插件，用於創建可拖動的「谷歌地圖」式地圖，由多個拼貼組成。類似谷歌地圖的工作方式，但沒有放大這一點。如何在使用JQuery創建或刪除數十個div時優化性能？

此地圖插件創建並銷燬每個鼠標使用jQuery的$('..').append拖動一個圖塊長度的10-20個<div>，並且它具有不錯的性能。但我希望性能更好，以便讓擁有較少資源的計算機的人們更容易訪問應用程序。

問題：

我能做些什麼，以最大限度地提高性能創建和銷燬大量使用jQuery的div？

通過修改要刪除的現有元素，而不是從頭開始創建它們，重新使用生成的<div>元素的性能會更好嗎？

使用生成的$('<div>')創建元素是否比在已存在的元素上選擇和更改類和子元素更慢或更快？

來源

2010-01-15 Mark Rogers

創建DOM元素非常昂貴。儘可能地嘗試並避免它。話雖如此，新發布的jQuery 1.4顯然提高了性能，但如果可以的話，仍然可以避免它。

從jQuery 1.4 Released：

jQuery(「<div>」)jQuery(「<div/>」)和jQuery(「<div></div>」)（jQuery() Documentation，Commit）

所有這三個現在使用相同的代碼路徑（使用使用document.createElement），提高性能 jQuery("<div></div>") 。請注意，如果您指定了屬性，則我們使用瀏覽器的本機解析（使用 innerHTML）。

是的，重用要好得多。

來源

2010-01-15 02:37:15 cletus

http://www.flickr.com/photos/jeresig/4271690739/sizes/o/ – 2010-01-15 16:37:32

我轉而使用div tile重用系統，也使用jQuery 1.4，而現在的東西就像風一樣飛。感謝您的提示。 – 2010-01-15 18:58:18

一個提示 - 如果您將一堆項目附加到DOM，請將它們構建爲字符串（如果可能），並將所有項目一次追加。

下面是關於這一主題的很好的鏈接：

http://www.artzstudio.com/2009/04/jquery-performance-rules/#limit-dom-manipulation

來源

2010-01-15 02:38:56 ScottE

我相信你，因爲這聽起來合乎邏輯，但我想知道你是否可能有關於這個話題的任何鏈接？謝謝！ – 2010-01-15 17:16:11

我添加了一個體面的鏈接到我的答案。 – ScottE 2010-01-15 19:48:37

感謝您的信息！ +1 – 2010-01-15 22:37:24

在最近的JQuery的項目，我必須定位與style - 標籤和絕對位置500個IMG標籤都有效。事實證明，刪除它們並用新座標重新創建它們比使用JQuery css函數修改style -tag要快得多。（更換整個style-tag可能會更快，但在這種情況下這是不可能的。）

我還測量過，建立一個字符串與所有IMG -tags相比更快（大約10-15％），並且將它們添加到一個附件中比將它們逐個添加更快（瀏覽器不需要重新繪製？）

在你的情況下，它應該很容易衡量兩種不同的方法：

var start = new Date().getTime(); 

// Do the update here 

var end = new Date().getTime(); 
$('#redraw').html(end - start);

添加一個佔位符，在您的HTML：

Redraw: <span id="redraw"></span>ms

來源

2010-01-15 18:34:16

很酷！ +1 – 2010-01-15 22:36:27

...或者你可以使用螢火蟲 – ScottE 2010-01-15 22:42:00

@ScottE：螢火蟲分析擷取了很多其他的東西。我仍然有明確的測量打開，看看我是否搞亂了重繪速度。 – 2010-01-16 07:16:13

如何在使用JQuery創建或刪除數十個div時優化性能？

回答

相關問題