Javascript vs HTML (Which takes more time to load)

Question

What would i be better off having a lengthier Javascript or a lengthier HTML. Few things- 1. I don't care about the SEO ratings. 2. I do care about the speed of the site. 3. I do care about the functionality of the web site.

Basically my question for the core coders- Whats better -

<div> Blah blah blah blah </div>

or

document.getElementById("blah").innerHTML = "Blah blah blah blah"

? Any extra knowledge is always welcome too :). Thank You.

Answer 1

Having the browser render plain HTML will always be faster than having to load JavaScript, wait for the DOM to be ready, and then use JavaScript to manipulate the DOM.

Even if you ignore the fact that the browser has to do more work when manipulating the DOM via Javascript, just think about which is going take longer to download:

30 Characters:

<div>Blah Blah Blah Blah</div>

or 50+ Characters (too lazy to count):

<script>
    document.getElementById("blah").innerHTML = "Blah Blah Blah Blah";
</script>

So by going the JavaScript route you're both downloading more content from the server and asking the browser to do more work to render the page.

Answer 2

As the others have said, pure HTML will be faster to load. However, depending on what you are actually trying to accomplish the decision/answer could be a little trickier.

For instance, you could have just a basic html skeleton with a content placeholder that then loads the actual data via an ajax call. Since the initial rendering will happen very quickly the user perception would be that the site loaded very quickly. The actual/overall time will be longer but since the bast site renders quickly the tradeoff could be worth it.