Question

我需要在浏览器中显示和操作最多10,000个简单单元格（例如，100乘100）。这些单元格基本上只是一个彩色矩形。操作包括使用Javascript更改单元格颜色，处理每个单元格上的单击等。每个单元格使用1 div，并使用1 div将单元格组合成一行，我可以得到基本上10,000个DOM元素，但这仍然相当很多。我很关心甚至更快的DOM函数的性能，比如getElementById。

初步问题：如果我将所有必要的DOM元素引用存储在Javascript数组中（例如10,000个元素的数组，每个单元格一个元素）并按元素操作CSS，这是否有一个祷告和DOM有200-500个元素一样快？

所以，我正在寻找有关如何更有效地展示这个100 x 100网格的建议。我考虑使用canvas并使用Javascript绘制每个单元格，但我不确定实际上会有多快，特别是在编辑单元格的样式时。我也不太愿意使用canvas，因为它不是完全交叉兼容的（读取：@＃％$ ing IE），在某些时候我可能需要使这个东西与IE兼容。 / p>

你有什么想法？

Answer 1

请参阅JavaScript data grid for millions of rows，或者简而言之，使用SlickGrid - http://github.com/mleibman/slickgrid

Answer 2

对于它的价值，您可以使用边框让一个<div>代表三个或更多区域。虽然确保跨浏览器兼容性会很尴尬（考虑到Trident，Gecko，Webkit和Presto之间的差异）。

如果有一个原因，细胞基本上是表格中的表格，你可以使用表格。这可以简化一些事情，但可能是非语义的，具体取决于你的用例。

另外，我个人测试创建这个，你有可用的选项，表格，div，列表（可能是ul，但这取决于你的使用情况）...然后再找你发现的最快的。

我建议使用CSS-sprites作为每个单元格的背景/着色，如果它们是可预测的高度宽度，只是为了节省一些带宽。

<小时/> 回答评论中的问题：

让一个div为三个区域生成颜色，假设每个div的固定高度/宽度为100px。

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被认为值得评论。）

Answer 3

jsgraphics演示了如何使用div进行2D绘图。在最坏的情况下，每个div都是一个像素，它可以在画布上管理数千个像素。

另一种选择是仅显示用户当时可以看到的内容。虚拟滚动区域库之类的东西可能很有用。我们的想法是只为用户可以看到的区域渲染（创建div）。 google

在浏览器中有效地表示大型网格

3 个答案: