使用canvas标签或创建一堆<div's> Whats更快？</div's>

Question

嘿我有一个十六进制颜色数组，对于数组中的每种颜色，我想创建一个代表该颜色的80px×80px方形。什么会更快表现？

1：使用canvas标签迭代数组并使用fillStyle和fillRect（）;

或

2：迭代数组并创建一个div框并将div的背景颜色设置为数组中的当前颜色。

注意：我有1034种颜色，我打开其他建议，但它必须是基于网络的，不能闪存。

Answer 1

我会使用div，如果仅用于跨浏览器的轻松。

实际上，我尝试用服务器端语言进行操作，然后缓存结果。客户端是否需要与这些形状进行交互或者对它们进行任何操作才能使这不成为一种选择？

Answer 2

我个人去画布（在IE中用于VML模拟的excanvas.js将完成这项工作）。为简单起见和未来代码扩展的原因。

问题是，虽然使用本机canvas实现的浏览器在第一个选项中表现更好，但使用DIV（第二种方法）的IE应该更快。这是由于仿真实践，即动态创建VML元素（只有DIVs方法假定创建的元素更多）。

这只是一个推测:)，写一些测试并进行比较。

Answer 3

为了简单和速度，在document.createElement('div')的javascript中执行此操作（您不会下载1034个HTML标记块，它可以在任何地方使用）。