大的html表格很慢嗎？

我最近一直在開發一個使用大量（數百）行的表的應用程序。這些行包含表格數據，每行包含兩個下拉列表以及顯示其下方隱藏表格行的鏈接。大的html表格很慢嗎？

當我嘗試從下拉列表中選擇一個值時以及顯示隱藏表格行時，我目前正在經歷漫長的延遲。

表格是我問題的來源嗎？

來源

2009-09-01 ErnieStings

每個下拉列表中有多少項？這些列表是否在每一行上重複？ – 2009-09-01 19:28:50

您使用的瀏覽器（HTML查看器）有沒有關係？ – ChrisW 2009-09-01 19:36:20

根據@ ErnieStrings的評論爲我的答案添加了asp.net標記。 @ErnieStrings - 我今天出去了，明天我會給你一個樣本。同時，在你熟悉這個之後，看看 2009-09-02 14:46:09

問題不在於表格佈局，而在於控件（100個選擇框）的渲染。下拉列表中有多少項目？它在不同操作系統上的所有瀏覽器中執行的方式是否相同？

對不起，如此模糊，但一般來說表格不是渲染緩慢，但由於缺乏可訪問性（儘管當然大部分理想主義是屏幕閱讀者不喜歡它們），所以被低估。

來源

2009-09-01 19:30:36

我第二次把'控制的改進'看作是問題。也許應該重新考慮數百行？另一種選擇是基於AJAX的「根據需要加載」行嗎？只是一個想法，少滾動=開心的用戶。 – Jakub 2009-09-01 19:56:05

從我收集的情況來看，如果寬度沒有明確說明，HTML表格可能會顯得很慢。如果不是，瀏覽器必須在計算正確的寬度之前完成單元格內容的加載。

MSDN在其「Building High Performance HTML Pages」文章中提供了一些信息here;他們建議以下（特別是關於表）：

設置在表的表佈局CSS屬性fixed。

明確定義每個列的對象col。

在每個col上設置WIDTH屬性。

來源

2009-09-01 19:31:07 Donut

非常感謝來源。是否有任何實際的基準，我們可以清楚地看到差異？ – 2014-05-15 10:11:06

有幾千個條目顯示靜態表時，但加入如排序或動態斑馬條紋可以很快陷入癱瘓，甚至現代的瀏覽器快速計算機上的效果，我沒有注意到任何放緩。確保你沒有在整個表中運行任何JavaScript迭代。

來源

2009-09-01 19:31:39

如果你知道每列的寬度應該是多少，請嘗試在表格的CSS中指定table-layout: fixed並查看是否有任何區別（它應該停止瀏覽器嘗試重新呈現整個表格，因爲您已經切換能見度在幾行）。

來源

2009-09-01 19:33:13 searlea

無論你想出什麼，在幾個平臺上的幾個瀏覽器上測試這個方法，用一些較慢的機器。除了用於Macintosh的Safari，我曾經有過一個應用程序可以快速到達。事實證明，這是它的下拉方式。這僅僅是實驗的替代品。呃，我的意思是測試。

來源

2009-09-01 19:36:59 slothbear

IE並沒有很好地處理非常大的DOM操作。如果你在每一行和一個鏈接中有兩個選擇，假設每個選擇有5個選項（（（5選項+1選擇）* 2）+ 1鏈接+ 3tds + 1tr）至少有17個DOM項目每行。另外，如果我沒有弄錯，即將每個文本項目視爲自己的DOM節點。因此，爲下拉文本添加另外10個DOM節點，併爲鏈接添加1個DOM節點，即每行28個DOM項目。

來源

2009-09-01 19:48:14 CaffGeek

我可以從經驗中得知，它幾乎可以肯定是引起緩慢的下拉列表。包含數百行的表格如果僅包含文本，則幾乎可以立即進行渲染，但只需幾十個選項即可爲每行添加下拉列表，現在即使是50行也需要大量時間。

嘗試圍繞表格行中的下拉菜單進行設計 - 如果這是一個表單（以及爲什麼您會有下拉菜單？），請讓用戶選擇他們希望編輯的行，然後將可編輯控件只有在那一行，無論是通過AJAX，如果你是這樣的事情，或更傳統的「細節視圖」方法。

來源

2009-09-01 21:02:35 Martha

我同意其他人的看法，不僅是你的表格導致了加載速度緩慢，而且下拉列表的數量也是如此。

如果它可以幫助你嘗試分頁你的表。您可以使用JavaScript框架，例如jQuery或extjs進行分頁和AJAX。

來源

2009-09-01 21:45:35

大的html表格很慢嗎？

回答

相關問題