1

From the performance point of view, is it better to keep a big amount of hidden HTML in the page (a big collection of elements) or to have just the JavaScript models and rebuild the HTML when needed?

Thanks

4
  • "hidden" HTML? Please explain Commented Jun 3, 2013 at 20:52
  • 1
    Well, it depends, are you using any frameworks? In jQuery for example you can detach elements from the DOM, so you can manipulate them and insert them again once you're done. I'm sure other libraries have similar tools. Commented Jun 3, 2013 at 20:53
  • @pattyd by hidden I mean with "display: none" or simply out of the scroll view of the page. Commented Jun 3, 2013 at 21:32
  • @elclanrs yes, I use jQuery, and later on I'll implement a detach/reattach system based on scrolling, but now I'm short with time (but if you can suggest me a good plugin for this, i would be grateful). So now I just want to be sure that having hundreds of html structures won't create me problems. Commented Jun 3, 2013 at 21:32

1 Answer 1

1

The more html you have in your page increases the download time for the html document. To add to this, when you want to manipulate the DOM, those extra elements may not be shown, but your code will still hit it increases the execution time of your javascript code.

You may want to look into templating. There are quite a few javascript frameworks (Underscore, Handlebars, etc...) that exist to make it easy to bind a model to and generate the html. Often this results in small amount of code that has to be written and you push the rendering of the html to the client vs the server which would improve the performance of your server application since it doesn't have to render the html and then pass it down.

Sign up to request clarification or add additional context in comments.

2 Comments

Hi! the html would be generated the first time after receiving the data via an ajax request from the json received, so i'm not scared by the loading time. I was wondering whether having that much html (we're speaking about hundreds of element with an inner html structure) would decrease the responsiveness of the page.
@Bakaburg In a general setting, yes. Those elements still exist and js will hit them and css matching/rendering would end up being expensive.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.