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

pattyd
  • 5,927
  • 11
  • 38
  • 57
Bakaburg
  • 3,165
  • 4
  • 32
  • 64
  • "hidden" HTML? Please explain – pattyd Jun 03 '13 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. – elclanrs Jun 03 '13 at 20:53
  • @pattyd by hidden I mean with "display: none" or simply out of the scroll view of the page. – Bakaburg Jun 03 '13 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. – Bakaburg Jun 03 '13 at 21:32

1 Answers1

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.

Justin
  • 3,337
  • 3
  • 16
  • 27
  • 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 Jun 03 '13 at 21:26
  • 1
    @Bakaburg In a general setting, yes. Those elements still exist and js will hit them and css matching/rendering would end up being expensive. – Justin Jun 03 '13 at 21:37