<script src> tag in the
<head> <script src="app.js"></script> </head>
The reason is that a
<script src> tag will pause the DOM parser until the script has loaded and executed. This will delay the browser's
A much better default is to load your scripts with a
<script src defer> tag:
<head> <script src="app.js" defer></script> </head>
A deferred script has many useful properties:
- It does not block the browser from rendering content.
- Deferred scripts will run after the HTML was parsed. That means you can query the entire DOM tree with
- Deferred scripts will run before the
DOMContentLoadedevent. That means if your code waits to initialize until
DOMContentLoaded(many libraries do), it will still work.
- If you have multiple deferred scripts, they will run in the order they appear in the HTML, regardless of how long individual scripts take to load.
- You can put your
<head>, meaning browsers can start loading the script file very early.