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

How expensive is it to dynamically insert DIVs using JavaScript?

本文关键字：JavaScript 动态 插入 DIV 使用      更新时间：2023-09-26

经过与自己的多次辩论，我决定动态创建覆盖画布的div。但我有个问题。动态创建div的成本有多高？如果我有一整张1000x1000的画布，里面装满了16x16的div，那会是一片混乱吗？如果有1000个隐藏的div，情况会更糟吗？（或显示：无）？

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

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

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

（如果这是一个转发，我很抱歉，我试过谷歌）

这一切都取决于如何将div插入DOM。理想情况下，您应该在内存中构建DIV，并在一个操作中将它们注入DOM。有多种方法可以做到这一点（请参阅基准测试用例中的各种完整示例）。

如果你使用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结构，使用这些本机方法会更难使用。本机方法也可能存在跨浏览器支持问题。

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

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

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

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

运行jsPerf DOM插入基准

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

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

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

一般答案：这主要取决于您的应用程序，而我们对此知之甚少。一般来说，HTML越复杂，在浏览器中呈现的时间就越长，需要更多的内存，DOM更改的成本也会更高。匹配的CSS规则和Javascript操作也是如此。

我建议采取以下方法：尝试任何一种方法。从小处开始，最后将HTML中的元素数量增加到您想要的数量。尝试在不同的浏览器中，也许在移动机器上等。尝试测量CPU和内存的使用情况，并以此为基础进行工作。

相关文章：