The best place to put <script>
tag is before closing </body>
tag, so the downloading and executing it doesn't block the browser to parse the html in document,
Also loading the js files externally has it's own advantages like it will be cached by browsers and can speed up page load times, it separates the HTML and JavaScript code and help to manage the code base better.
but modern browsers also support some other optimal ways like async
and defer
to load external javascript
files.
Async and Defer
Normally HTML page execution starts line by line. When an external JavaScript element is encountered, HTML parsing is stopped until a JavaScript is download and ready for execution. This normal page execution can be changed using defer
and async
attribute.
Defer
When a defer attribute is used, JavaScript is downloaded parallelly with HTML parsing but will be execute only after full HTML parsing is done.
<script src="/local-js-path/myScript.js" defer></script>
Async
When async attribute is used, JavaScript is downloaded as soon as the script is encountered and after the download, it will be executed asynchronously (parallelly) along with HTML parsing.
<script src="/local-js-path/myScript.js" async></script>
When to use which attributes
- If your script is independent of other scripts and is modular, use
async
.
- If you are loading script1 and script2 with
async
, both will run
parallelly along with HTML parsing, as soon as they are downloaded
and available.
- If your script depends on another script then use
defer
for both:
- When script1 and script2 are loaded in that order with
defer
, then
script1 is guaranteed to execute first,
- Then script2 will execute after script1 is fully executed.
- Must do this if script2 depends on script1.
- If your script is small enough and is depended by another script
of type
async
then use your script with no attributes and place it
above all the async
scripts.
reference:knowledgehills.com