How expensive is it to dynamically insert DIVs using JavaScript? [closed]

问题

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 7 years ago.

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)

回答1:

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.

回答2:

General answer: it depends mainly on your application, and we know very few about this. in general the more complex your HTML gets, the longer will it take to render in your browser, it will take more memory, DOM changes will be more expensive etc. The same goes for your matching CSS rules and Javascript manipulations.

I would suggest the following approach: try either approach. Start of small and raise the number of elements in HTML to what you want to have in the end. Try in different browsers, perhaps on mobile machines etc. Try to measure CPU and Memory usage and work from this.

来源：https://stackoverflow.com/questions/12420038/how-expensive-is-it-to-dynamically-insert-divs-using-javascript