Last updated on October 6th, 2015 at 11:59 am
Asynchronous and Deferred… What?
- Parser is basically your HTML in its loading state
- Net is the time that your script is being loaded to life
- Execution is the time that your script is brought to life in your user’s browser
Basically the normal behavior of a website is to pause the HTML parsing while the scripts are executing. If your website is anything like mine, it means that there will be a significant delay before users will be able to see your HTML (your website’s main code, design, content, etc.). Here’s how a normal script load looks like:
Deferring your script is simply letting all your HTML load on your user’s browser first before executing your scripts. The good thing about it is that your website will immediately appear on your user’s web browser – making it seem like your load speed is blazing fast. My advise is to use deferred in case some of your users don’t use browsers that support asynchronous script loading. Here’s how a deferred script will look like:
Asynchronous loading of scripts is the best choice. HTML parsing and loading of your scripts will go on but your scripts will only execute when it’s ready. Taking up the least amount of load speed. However not all browsers support asynchronous script loading. Here’s how asynchronous loading looks like:
My advise of course is to optimize your scripts as both deferred and asynchronous. This is possible as stated in: W3C Editor’s Draft (HTML 5.1 nightly)
There are three possible modes that can be selected using these attributes. If the
asyncattribute is present, then the script will be executed asynchronously, as soon as it is available. If the
asyncattribute is not present but the
deferattribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.
Where do I Start?
Tell me how it works for you and if you encounter any problems!