Is there any difference in following javascript snippets?

Question

Is there any difference in both of these snippets:

Writing this snippet at the end of HTML // where should we write the script anyways, is it inside body tag or just after body tag.

<script type="text/javascript">
insertNavigation(); // any arbitrary method
</script>

Or writing this snippet at the end of HTML

<script type="text/javascript">
if (window.addEventListener){   
    window.addEventListener('load', insertNavigation, false); 
} else if (window.attachEvent){ 
    window.attachEvent('onload', insertNavigation ); 
}
</script>

will the output of both snippets be same? If yes, then which approach is supposed to follow. If no, then how?

Answer 1

there is a major difference, code inserted in a <script> tag would block the browser rendering until the code is executed, while using load even the browser would render everything and execute your code which is far better IMHO.

Also using the first method you are not if all the DOM elements you need would be accessible, with load method you are sure you can manipulate the DOM safely.

In term of building non intrusive javascript the second method is better since it would work from any place and the script should rely on id and such to insert some content.

Answer 2

Is there any difference?

If it's placed at the very end of your document, then in most cases, they'll be the same. The problem with the first method is that it is run as soon as it is encountered and the document waits for it to complete.

Where should scripts be placed?

The general recommendation is that they are placed at the end of the document, inside the body. The spec doesn't allow for anything except head and body to be directly inside the html tag.

The reason for this recommendation is that since almost all your javascript is going to be run after the document has finished loading, there's no point loading until the very end. If you put it at the start of your document, in the head, then the browser has to download all your scripts before it even gets to the content, meaning the user has to sit looking at a blank page for slightly longer.

Recommendations:

If you're using any of the common javascript toolkits/libraries around these days, they'll often have their own construct for specifying some code to run once the page is ready. In jQuery for example, it's this:

$(function() {  /* code here */ });

Also, good use of javascript packing/minification, caching and gzipping on the server-side will minimise the negatives of putting the scripts up in the head where they are usually placed. Still, it doesn't hurt to chuck it at the end.