The async and defer attributes for script
The async and defer attributes for script
.png)
Two HTML attributes are used to modify the behavior of tags script and more particularly for the loading of JavaScript resources:
Async : load/execute scripts asynchronously. defer : defer execution until the end) of document loading.
They are often confused with yet different consequences.
At a time when performance is monitored more and more closely by indexing robots, and loading times scrutinized for the convenience of users, their use is welcome.
These attributes are recognized by all current modern browsers:
Firefox 3.6+, Chrome, Safari, from Internet Explorer 10 and soon Opera.
Including in mobile versions.
If an engine does not understand one or the other, this will not prove blocking for the interpretation of the document, the performances will simply remain “not optimized”.
Async and defer attributes, common effects The purpose of these two attributes, described in detail below, is mainly to load and launch the interpretation of JavaScript code without blocking HTML rendering (its display on the screen).
They generally concern only interpretations of codes located in external files (when the attribute srcis used) and come to relax the commonly accepted practice of placing – as far as possible – the tags script>
at the end of the document just before the closing of /body>.
The bottleneck This last recommendation comes from a behavior that browsers cannot avoid:
by default (and to simplify), any beacon script>encountered puts the HTML/CSS engine on hold because the browser does not know if the JavaScript code will contain instructions specific to execute immediately which could have a significant impact on… the HTML/CSS code itself, in particular with the document.write().
We will therefore have to make HTTP requests to the server for each external JavaScript file, wait for the responses, collect the code and execute it.
These actions often take several tens of milliseconds.
With several elements script>as we often see in the source code of web pages and applications, the slowdown in loading is multiplied by as much.
Raw example To examine the scenarios that may arise, let’s start with a standard page in which there are tags script>in the header, body and end of the document.
One of them uses a file script-lent.jswhich, as its name suggests, deliberately takes a little over a second to be delivered by the server.
In this case, we observe the following behavior:
On the network side:
Verdict
The first file (script-lent.js) slows down all the others, it takes more than a second to load and interpret.
The download of the other scripts starts at the same time.
But you still have to wait until script-lent.js is obtained for the document to be displayed (which corresponds to the blue vertical bar representing the event DOMContentLoaded)
Final delay before display: 1.25 seconds The stopwatch named Timing placed at the end of the content of the page measures a total time of 1.065 seconds, which means that its execution takes place after all the other tags script.
The defer attribute Prior to the HTML5 wave, the attribute defer already existed in “old” versions of Internet Explorer.
It means that the browser can load the script(s) in parallel , without stopping the rendering of the HTML page.
Unlike async, the execution order of the scripts is preserved, according to their appearance in the HTML source code.
It is also postponed until the end of the DOM parsing (before the event ).
Nowadays, this attribute is of less interest because browsers have by default internal techniques to download resources in parallel without necessarily waiting for others.DOMContentLoaded:
Let’s go back to the first code by adding the defer attribute.
Let’s go back to the first code by adding the defer attribute.
Example with defer
In this case, we observe the following behavior:
Verdict:
Little or no difference from the previous example, because the browser already loads the files in parallel.
You still have to wait for the execution of the first (script-lent.js) to see content appear on the page since the engine has a rule of keeping the order of execution according to the appearance of the tags script in the source code.
Final delay before display: 1.20 seconds On the other hand, the Timing chronometer is much shorter (a few ms), all the other script tags having been virtually moved after it, at the end of the document with defer, it therefore takes place before their interpretation.
The async attribute New to HTML5, asyncmeans that the script can be executed asynchronously , as soon as it is available (downloaded).
This also means that the browser will not wait to follow a particular order if several tags.
script are present, and will not block the loading of the rest of the resources, in particular the HTML page.
The execution will take place before the event loadlaunched on window and will only be valid for scripts external to the document, ie those whose attribute srcmentions the address.
This behavior is very practical to save loading time, it must however be used with caution:
if the order is not respected, a file executed asynchronously cannot wait for the loading of a previous one, for example s he uses functions or even a framework.
It will also not be necessary to count on calling document.write()
to write in the HTML document since it will be impossible to know when the actions will be triggered.
In summary, do not write this:
Let’s go back to the first test by adding the attribute.
Example with async:
Verdict
The display can occur as soon as the HTML code is received (see the blue vertical bar corresponding to the event DOMContentLoaded)
The download of the other scripts remains similar But the order is not preserved : each script is executed as soon as it is available, and script-lent.js is the last to occur.
Final delay before display: 0.16 seconds or 8 times less than before The stopwatch named Timing placed at the end of the page content is executed quickly, just after the HTML display, without waiting for other tags script Additional notes Depending on the nature of the scripts to be executed, the two attributes can be used together.
