javascript - 使用 css、javascript 和 xhtml 的大型 5000 单元格网格

Question

我需要创建一个大网格，大约有5,000 个单元格 (10x10px)。每个单元格都需要自己的 ID，必须是可点击的。被点击的单元格需要不同的阴影。我还必须有一个需要保持可见的背景图像。

这让我很头疼，因为创建 5000 个 div 标签的 HTML 开销实在是太多了。我们考虑过在客户端使用 JavaScript 动态创建 div 标签，但不知道如何合并已点击(不同阴影)单元格的列表。

有什么我们没有想到的吗？

马库斯

Answer 1

你确定你不需要 吗？

如果您打算在 Javascript 中生成网格，那么我的建议是:

1) 不要在循环中操作 DOM——它会非常慢。

2) 不要使用字符串连接 a-la out += '

';这也会很慢。最好的方法是将片段插入数组，然后加入。

3) 在插入 DOM 之前将单元格包装到某个容器中:插入一个元素 很多 child 比插入很多未包装的 DIV 更快。

4) 使用内联 block 定位单元格 div。 float 将花费大量时间在插入时重新计算。

5) 不要将点击处理程序单独绑定(bind)到每个单元格。在父级上使用 jQuery .delegate()。

6) 不要忘记 CSS 中的 rgba() ，这样你就可以很容易地让你的背景可见

参见 http://kod.as/lab/grid/用于我的 PoC 实现。