DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Ε ime Vidas
Ε ime Vidas

Posted on

The β€œscript async” attribute may not be the best option for non-critical scripts

Adding either the async or defer attribute to a <script> element results in the external script being fetched in parallel to parsing. The difference between these two attributes only manifests once the script has finished loading: A script with the async attribute interrupts the parser while a script with the defer attribute waits for the page to finish parsing.

Async scripts interrupt the parser, while deferred scripts wait for the page to finish parsing

A web page may not want to interrupt the parser for scripts that generate non-critical content (e.g., ads). The article β€œJavaScript Loading Priorities in Chrome” suggests using <script> for critical scripts and <script defer> for non-critical scripts.

Be careful when considering <script async>. Today it is often used to indicate non-critical scripts, but is inconsistent in being loaded at low priority and executed at high priority.


This content was originally published on https://webplatform.news.

Top comments (0)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post