When should we use async, defer, or normal JS execution?

JavaScript is considered a “parser blocking resource”. This means that the parsing of the HTML document itself is blocked by JavaScript. When the parser reaches a <script> tag, whether that be internal or external, it stops to fetch (if it is external) and run it.

Where is the <script> element located?

Is the script self-contained?

Does the script rely on a fully parsed DOM?

Is the script a (small) dependency?

Developer with 3 yrs of industrial experience in developing scalable web applications.