My Profile Photo

Sheogorath's Blog

The science of loading JavaScript

• on

The current web without JavaScript? Sounds impossible. JavaScript allows web designers to create everything. From a simple form which validates data before sending, over cool element effects, to full programs and games written in JavaScript running in nearly every browser and every platform.

JavaScript is such a powerful tool but if you use it wrong it could be a weakness. It can kill the user experience of your website just because it takes too long to load and initialize it.

Why the place of <script>-tags is important

The section where you place your scripts is important because loading and execute JavaScript blocks your browser and stops rendering.

This happens because your included script files may uses document.write() statements. Those alters the DOM which can change the behaviour how your web page is parsed, rendered and displayed.

Nowadays nearly no included JavaScript file uses those statements but the parser has to expect it. You see the problem.

What is the right place for your <script>-tags now?

JavaScript in <head>-tag

The classical place to include your JavaScript files. All Scripts in pure <script> tags placed in here are loaded before any content of your web page is shown.

The HTML parser reads the header from top to down, downloads, compiles and renders the content in that order. So if you use libraries in your <body> or another JavaScript file you have to place it after the library.

<script type="text/javascript" src="myscript1.js"></script>
<script type="text/javascript" src="myscript2.js"></script>

The files myscript1.js and myscript2.js are loaded and executed sequential, before any further content is parsed. myscript2.js runs after myscript1.js

JavaScript at the top of <body>-tag

Putting your <script>-tags at the top of body is really pointless. They are loaded just like the script files in the head.

You should never do this.

JavaScript at the bottom of <body>-tag

It is a good idea to place scripts at the bottom of the <body> element.

This can improve page load, because script compilation can slow down the display.

— W3Schools

It’s nearly of the best places to load your JavaScript files if they’re not important for your content. So if you use JavaScript for placing the menu on your website or animate some content that’s the place where you want to load your JavaScript code.

If you use JavaScript to load the main content it’s may not the best place.

Load JavaScript with JavaScript

The most hateful hack to load JavaScript asynchronous. You just take a JavaScript files which loads all your real JavaScript files. This way the HTML parser continues rendering and your JavaScript files are loaded at same time.

<script>
function lazyLoadScript(file){
    var fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript")
    fileref.setAttribute("src", file)
    document.getElementsByTagName("body")[0].appendChild(fileref)
}
lazyLoadScript("myscript1.js")
lazyLoadScript("myscript2.js")
</script>

The files myscript1.js and myscript2.js are loaded and executed parallelly. myscript2.js may runs before myscript1.js

For all of you guys using NoScript it’s the most painful job to allow scripts from A and after reloading the page they have to allow scripts from B,C,D,E and so on.

Nobody likes that. Please don’t use that method.

Modern web browsers and JavaScript

JavaScript as one of the most important parts of the modern or “edge” web has got some more powerful improvements with HTML5.

Asynchronous loading of JavaScript

You can now use the async-option in <script>-tag. It’s really powerful because your browser now continues rendering the website and loads, compiles and executes the JavaScript files you included parallel.

But notice that this means your JavaScript library is may loaded after your JavaScript file using it. Result: Error!

<script type="text/javascript" src="myscript1.js" async></script>
<script type="text/javascript" src="myscript2.js" async></script>

The files myscript1.js and myscript2.js are loaded and executed as soon as possible. It’s possible that myscript2.js runs before myscript1.js

Sequential loading of JavaScript

Already known in HTML 4.0 was the defer-option. It downloads all Scripts with those tags while your browser is rendering and executes them in sequence after the HTML parser has finished parsing the whole site. So it’s the modern solution of loading JavaScript at the end of the <body>-tag.

This also solves the dependency issue for libraries.

<script type="text/javascript" src="myscript1.js" defer></script>
<script type="text/javascript" src="myscript2.js" defer></script>

The files myscript1.js and myscript2.js are loaded while the page content is parsed and executed after parsing as ended. myscript2.js runs after myscript1.js

Tuning your web page

You know now how to include your JavaScript in a powerful way. But you can still improve it. Here are some rules you should keep in mind:

  1. Try to include as less JavaScript as possible -> Every request has overhead
  2. Use minified versions of all libraries -> spaces are nice for humans not for browsers
  3. if you only need parts of a library think about write it your own

That’s all important. But to really boost it up:

Use optimized JavaScript

There are many solutions like grunt, gulp and Feri.

They all do one thing: They render all libraries and your scripts into a single file, optimize and minimize them. So in the end you have a really own solution which fits your website.

Conclusion

JavaScript is an important part of modern web and HTML5 allows you to load your scripts faster than any other solution before.

  1. Try to use async in your script tags and avoid placing JavaScript without async or defer in your <head>-tag
  2. Use as less includes as you can because every loading process takes time and overhead.
  3. Build an individual JavaScript file for your web page

Some more informations about loading JavaScript:

Not every browser supports every option, but most do. See more: