{"id":3230,"date":"2024-05-07T15:44:55","date_gmt":"2024-05-07T13:44:55","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=3230"},"modified":"2024-05-07T15:56:46","modified_gmt":"2024-05-07T13:56:46","slug":"scripts-attributes-async-vs-defer-optimize-our-javascript-loading","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2024\/05\/07\/scripts-attributes-async-vs-defer-optimize-our-javascript-loading\/","title":{"rendered":"Scripts attributes : async VS defer"},"content":{"rendered":"\n
When it comes to web development, the way we load and execute JavaScript can have a significant impact on the performance and user experience of our website.<\/p>\n\n\n\n
When the browser loads HTML and comes across a <script>...<\/script><\/code> tag, it can\u2019t continue building the DOM. It must execute the script right now. The same happens for external scripts <script src=\"...\"><\/script><\/code>: the browser must wait for the script to download, execute the downloaded script, and only then can it process the rest of the page.<\/p>\n\n\n\n
That leads to two important issues:<\/p>\n\n\n\n
Scripts can\u2019t see DOM elements below them, so they can\u2019t add handlers etc.<\/em><\/li>
If there\u2019s a bulky script at the top of the page, it \u201cblocks the page\u201d. Users can\u2019t see the page content till it downloads and runs:<\/em><\/li><\/ol>\n\n\n\n
<p>...content before script...<\/p>\n\n<script src=\"https:\/\/javascript.info\/article\/script-async-defer\/long.js?speed=1\"><\/script>\n\n<!-- This isn't visible until the script loads -->\n<p>...content after script...<\/p><\/code><\/pre>\n\n\n\n
There are some workarounds to that. For instance, we can put a script at the bottom of the page. Then it can see elements above it, and it doesn\u2019t block the page content from showing:<\/p>\n\n\n\n
<body>\n ...all content is above the script...\n\n <script src=\"https:\/\/javascript.info\/article\/script-async-defer\/long.js?speed=1\"><\/script>\n<\/body><\/code><\/pre>\n\n\n\n
PS:<\/span><\/strong> But this solution is far from perfect. For example, the browser notices the script (and can start downloading it) only after it downloaded the full HTML document. For long HTML documents, that may be a noticeable delay.<\/span><\/strong><\/em><\/p>\n\n\n\n
In other words:<\/p>\n\n\n\n
Such things are invisible for people using very fast connections, but many people in the world still have slow internet speeds and use a far-from-perfect mobile internet connection.<\/p>\n\n\n\n
This is where script attributes come into play, and in this article, we’ll dive into the world of async <\/em><\/strong>and defer<\/em><\/strong>, two powerful tools to optimize our JavaScript loading.<\/p>\n\n\n\n
PS:<\/strong> async and defer are HTML attributes that we can apply to our tags to control how the browser handles the loading and execution of our JavaScript files.<\/em><\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
<\/div>\n\n\n\n
defer<\/h4>\n\n\n\n
The defer<\/code> attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script loads \u201cin the background\u201d, and then runs when the DOM is fully built.<\/p>\n\n\n\n
Here\u2019s the same example as above, but with defer<\/code>:<\/p>\n\n\n\n
<p>...content before script...<\/p>\n\n<script defer src=\"https:\/\/javascript.info\/article\/script-async-defer\/long.js?speed=1\"><\/script>\n\n<!-- visible immediately -->\n<p>...content after script...<\/p><\/code><\/pre>\n\n\n\n
Scripts with defer<\/code> never block the page.<\/li>
Scripts with defer<\/code> always execute when the DOM is ready (but before DOMContentLoaded<\/code> event).<\/li><\/ul>\n\n\n\n
The following example demonstrates the second part:<\/p>\n\n\n\n
<p>...content before scripts...<\/p>\n\n<script>\n document.addEventListener('DOMContentLoaded', () => alert(\"DOM ready after defer!\"));\n<\/script>\n\n<script defer src=\"https:\/\/javascript.info\/article\/script-async-defer\/long.js?speed=1\"><\/script>\n\n<p>...content after scripts...<\/p><\/code><\/pre>\n\n\n\n
The page content shows up immediately.<\/li>
DOMContentLoaded<\/code> event handler waits for the deferred script. It only triggers when the script is downloaded and executed.<\/li><\/ol>\n\n\n\n
The defer<\/strong> attribute tells the browser to load the script in parallel with the HTML parsing, but to execute the script only after the HTML parsing is complete. This ensures that the script is executed in the order they appear in the HTML<\/strong>, which is important for scripts that have dependencies on each other or on the DOM structure.<\/p>\n\n\n\n
Let\u2019s say, we have two deferred scripts: the long.js<\/code> and then small.js<\/code>:<\/p>\n\n\n\n
Browsers scan the page for scripts and download them in parallel, to improve performance. So in the example above both scripts download in parallel. The small.js<\/code> probably finishes first.<\/p>\n\n\n\n
\u2026But the defer<\/code> attribute, besides telling the browser \u201cnot to block\u201d, ensures that the relative order is kept. So even though small.js<\/code> loads first, it still waits and runs after long.js<\/code> executes.<\/p>\n\n\n\n
This is useful for scripts that need to access the DOM or rely on other scripts being loaded first, such as our application’s main JavaScript file.<\/p>\n\n\n\n
<\/div>\n\n\n\n
async<\/h4>\n\n\n\n
The async<\/code> attribute is somewhat like defer<\/code>. It also makes the script non-blocking. But it has important differences in the behavior.<\/p>\n\n\n\n
The async attribute tells the browser to load the script asynchronously, meaning the script will be downloaded in parallel with the parsing of the HTML, and it will be executed as soon as it’s available, without blocking the HTML parsing<\/strong>.<\/p>\n\n\n\n
This is particularly useful for scripts that are independent of the initial page content and don’t need to wait for the DOM to be fully loaded, or any script that doesn’t have a direct dependency on the page’s content.<\/p>\n\n\n\n
In other words, async<\/code> scripts load in the background and run when ready. The DOM and other scripts don\u2019t wait for them, and they don\u2019t wait for anything.<\/p>\n\n\n\n
The browser doesn\u2019t block on async<\/code> scripts (like defer<\/code>).<\/li>
Other scripts don\u2019t wait for async<\/code> scripts, and async<\/code> scripts don\u2019t wait for them.<\/li>
DOMContentLoaded<\/code> and async scripts don\u2019t wait for each other:<\/li><\/ol>\n\n\n\n
Here\u2019s an example similar to what we\u2019ve seen with defer<\/code>: two scripts long.js<\/code> and small.js<\/code>, but now with async<\/code> instead of defer<\/code>.<\/p>\n\n\n\n
<p>...content before scripts...<\/p>\n\n<script>\n document.addEventListener('DOMContentLoaded', () => alert(\"DOM ready!\"));\n<\/script>\n\n<script async src=\"https:\/\/javascript.info\/article\/script-async-defer\/long.js\"><\/script>\n<script async src=\"https:\/\/javascript.info\/article\/script-async-defer\/small.js\"><\/script>\n\n<p>...content after scripts...<\/p><\/code><\/pre>\n\n\n\n
The page content shows up immediately: async<\/code> doesn\u2019t block it.<\/li>
DOMContentLoaded<\/code> may happen both before and after async<\/code>, no guarantees here.<\/li>
A smaller script small.js<\/code> goes second, but probably loads before long.js<\/code>, so small.js<\/code> runs first. Although, it might be that long.js<\/code> loads first, if cached, then it runs first. In other words, async scripts run in the \u201cload-first\u201d order.<\/li><\/ul>\n\n\n\n
Async scripts are great when we integrate an independent third-party script into the page: counters, ads and so on, as they don\u2019t depend on our scripts, and our scripts shouldn\u2019t wait for them:<\/p>\n\n\n\n
<!-- Google Analytics is usually added like this -->\n<script async src=\"https:\/\/google-analytics.com\/analytics.js\"><\/script><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
PS<\/strong>: <\/span>The defer<\/code>,async attributes are only for external scripts<\/strong>. The attribute are ignored if the <script><\/code> tag has no src<\/code>.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Dynamic scripts<\/h4>\n\n\n\n
There\u2019s one more important way of adding a script to the page.<\/p>\n\n\n\n
We can create a script and append it to the document dynamically using JavaScript:<\/p>\n\n\n\n
let script = document.createElement('script');\nscript.src = \"\/article\/script-async-defer\/long.js\";\ndocument.body.append(script); \/\/ (*)<\/code><\/pre>\n\n\n\n
The script starts loading as soon as it\u2019s appended to the document (*)<\/code>.<\/p>\n\n\n\n
Dynamic scripts behave as \u201casync\u201d by default.<\/strong><\/p>\n\n\n\n
This can be changed if we explicitly set script.async=false<\/code>. Then scripts will be executed in the document order, just like defer<\/code>.<\/p>\n\n\n\n
In this example, loadScript(src)<\/code> function adds a script and also sets async<\/code> to false<\/code>.<\/p>\n\n\n\n
So long.js<\/code> always runs first (as it\u2019s added first):<\/p>\n\n\n\n
function loadScript(src) {\n let script = document.createElement('script');\n script.src = src;\n script.async = false;\n document.body.append(script);\n}\n\n\/\/ long.js runs first because of async=false\nloadScript(\"\/article\/script-async-defer\/long.js\");\nloadScript(\"\/article\/script-async-defer\/small.js\");<\/code><\/pre>\n\n\n\n
Without script.async=false<\/code>, scripts would execute in default, load-first order (the small.js<\/code> probably first).<\/p>\n\n\n\n
![\"\"](\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2024\/05\/async-defer-1.png\")
<\/figure><\/div>\n\n\n\n<\/div>\n\n\n\n