better keep big amount of html or create on the fly

Question

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

Answer 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.