JavaScript file inclusion. Should I not link in <head>?

StackOverflow https://stackoverflow.com/questions/4442469

Question

I'm watching Douglas Crockfords "Theory of the DOM" and he mentioned that the location of my script tags can greatly affect the load time of my applications. Furthermore, he asserts that a script tag should be included as far towards the bottom of the document body as possible.

Is this accurate?

OR

Is this video out of date? (which he actually sites as a reason he didn't lecture on the DOM sooner).

Was it helpful?

Solution

Google agrees with Crockford:

Yahoo! as well:

And other SO users agree as well:

OTHER TIPS

Files included in the header are loaded before the rest of the page even begins loading. It's recommended that you load non-essential files as close to the bottom of the page as possible so the rest of the page can be loaded beforehand.

There are some JS libraries (such as LABjs) that you can load in the header instead. They then allow you to load all of your other JS assets asynchronously and provide a callback so the rest of your code can execute when you know your JS assets have been loaded.

You can also use http://labjs.com/ .

As stated in the project's page:

LABjs (Loading And Blocking JavaScript) is an open-source (MIT license) project supported by Getify Solutions. The core purpose of LABjs is to be an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time. Loading your scripts with LABjs reduces resource blocking during page-load, which is an easy and effective way to optimize your site's performance.

LABjs by default will load (and execute) all scripts in parallel as fast as the browser will allow. However, you can easily specify which scripts have execution order dependencies and LABjs will ensure proper execution order. This makes LABjs safe to use for virtually any JavaScript resource, whether you control/host it or not, and whether it is standalone or part of a larger dependency tree of resources.

Using LABjs will replace all that ugly " tag soup" -- that is all the tags that commonly appear in the or end of the of your HTML page. The API is expressive and chaining, to let you specify which scripts to load, and when to wait ("block"), if necessary, for execution before proceeding with further execution. The API also easily allows inline code execution coupling (think: inline tags).

LABjs is now privileged to benefit from collaboration with Steve Souders, and is aiming to be the single best solution for optimized, flexible, general script loading available.

I too have heard that JavaScript should be included at the end of the page to "hopefully" ensure the DOM has loaded. I believe I read this in the Yahoo documentation a while back.

Well, it's correct. Unless you use something like 'head.js' which loads you javascript files in parallel. Oh, and, some scripts have to be before the content. For example, the html5-shiv script.

http://headjs.com/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top