在處理大型DOM元素時加快jQuery的空（）或replaceWith（）函數

讓我開始爲不給出代碼段而道歉。我正在進行的項目是專有的，恐怕我無法顯示，正好是我正在處理的。不過，我會盡力描述。在處理大型DOM元素時加快jQuery的空（）或replaceWith（）函數

這裏是什麼在我的應用程序繼續細分：

用戶點擊一個按鈕
服務器在數據表的形式獲取的圖像列表
表中的每一行包含8個數據單元，這又各自包含一個超鏈接
- 由用戶請求的每個可以包含最多50個行（I可以改變這個數目如果需要的話）
- 這意味着該表包含800個以上單個DOM元素
- 我的分析顯示jQuery("#dataTable").empty()和jQuery("#dataTable).replaceWith(tableCloneObject)佔我整體處理時間的97％，平均需要4-6秒才能完成。

我正在尋找一種方式來加快要麼與需要除去大量的DOM元素打交道時，上述jQuery函數/替換。我希望我的解釋有幫助。

2009-06-12 Levi Hackwith

jQuery的empty()正在你的桌子上很長的時間，因爲它的工作的一個真正巨大的量在預防內存泄漏的利益清空元素的內容。如果你可以用風險住，你可以跳過邏輯參與，只是做到這一點得到像這樣擺脫了表的部分內容：

while (table.firstChild) 
     table.removeChild(table.firstChild);

或

table.children().remove();

來源

2009-06-12 17:33:05 chaos

您是否必須一次性重新填充所有內容，或者您是否可以通過setTimeout（）中的塊進行重新填充？我意識到它可能需要更長時間的塊，但對於用戶來說，看到發生的事情而非明顯的鎖定是很有價值的。

來源

2009-06-12 17:21:36 Nosredna

它必須一次完成。 – 2009-06-12 17:23:46

我最近有一個非常大的數據表，在進行所有DOM操作時進行更改時，會花費15秒到一分鐘的處理時間。我在所有瀏覽器中都下了1秒鐘，但是IE瀏覽器（IE8需要5到10秒）。

我發現的最大速度增益是從DOM中刪除了我正在使用的父元素，對其執行更改，然後將其重新插入到DOM中（在我的案例中爲tbody）。

在這裏，您可以看到兩個相關的代碼行，使我獲得了巨大的性能提升（使用Mootools，但可以移植到jQuery）。

update_table : function(rows) { 
    var self = this; 
    this.body = this.body.dispose(); //<------REMOVED HERE 
    rows.each(function(row) { 
     var active = row.retrieve('active'); 
     self.options.data_classes.each(function(hide, name) { 
      if (row.retrieve(name) == true && hide == true) { 
       active = false; 
      } 
     }); 
     row.setStyle('display', (active ? '' : 'none')); 
     row.store('active', active); 
     row.inject(self.body); //<--------CHANGES TO TBODY DONE HERE 
    }) 
    this.body.inject(this.table); //<-----RE-INSERTED HERE 
    this.rows = rows; 
    this.zebra(); 
    this.cells = this._update_cells(); 
    this.fireEvent('update'); 
},

來源

2009-06-12 17:23:37 tj111

好的，我可以看到這個邏輯。但是，就我而言，我基本上從中刪除了一張表。你會認爲這不會花費很長時間，但裏面的表格就是800多個元素。鑑於這種情況，你認爲你提出的解決方案仍然有效嗎？ – 2009-06-12 17:27:40

我是。他們正在HTML 5中引入DOM碎片來處理這個問題。我認爲，如果您嘗試拉動，更新它，並將其重新放回到您的位置，將會看到巨大的性能提升。此外，它做起來非常簡單，我用2行代碼進行了更改。如果您安裝了Firebug，則可以使用「控制檯」選項卡下的「配置文件」按鈕來查看您的性能正在進食的位置。 – tj111 2009-06-12 17:33:24

-1

什麼工作對我來說是$("#myTable").detach() 。我必須清理一個有1000行的表格。我試過$("#myTable").children().remove()。這是對$("myTable").empty()的改進，但仍然非常緩慢。 $("#myTable").detach()需要1秒或更少。在FF和Chrome中正常工作。 IE仍然很慢。

來源

2013-03-22 18:35:47 Rashmi

在處理大型DOM元素時加快jQuery的空（）或replaceWith（）函數

回答

相關問題