Can you please tell me what is defer and async attribute
Hi, welcome to the forums.
Broadly, however their usage is as follows.
As a result, when it gets to a line like
<script src="./js/mysupercomplexprogram.js">, it will wait for the entire JS file to load before moving to the next line.
By changing the tag to
async is slightly different to
defer tells the browser to continue loading the rest of the page, and then come back and load this script, with
A real-world analogy could be… making a cake. The overall process of making the cake is the same as the browser parsing your HTML page - there are many steps, which you complete sequentially to get the end result of the cake.
You start making the cake by making the cake batter, put it in the tin, then into the oven… then, whilst it’s in the oven, you go and start making the frosting. You don’t wait for the cake to be baked and cooled before doing this, so you’re still “baking the cake” - the process of “make the frosting” is being done asynchronously while the cake is baking so that you don’t have to wait to eat the cake later.
Once the cake is baked, and has had time to cool, you can come back to it and decorate it. This is when you can add the frosting you made earlier, and any other accoutrements (like sprinkles). Decorating the cake is a deferred action - you’ve gone back to do it after every other part of making the cake is finished.
The overall process of baking the cake is the same as your browser parsing the HTML document,
making the frosting is the
async operation, akin to the browser loading a script with that attribute,
and when everything else is done, we go back to the bits we had to
defer right at the end.
Hope that helps.