javascript - 使用 JavaScript 动态插入 DIV 的成本有多高？

Question

经过与自己多次辩论后，我决定动态创建覆盖 Canvas 的 div。但我有一个问题。动态创建div的成本有多高？如果我有一个完整的 Canvas - 1000x1000 - 充满 16x16 div，会不会很困惑？如果有 1000 个隐藏的 div 会更糟糕吗？ (或显示:无)？

或者我应该将鼠标坐标与保存 x,y 位置的容器进行比较，并且必须将图像渲染到 Canvas 上。

我倾向于第一个更有效率，但我不确定。也许有一个中间立场。

对回复很感兴趣!感谢您抽出时间。

(如果这是转发，我很抱歉，我尝试过谷歌)

Answer 1

这完全取决于 DIV 是如何插入到 DOM 中的。理想情况下，您应该在内存中构建 DIV，并通过一个操作将它们注入(inject)到 DOM 中。有多种方法可以做到这一点(请参阅benchmark test cases以获取各种完整示例)。

如果您使用 jQuery，您可以像这样在内存中构建元素:

var i = 1000;
var aHTML = [];
while (i--) {
  aHTML.push("<div>a new div</div>");
}
var sHTML = aHTML.join("");
var domElmt = $(sHTML);

然后将该 DIV 插入到 DOM 中:

$('body').append(domElmt);

如果您不使用 jQuery，则需要使用 createDocumentFragment、cloneNode、appendChild 等。这些是 native 浏览器方法，并且将是最快的(我可以在 Intel Q8200 上使用 Chrome 21 实现大约两倍的速度)，但是如果您需要构建复杂的 DOM 结构，那么使用这些 native 方法会比较棘手。 native 方法也可能有 cross-browser support issues 。

如果您对其工作原理感兴趣，请查看 John Resig 的这篇旧帖子:http://ejohn.org/blog/dom-documentfragments/

现在将其与使用每个 DIV 访问 DOM 的方法进行对比:

var i = 1000;
while (i--) {
    $('body').append("<div>a new div</div>");
}

代码行数较少，但效率很低。

<强> Run the jsPerf DOM Insertion Benchmark

对于我的 Chrome 计算机上的基准测试，在内存中渲染 DIV 并一次性注入(inject)所有 DIV 比将每个单独的 DIV 单独注入(inject) DOM 快 38 倍。

最终，DOM 遍历/操作是您想要避免的。重复的 DOM 遍历/操作是昂贵的操作，并且肯定会在 1000x1000 DIV Canvas 上陷入困境——尤其是在较旧的浏览器上。

编辑:自从我发布这个问题以来，@RobG、@Devu 和我针对各种 DOM 插入方法整理了一堆不同的基准测试。在某些浏览器(Chrome、Safari)上最快的方法是使用 createDocumentFragment、cloneNode 等，但令人惊讶的是在其他浏览器(FireFox 15、Internet Explorer 等)上创建通过 array.join() 插入长 HTML 字符串并通过 innerHTML 插入实际上是最快的方法。