Earlier while rendering HTML when browser finds script tag it stops everything else and load the script and execute it first then only proceed.
This was the fact now lets talk about it further.
HTML 4 specifies that script may be present in
<body> tag in html and can comes any number of times. Traditionally
<script> tags are know for leading external JS and
<link> tags for loading CSS.
The theory was that it’s best to load them first so that the page will come in looking and behaving correctly.
Browser doesn’t start rendering anything until it finds the body tag.
<script> is in
<head> tag. It makes the page unresponsive until the all the JS files are loaded and executed. Which in turn increases the first response time which is very important in terms or UX.
<script> tag will now not stop other
<script> tags from downloading external resources.
<script> tags stop other resources like images and css to download. This is again a holdback for the solution that browsers provided by providing parallel downloads. Script blocking still remains a problem.
For solving this, simply we have to load the Script resources as late as possible or say closest to the bottom. With this
<script> tag will be encountered at last and everything else will be loaded already and now we can load external script resources in parallel.
This is the recommended position to put the script tag so that
<link> tag resources will be loaded in parallel and then
<script> resources are loaded in parallel.
As we know now that every time
<script> tag is encountered, everything will stop and download of script resource and its execution will happen. So keeping less number of Script tag saves the time as it has less download time. In this case downloading 4 small files(1kb) will take more time than downloading 1 big (4kb), off-course the size is same of small one and the big one.
Thus you can improve the performance of website by concatenating many script resources in one and thus save the download time and execution by using simple
Yahoo! created the combo handler for use in distributing the Yahoo! User Interface (YUI) library files through their Content Delivery Network (CDN). Any website can pull in any number of YUI files by using a combo-handled URL and specifying the files to include. For example, this URL includes two files: http://yui.yahooapis.com/combo ?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js.
Non Blocking Scripts
HTML4 has an attribute called defer. Though it is not supported by all the browsers. What it does is it indicates that the script contained within the element is not going to modify the DOM and therefore execution can be safely deferred until a later point in time. If you are working with Internet Explorer 4+ and Firefox 3.5+ you can make use of this attribute. Use it like this
Dynamic Script Element
The file begins downloading as soon as the element is added to the page. The important thing about this technique is that the file is downloaded and executed without blocking other page processes, regardless of where the download is initiated.
XMLHTTPREQUEST script injection
Through this we request for the given file and load it first and then add it to the element.
We must always try to load JS at the end as it will not hinder the loading of other resources and made the page more responsive. Minimize the script tags and write them where they require of do the dynamic loading. Its all up to you how you tame the monster.
For more such articles subscribe