What would be better for performance, having many hidden elements on a page, or creating them and destroying them as they are needed with javascript upon request. For example, when something is clicked the element is first created and then shown. When it is closed it is then destroyed. Would that be better than having hidden elements scattered among the page?

What would be better for performance, having many hidden elements on a page, or creating them and destroying them as they are needed with javascript upon request. For example, when something is clicked the element is first created and then shown. When it is closed it is then destroyed. Would that be better than having hidden elements scattered among the page?

• javascript
• jquery
• html
• performance

• I'd suggest creating a couple of html pages to test this yourself; though I'd be interested in any objectively-proven answers people may offer. – David Thomas Commented Dec 5, 2010 at 21:44
• 1 one of the best web performance tips from Yahoo says , it always better to have less no of dom elements ///developer.yahoo./performance/rules.html but few elements doesn't matter unless you have some memory leaks. – kobe Commented Dec 5, 2010 at 21:46
• @gov: There's very little that's "always" better. You have to decide whether the bigger DOM is worth the time you'll save by not creating DOM elements on the fly (which is still pretty slow in most browsers). – cHao Commented Dec 5, 2010 at 22:11

4 Answers 4

I'd imagine it depends in part on how plex the elements are, and in part on what you mean by "performance". The more plex the element, the more code has to run to create it, and the longer it'll take to create. Thus, hiding the element in the page would probably make it appear faster, but at the cost of a bigger page (and more DOM to sift through), which could slow things down a bit overall.

You're generally going to get the best on-click performance just showing/hiding elements, but that es at the cost of a bigger initial page load. If you're using jQuery, you can also use detach() to remove an element from the DOM graph without destroying it, so you can re-attach it elsewhere, which is less expensive than destroy/create.

Generally speaking, in order of performance from best to worst:

1. Showing existing hidden element
2. innerHTML from array + join
3. innerHTML from string concatenation
4. Detach + append existing DOM node
5. Cloning of DOM nodes
6. Creation of fresh DOM nodes

If you need to generate plex content on the fly, you might look at a Javascript templating tool like handlebars.js - it'll let you define templates, then create markup from those templates + some passed in object that you can then assign via innerHTML. It makes for a very quick and very efficient way to manage dynamic clientside content.

Creating and destroying DOM elements is about the slowest operation you could do in JavaScript, especially in IE. Having many hidden elements will take up more memory and will probably take a bit longer to load initially, but think of it as a cache: you're caching these elements for later use, and just reusing them when you need them, instead of creating and destroying them on the fly.

However, if you aren't doing this on a very large scale (hundreds/thousands of elements), it probably won't matter. The time it takes to create or destroy a single DOM element is negligible, so if that's your case, do whatever would be easier for you.

IMHO you should do another kind of consideration, since is obvious that page load speed is affected by it's size in term of kb.

• How to calculate web page size ?

  • HTML document file size (DOM elements);
  • File sizes graphics - including any background images;
  • Any included (JavaScript (.js), External Sheets (.css), SSI, PHP files etc) files sizes;
  • File sizes of preloaded data such as images;
  • Sizes of any multimedia content such as sound, video, Flash files etc. that are embedded in the web page;

• what is the maximum size?

  • Each web page should not be more than 50kb. This will guarantee that web pages load in a matter of seconds.
  • iPhone won't cache ponents bigger than 25K.

so, your problem is not properly the number of dom elements, you have a lot of things to do before care of hidden elements number! ;) hope this help

REFERENCE:

• Optimizing web pages- Maximum page size
• Best Practices for Speeding Up Your Web Site
• Using site speed in web search ranking
• Javascript Performance
• JavaScript Performance Best Practices

TOOLS

• Page Speed, the Web Performance Tool