Table of Contents
Script tag placement
The <script> tag can be placed in both the <head> and <body> sections of an HTML document, and the location can affect how the script is executed.
Placing the Script in the Head
Traditionally, scripts were often placed in the <head> section. However, this can block the rendering of the page until the script is downloaded and executed, leading to slower page load times, especially if the script is large or the network is slow.
To avoid blocking, you can use the async or defer attributes:
- async: Downloads the script asynchronously and executes it as soon as it's available.
- defer: Downloads the script asynchronously but ensures that it's executed after the HTML has been parsed.
Example:
<head> <script src="myscript.js" defer></script> </head>
Placing the Script in the Body
Placing the <script> tag at the end of the <body> section has become a common practice to improve page loading performance. By placing the script at the end of the body, you ensure that the HTML content is loaded and displayed to the user before the script is downloaded and executed.
Example:
<body> <!-- HTML content here --> <script src="myscript.js"></script> </body>
This approach helps prevent the script from blocking the rendering of the page, similar to using the defer attribute in the <head>.
Async vs Defer
Both the async and defer attributes are used with the <script> tag to control how external JavaScript files are loaded and executed in an HTML document. They affect the loading behavior of scripts to help optimize page rendering, but they work slightly differently.
Async
- Download: The script is downloaded asynchronously, in parallel with the parsing of the HTML document.
- Execution: As soon as the script is downloaded, HTML parsing is paused, and the script is executed immediately.
- Order: Scripts with the async attribute are executed in the order in which they are downloaded, which may not be the same as the order in the HTML.
- Use Case: Use async when the script is independent of other scripts, and it does not matter when it's executed relative to other parts of the page.
Example:
<script async src="myscript.js"></script>
Defer
- Download: Like async, the script is downloaded asynchronously, in parallel with the HTML parsing.
- Execution: Unlike async, the script execution is deferred until after the HTML has been fully parsed.
- Order: Scripts with the defer attribute are executed in the order they appear in the HTML, maintaining dependencies between scripts.
- Use Case: Use defer when the script relies on the full DOM structure and should be executed after the HTML is fully parsed, or when the order of script execution matters.
Example:
<script defer src="myscript.js"></script>
Comparison
Use async when the script is completely independent, and it doesn't matter when it runs. Since it runs as soon as it's downloaded, it can interfere with page rendering if it's a large script or if there's a slow network.
Use defer when you need the script to run after the HTML is parsed, or when you have multiple scripts that need to be run in a specific order. Since it waits for the HTML to be parsed, it is often more user-friendly as it doesn't block rendering.
Conclusion
If the script must be executed as soon as possible, and you're using modern attributes like async or defer, placing it in the <head> is fine.
If the script doesn't need to run until the page's content is loaded, placing it at the end of the <body> can be a better choice to improve loading performance.