Tablesorter性能建議？

Question

我使用tablesorter jquery插件來排序我的表。當表格大小少於500行時，這通常工作。隨着表中的行數增加到2K或3K以上，表格頁面加載變得非常緩慢，並且對於基於表格數據的後續過濾器，花費時間到頁面停止2-7秒的時間過濾器框。幾秒鐘之後，頁面將恢復正常並顯示已過濾的值。這是TableSorter插件的正常行爲還是與我的代碼有關？任何改善這種時滯的建議？

Answer 1

由於重（2K到3K行）DOM操作，性能下降。

爲了提高性能，我可以看到以下幾種可能性。

儘量減少DOM操作/訪問

DOM操作/訪問始終是昂貴的。所以，儘量減少。

在TableSorter代碼中，unminified - 行號。 337：

for (var i = 0; i < totalRows; i++) { 
    var pos = n[i][checkCell]; 
    rows.push(r[pos]); 
    if (!table.config.appender) { 
     var l = r[pos].length; 
     for (var j = 0; j < l; j++) { 
      tableBody[0].appendChild(r[pos][j]); 
     } 
    } 
} 

在上面的代碼中，有兩個嵌套for循環。讓我們假設我們有2K行，並且已經設置了table.config.appender。在最壞的情況下，appendChild可能運行的可能比2K X 500次多？

這只是一個例子。在這個地方，而不是每次迭代附加子級，獲取行字符串並連接成結果字符串。在所有迭代之後，替換表中的文本。在這種情況下，我們只訪問DOM一次。這隻有在單元格中沒有文本但單個單元格文本/元素沒有綁定事件的情況下才有效。 （即使我們想要在單元格文本/元素上綁定事件，也有更好的方法）。

但是這需要TableSorter插件修改。

的Web工人在現代瀏覽器

在運行JavaScript，UI凍結。所以，在我們的情況下，由於我們有大量的數據，所以肯定需要一些時間來處理。如果我們將這個數據處理移動到其他線程（或者同時運行而不會阻塞用戶界面），它會更好。

爲此，我們可以使用Web Workers，它在舊版瀏覽器中不受支持。

那麼，TableSorter如何工作？一旦表被加載它將緩存所有的數據。當然，它不會迭代每一行來獲取數據。一旦任何過濾器被觸發，它將開始處理數據來對行進行排序。這個處理可以移動到一個Web工作人員，這將解除用戶界面的凍結。雖然這是工作，我們可以顯示一些漂亮的過濾...消息，同時用戶可以玩其他元素。

我們可以檢測當前瀏覽器是否支持Web Workers。如果是，那麼我們可以在一個新的線程中處理數據。

但是這需要TableSorter插件修改。

使用數據庫服務器

如果我們從數據庫中提取數據，並顯示在前端表它，如果我們擁有的數據量好，我們可以更好地讓服務器以獲取從數據庫中排序的數據並使用AJAX調用顯示。

相信我，數據庫服務器非常適合做這些事情。在進行AJAX調用時，我們可以顯示一些處理，並且UI將不會被凍結。

這需要服務器端編程。

這些就是我所想的。可能我更喜歡使用上述三種。儘可能減少DOM操作/訪問。我在現代瀏覽器中使用Web Workers。在較舊的瀏覽器中，我依賴於數據庫服務器。肯定需要一些時間來實施。