使用JavaScript动态插入DIV有多昂贵？ [英] How expensive is it to dynamically insert DIVs using JavaScript?

问题描述

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

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

我倾向于第一个更有效率，但我不确定。也许这里有一个中间位置。

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

（如果这是转贴，对不起，我试图google）

解决方案

这一切都取决于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渲染速度提高38倍，将每个单独的DIV分别注入到DOM中。

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

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

After much debate with myself, I decided that I would like to dynamically create divs that will overlay a canvas. But I have a question. How expensive is it to dynamically create divs? Would it be utter chaos if I were to have a full canvas--1000x1000--filled with 16x16 divs? And would it be even worse if there were 1000 hidden divs? (or displayed:none)?

Or should I just compare mouse coords with a container that will hold x,y positions, and having to render images to the canvas.

Im leaning towards the first being more efficient but I am unsure. Maybe there is a middle ground to this.

Very interested in the replies! Thanks for your time.

(if this is a repost, I am sorry, I tried to google)

解决方案

It all depends on how the DIVs are inserted into the DOM. Ideally, you should build out the DIVs in memory and inject them into the DOM in a single action. There are a variety of ways to do this (see the benchmark test cases for a variety of full examples).

If you use jQuery, you can build elements in memory like this:

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

and then to insert that DIV into the DOM:

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

If you don't use jQuery, you'll need to use createDocumentFragment, cloneNode, appendChild, etc. These are native browser methods and will be the fastest (I can achieve about double speeed with Chrome 21 on an Intel Q8200) but using these native methods will trickier to use if you need to build out a complicated DOM structure. The native methods may also have cross-browser support issues.

If you're interested in how this works, check out this old post by John Resig: http://ejohn.org/blog/dom-documentfragments/

Now contrast that with a method where you access the DOM with each DIV:

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

Fewer lines of code, but very inefficient.

Run the jsPerf DOM Insertion Benchmark

For that benchmark on my computer with Chrome, it's 38x faster to render the DIVs in memory and inject all at once than to separately inject each individual DIV into the DOM.

Ultimately, DOM traversal/manipulation is what you want to avoid. Repetitive DOM traversal/manipulation are expensive operations and will definitely bog down on a 1000x1000 canvas of DIVs--especially on older browsers.

EDIT: Since I posted this question, @RobG, @Devu and I put together a bunch of different benchmark tests for various DOM insertion methods. The fastest method on some browsers (Chrome, Safari) is to use createDocumentFragment, cloneNode, etc. but surprisingly on other browsers (FireFox 15, Internet Explorer, etc) creating a long string of HTML through an array.join() and inserting via innerHTML is actually the fastest method.

这篇关于使用JavaScript动态插入DIV有多昂贵？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！