"JavaScript Placed At The End Of The Document So The Pages Load Faster" TRUE?
Solution 1:
There are a number of advantages
- There’s no need to have a check if the DOM is loaded, since by having the scripts at the end, you know for sure it is.
- A JavaScript script file has to be loaded completely before a web browser even begins on the next JavaScript file. The effect of this, if the JavaScript files are included at the top of the document, is that it will be a visual delay before the end user sees the actual page. This is completely avoided if you include the JavaScript files at the end of the document.
There are some limitations as well
While including the JavaScript files at the bottom helps us around the problem of delaying the page rendering, thus giving the impression that each page in the web site loads faster, it does have a drawback.
If the page is visible to the end user, but the JavaScript files haven’t finished loading yet, no events have been applied to the elements yet (because everyone uses an unobtrusive approach, right?) and the user might start clicking around and not getting the expected results.
If you have proper fallbacks, e.g. a link element which gets content via AJAX if JavaScript is supported and the proper event has been applied, otherwise it’s a normal link leading to another page, then the problem isn’t that bad. Still somewhat annoying, though.
Useful Article Here
Solution 2:
If the browser encounters a <script> tag, the HTMLRenderer will by default stop and the ECMAscript parser will do its job. The HTMLRenderer will not continue untill all the Javascript code was completely evalutated.
So, if you have many <script> tags and lots of Javascript code in your "upper" HTML code, a viewer of your site might realize a slow'ish loading process.
There are several ways to avoid this issues. The first is, as you mentioned, by just placing all the Javascript code and <script> tags at the very bottom of the <body> element. That ensures that at least all the HTML markup and Stylesheet definitions were fully loaded.
Another options are tag names for the <script> element itself. Such as async and defer will indicate to the Browser / JS Parser that this fill is not required to get loaded and evaluated immediately. For instance
<script async defer src="/foo/bar.js"></script>
The HTML Renderer will realize the tag and store it into a queue, but it will not directly stop and evaluate.
Solution 3:
Most browsers execute JavaScript and load the page using the same thread. Hence while JavaScript is executing the page cannot load. Thus if you page contains lots of images or embedded content these assets will not start loading until the JavaScript completes execution.
This is the reason it's advised to put long running synchronous code at the end of the document, or defer it to load when the page loads or the DOM content loads. However modern browsers usually notify the user about long running blocking scripts and allow them to terminate the script if desired.
Solution 4:
As important as placing them at the end of the page, is specifying them as async using the HTML5 async attribute. This will ensure that the parser does not stop and parse them but rather continues with the page loading flow and downloads/parses the JS in parallel.
Solution 5:
The logic behind that concept is that since the browser renders your code on the fly, by placing all the html elements before the scripts, it could theoretically load faster than if you had the scripts first, assuming you had an astronomical amount of scripts to deal with.
In practise however no one should ever encounter a situation that would require so much script time that it would affect the load time of a website over more pressing bottlenecks as D/L bandwidth.
Post a Comment for ""JavaScript Placed At The End Of The Document So The Pages Load Faster" TRUE?"