defer vs async keyword in script tags

Hello, quick question, I know that both defer and async will load our external javascript file at the same time as our HTML parser is working. The difference is that defer will only be "triggered" after the HTML parser has been completed. On the other hand, the async keyword would mean that "run the external file whether or not the HTML parser has completed". I always make use of the defer keyword, so I wanted to know some use cases where async is used, any idea please.
5 Replies
ἔρως
ἔρως3mo ago
it seems that it is great for modules, so they are done being parsed faster
13eck
13eck3mo ago
async scripts run as soon as they load, DOM tree be damned. So if you’re referencing specific elements you defer the script. So as an example, a script that creates custom elements are querySelectoring so you can async that.
Faker
FakerOP3mo ago
yeah I see we can think of async script as creating kind of side effects but not modifying the DOM?
13eck
13eck3mo ago
That’s pretty much how I see it, yes
Faker
FakerOP3mo ago
noted, ty !

Did you find this page helpful?