What would be the answer for this?
<script async src="s1.js"/> //loads in 300ms
<script defer src="s2.js"> //loads in 200ms
<script defer src="s3.js"/> //loads in 300ms
<script async src="s4.js"> //loads in 50ms
<script async defer src="s5.js"/> //loads in 60ms
Before getting to know the answer, Let's understand render blocking.
Render Blocking
In JavaScript, render blocking typically refers to the situation where the browser's rendering of a web page is paused because it's waiting for a JavaScript file to be downloaded, parsed, and executed before continuing to render the page.
This makes web page loading slow if not managed properly. This can be handled correctly by using asynchronous techniques like defer and async attributes.
Defer & Async
If the <script/> tag has "async" attribute like this <script async .../> then the HTML execution won't be stopped immediately, Browser will start downloading scripts parallelly parsing the HMTL and as soon as the script downloaded, it stops the execution of parsing and load script.
If the <script/> tag has "defer" attribute like this <script defer.../> then the HTML execution won't be stopped, Browser will start downloading scripts parallelly parsing the HMTL and as soon as the parsing completes, it loads the scripts.
In summary, both async and defer allow scripts to be fetched asynchronously, but async scripts are executed as soon as they're downloaded, potentially out of order, while defer scripts are executed in order after the HTML document has been fully parsed. Choose the one that best suits your specific requirements for script execution and dependencies.
What if I use async and defer both?
if you use both attributes like this, <script async defer src="s5.js"/> //loads in 60ms
then async takes precedence.
Answer to the question
<script async src="s4.js"> //loads in 50ms
<script async defer src="s5.js"/> //loads in 60ms
//loads in 300ms
Defer s2,s3 will be the last one as when parsing completes, they loads.
s4,s5 are pretty fast so they will be loaded first.
s1 will be the last one.