JS placement

[sdo]

Hey All,

I'm wondering: is it slower to have your JS in external files as opposed to in the HEAD tag? Is it a "if you have a small amount of code put it in the HEAD, and larger amounts in external files" thing, or a "if you have lots of reusable code THEN put it in an external file" thing.

If there is no speed difference, is it best to have one giant JS file or many more specialized ones?

Thanks a lot for input on this, only experience will answer these questions.

SDO

[forum_amnesiac]

I can't comment on the "loading speed" issue but I tend to adopt a policy of -

1 - if the function is used in more than 1 page I use an external file, the reason for this is that if I want to change one of these functions then it is a "one-time" change rather than trawling through lots of pages to implement the change

2 - if the javascript is for a single page I leave it in that page.

Just my approach to this, I'm sure that others will give you their advice.

[davelf]

ya, i have the same problem to, i use a lot of javascript on my page, and that js used by another page too. All of the javascript that i use have each effect, i just want to know are that effect to the page loading speed.

Because my page gone slow when i debug it.

Is there another way too make the page loading speed better.

[codeexploiter]

1. Where exactly we need to place the JS has changed from time to time. Earlier everyone advised to put all the JS related stuff be it external script resources inclusion, inline script block, etc inside the 'Head' element. I think it was because at that time there were very few number JS based applications that uses heavy JavaScript code. But nowadays the scene is different as the developer focus more on JS based front-end development unlike earlier days and use big JS resources extensively. If you try to include big JS resources in the 'Head' element then the 'Body' element will not be loaded until all these JS resources loading is over. The result would be the user getting a blank screen (most of the case) for a random period of time, which is not very good. So the solution is to include the JS resources as the last part of the 'Body' element so that the page will be visible before the full page loading completes. Of course the user has to wait until the JS resources loads to execute the JS routines used in the page though. But the point is the user will be able to view the page content without much time delay.

The next two methods uses almost similar concept: Lazy loading for loading the JS resources.

2. The next option is loading only the necessary JS resources at the time of page loading and later loading the other JS resources as and when they are required. Using JS you'll be able to do it without much trouble. In this case you can make the initial page loading lot faster compared to the method in which you load all the JS in the page. In this case you can divide your JS code into different files and load them dynamically as and when the requirement arise.

3. Another option is to use lazy loading method for loading the JS resources parallely while loading the page or rather after the DOM loading completes. In this case also you'll be able to achieve the non-blocking page loading. Here is some links that describes this technique and code in detail:

Painless JavaScript lazy loading with LazyLoad
The best way to load external JavaScript
On-Demand JavaScript

Also here is another popular article from Yahoo! about Web page optimization

Hope this helps.