Web Development Basics: Async vs. Defer For JavaScript Loading

JavaScript LoadingWe want our websites to load as quickly as possible, but at the same time we need JavaScript to add nifty features. That’s a problem because of the way that browsers handle the loading of external scripts. Loading of JavaScript can be both parser blocking and resource blocking (although the latter is less of an issue on modern browsers).

Imagine you’re a web browser: you fetch an HTML file from the server and begin to read it. After a few lines you come across a <script> tags that tells you to download a JavaScript file, so you go off to the server indicated in the link and downloaded it. While you’re doing that you stop doing anything else at all. You wait until the JavaScript is completely downloaded before doing anything else. Once you’ve downloaded the script, you execute it. Only then do you get on with parsing and rendering the rest of the page.

For a page with a few <script> tags that cause external files to be loaded and executed, there can be significant delays in site load times. That’s why if you run your site through Google’s PageSpeed Insights, it will complain about render-blocking JS.

Javascript and CSS

One way of dealing with blocking JS is to move <script> content out of the page’s <head> section and put it at the end of the page. If we do that, JS won’t block the rendering of most the page, but it’s not a very good solution: the page will still freeze while the JS loads, although at least the user will have something to look at in the meantime.

Because JavaScript can modify the DOM, there’s no very good solution to loading it without causing delays, but there are a couple of things we can do to make the experience somewhat better than simply moving it to the bottom of the page.

Aync

By adding the Async attribute to <script> tags, you instruct the browser to go about things a little differently and load scripts asynchronously.

Once again imagine you’re a browser that comes across a <script> tag that loads an external file, only this one has the “async” attribute. This time, while you are downloading the file, instead of stopping dead in your tracks, you continue to parse the HTML. When you have the JS downloaded, you stop parsing the page and execute it.

Async minimizes the delay caused by JS loading, but allows it to execute as it normally would.

Defer

Defer goes a bit further than async. With the defer tag, when you (the browser) reach a <script> tag, you download it immediately but asynchronously while you continue parsing the page, just like with the async tag. But, you don’t execute it immediately; you wait until you have finished parsing the page, and then execute all the JavaScript that had a defer tag in the order that it appeared in the page.

Which should you use

You should almost always use the “async” attribute, unless the script in question depends on another script or another script depends upon it. With “async” you can’t be sure when exactly the script will be executed because loading times are not predictable: “defer” allows you to make sure that the scripts always execute in the same order.

You should also keep in mind that “defer” support is spotty among older browsers, so if you have to support a creaky version of IE, it’s best avoided.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.

GET STARTED
  • Thanks for this better explanation. Another approach is putting the script in the footer location. That can help much more in page loading speed.


    Regards,
    Sourav Basak [Blogger, Entrepreneur, Thinker]
    http://www.namasteui.com