I noticed the starter webpage project on Glitch had this in the <head> section:
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
I was surprised to see a <script> tag in the <head> section, since I thought the best practice was to put these before </body>. That couldn't be right...the Glitch devs seem to care about things like this. Then I saw the defer attribute.
MDN says about defer:
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.
Flavio Copes has a nice writeup on defer and async. My key takeaways:
-
deferonly works in theheadsection. - With
deferthe browser fetches the script in parallel with parsing the HTML. Even if the browser finishes fetching the script, it doesn't run it until it's done HTML parsing. - Use
defernotasyncbecause parsing ideally should complete before script execution. - The best practice is what Glitch does, shown above. Put
<script src="..." defer>in<head>.
Do you agree with this best practice?
Top comments (0)