在瀏覽器中有效地表示一個大網格

我需要在瀏覽器中顯示和處理最多10,000個簡單單元格（比如100乘100）的網格。這些單元基本上只是一個彩色矩形。操作包括使用Javascript更改單元格顏色，處理每個單元格的單擊等。使用每個單元格1個div和1個div將單元格組包裝到一行中，我可以深入到基本上10,000個DOM元素，但這仍然相當很多。我擔心更快的DOM功能的性能，如getElementById。在瀏覽器中有效地表示一個大網格

最初的問題：如果我將所有必要的DOM元素引用存儲在一個Javascript數組中（例如一個10,000元素的數組，每個單元格一個元素）並且在每個元素的基礎上操作CSS，是否有祈禱當DOM具有200-500個元素時，其速度會如此快？

所以，我正在尋找如何能夠更有效地顯示這100×100網格的建議。我已經考慮使用canvas並使用Javascript繪製每個單元格，但我不確定這實際上會有多快，特別是在編輯單元格樣式時。我也不太傾向於使用canvas，因爲它不完全交叉兼容（閱讀：@＃％$ ing IE），並且在某些時候我可能需要使這個東西與IE兼容。

你的想法是什麼？

來源

2010-02-19 Matt Ball

對於它的價值，有可能您可以使用邊界有一個<div>代表三個或更多區域。儘管確保跨瀏覽器兼容性（鑑於Trident，Gecko，Webkit和Presto之間的差異）會很尷尬。

如果有一個原因，基本上，他們的演示文稿中的單元格可以使用表格。這會簡化一些事情，雖然可能是非語義的，這取決於你的用例。

此外，我個人還會測試如何使用表格，divs，列表（可能是ul，但這取決於您的用例）創建它，然後只是與你發現的是最快的。

我推薦使用CSS-sprites來渲染每個單元格的背景/顏色，如果它們的高度可以預測的話，只是爲了節省一些帶寬。

響應於該問題在註釋：

要具有一個div產生彩色爲三個區域，假設每100像素的div一個固定的高度/寬度。

div#3areas 
{width: 100px; 
height: 100px; 
background-color: #f00; /* for the vertically-centred area */ 
border-top: 100px solid #00f; 
border-bottom: 100px solid #0f0; 
}

應該產生這樣的：

+------------------------+ 
|      | 
|  border-top  | 
|  (#00f   | 
+------------------------+ 
|      | 
|  central content | 
|  area (#f00)  | 
+------------------------+ 
|      | 
|  border-bottom  | 
|   (#0f0)   | 
+------------------------+

但它可能不會，因爲在瀏覽器處理邊界的不同方式，請參閱：http://www.cssplay.co.uk/boxes/borders.html（雖然這是相當失日期，當IE6，Mozilla 1.5和Netscape 7被認爲值得評論時寫）。

來源

2010-02-19 16:24:20

細胞是扁平的，但有點痛與CSS樣式的 - 這就是爲什麼我用div的去了，這使我有同樣數量的DOM元素，但更容易風格。背景只是一種CSS顏色，所以不需要精靈。 – 2010-02-19 17:30:26

我將如何使用邊框使一個「div」代表多個區域？ – 2010-02-19 22:29:45