Question

经过与我自己的争论，我决定动态创建覆盖画布的div。但我有一个问题。动态创建div有多贵？如果我有一个完整的画布 - 1000x1000 - 充满16x16 divs，它会完全混乱吗？如果有1000个隐藏的div，情况会更糟吗？（或显示：无）？

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

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

对回复非常感兴趣！谢谢你的时间。

（如果这是转贴，我很抱歉，我试图谷歌）

Answer 1

这一切都取决于DIV如何插入DOM。理想情况下，您应该在内存中构建DIV并在单个操作中将它们注入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等。这些是本地浏览器方法，并且将是最快的（我可以在英特尔Q8200上使用Chrome 21实现大约两倍的速度）但如果您需要构建复杂的DOM结构，则使用这些本机方法将更加难以使用。原生方法也可能有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渲染到内存并一次注入所有内容比将每个单独的DIV分别注入DOM更快38倍。

最终，DOM遍历/操作是您想要避免的。重复DOM遍历/操作是昂贵的操作，并且肯定会陷入1000x1000 DIV画布 - 特别是在旧版浏览器上。

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

Answer 2

一般答案：这主要取决于您的申请，我们对此知之甚少。一般来说，你的HTML越复杂，在浏览器中渲染所需的时间越长，需要更多内存，DOM更改将更加昂贵等等。对于匹配的CSS规则和Javascript操作也是如此。

我建议采用以下方法：尝试任何一种方法。从小开始，将HTML中的元素数量增加到最终的目标。尝试在不同的浏览器中，也许在移动设备上等。尝试测量CPU和内存使用情况并从中工作。

使用JavaScript动态插入DIV有多贵？

2 个答案: