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

在与自己进行了大量讨论之后，我决定动态创建覆盖画布的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);

如果不使用jQuery，则需要使用

createDocumentFragment

，

cloneNode

，

appendChild

，等等。这些都是本机浏览器方法，速度最快（在英特尔Q8200上使用Chrome 21，我可以实现大约两倍的速度）但是，如果需要构建复杂的DOM结构，那么使用这些本机方法将更加困难。本机方法也可能有

如果你对它的工作原理感兴趣，请查看John Resig的这篇老文章：

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

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

var i=1000；
而(我--){
$（'body'）。追加（“新div”）；
}

代码行更少，但效率非常低

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

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

---

EDIT:自从我发布这个问题以来，@RobG、@Devu和我为各种DOM插入方法进行了一系列不同的基准测试。在某些浏览器（Chrome、Safari）上，最快的方法是使用

createDocumentFragment

、

cloneNode

等。但令人惊讶的是，在其他浏览器（FireFox 15、Internet Explorer等）上，通过

数组创建一长串HTML。join（）

和通过

innerHTML插入实际上是最快的方法。
一般回答：这主要取决于您的应用程序，我们对此知之甚少。一般来说，HTML越复杂，在浏览器中渲染所需的时间就越长，占用的内存就越多，DOM更改的成本也就越高，等等。匹配的CSS规则和Javascript操作也是如此

我建议采用以下方法：尝试任何一种方法。从小的开始，将HTML中的元素数量提高到最终想要的数量。尝试在不同的浏览器中，可能在移动机器上等。尝试测量CPU和内存的使用情况，并从中工作
 在我看来，这是一个介于易读、易变代码和速度之间的工资，只要速度没有显著差异，你就应该在速度之前追求可访问性，我相信JavaScript会给你这样的机会。听起来你的项目可能是一个很好的候选项目。16x16的1000x1000就是一个例子。更现实的是600x400网格。然而，在任何给定的时间背景中都可能有数千个div处于“打开”状态。谢谢你的帖子，它让我对演出有了一个大致的了解。：）无需多次使用
createElement
createElement，创建一个div并克隆它的效率要高得多。您还可以创建一个div，然后将1000000个div的标记“注入”为innerHTML（这实际上就是jQuery示例所做的）。向中添加一个简单的js克隆方法，它比jQuery快得多。@RobG它肯定快得多，但您的基准测试运行快数千倍的部分原因是因为忽略了div文本节点。我进行了一次调查，发现收获不大。在我的带有Chrome的英特尔Q8200四核上使用本机浏览器方法，我发现速度大约是原来的两倍。在某些浏览器（FireFox，IE，也许其他浏览器）上，最快的方法实际上是构建一长串HTML并通过innerHTML注入。OP想要模拟画布，因此不需要div中的任何内容，只需要在一侧添加1px填充和背景色，可以使用类应用。最好从备选方案中删除文本节点。innerHTML很快，但不是特别优雅。：）我将添加到测试用例中，可能有比一次生成一个HTML更快的方法。
var i = 1000;
while (i--) {
    $('body').append("<div>a new div</div>");
}