Async, Defer and Dynamic Scripts
Exploring async, defer and dynamic script types.
Nowadays scripts can be heavier than HTML and their download size is larger, and processing time is longer too.
When the browser loads HTML and comes across a <script>...</script> tag, it can’t continue building the DOM. It must execute the script right now. The same happens for external scripts <script src="..."></script>: the browser must wait until the script downloads, execute it, and only after process the rest of the page.
But there can be some important issues such as:
- Scripts can’t see DOM elements below them
- If there’s a bulky script at the top of the page, it “blocks the page”. Users can’t see the page content till it downloads and runs.
We can solve this issue with placing script at the end (after html), but that solution will force the script to load after html loads. For long HTML documents, that may be a noticeable delay if people have slow internet.
Luckily, there are two <script> attributes that solve the problem for us: defer and async.
Defer
With defer attribute browser loads script in ‘background’ mode and runs it when it loads.
So defer mode prevents blocking the page and scripts with defer always execute when the DOM is ready, but before DOMContentLoaded event.
The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
Deferred scripts keep their relative order, just like regular scripts. So, if we have a long script first, and then a smaller one, then the latter one waits.
But the defer attribute is ignored if the <script> tag has no src.
Async
The async attribute means that it helps script to load in ‘independent’ mode.
The browser loads pages without waiting for async scripts to load. DOMContentLoaded and async scripts don’t wait for each other (“load-first” order).
Other scripts don’t wait for async scripts, and async scripts don’t wait for them. Async mode (like defer mode) doesn’t block the page.
Async scripts are great when we integrate an independent third-party script into the page: counters, ads, analytic tools and so on, as they don’t depend on our scripts, and our scripts shouldn’t wait for them.
Dynamic
We can also add a script dynamically using JavaScript:
The script starts loading as soon as it’s appended to the document and behaves as “async” scripts by default.
It means:
- They don’t wait for anything, nothing waits for them.
- The script that loads first — runs first (“load-first” order).
But we can turn off async mode for dynamic scripts by setting script.async = false before appending it to html.
Summary
Both async and defer have one common thing: downloading of such scripts doesn’t block page rendering. So the user can read page content and get acquainted with the page immediately.
Thank you for reading. I hope you liked it 😎
