CODEWITHSUNDEEP
javascripthtmladdeventlistener
Tomasz
Tomasz

Reputation: 1368

Is window.addEventListener("load",function() faster than <script> placed on bottom of page?

I have a simple Javascript function that can be placed anywhere within HTML document. So I put it right below the closing , for example:

<html>
<body>
Some text.
<script>
document.getElementsByTagName('body')[0].innerHTML='hello';
</script>
</body>
</html>

My question is - would it make sense (from page load speed point of view) to load this script via the addEventListener("load") function instead? Ie. if I use this code below - which would be preferred? I understand that when Javascript is on the bottom of the page, it won't 'block' page rendering anyway, so using the addEventListener may only slow the execution down?

<html>
<body>
Some text.
<script>
window.addEventListener("load",function()
{document.getElementsByTagName('body')[0].innerHTML='hello';},
false);
</script>
</body>
</html>

Upvotes: 0

Views: 1869

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 371049

Scripts should generally not be placed directly in the HTML like that, because they block further HTML parsing until they're executed. While it's not a problem if you have only one script, what if you have two, or three, or more, and some of them might take more than a handful of ms to parse?

Still, assuming that blocking isn't an issue, there's no real difference on way or the other, from the UX point of view.

Scripts, being information about how to interact with the content, but aren't actually content themselves, belong in the <head> IMO. If you don't like wrapping everything in a load listener, you can use the defer attribute to automatically run the script once the whole HTML has been parsed: <script src="..." defer>.

Upvotes: 2

Related Questions