The placement of the <script> tag in an HTML document

March 22, 2024 11:47 PM

JavaScript

The placement of the <script> tag in an HTML document can affect how the page loads and displays to the user.

<script> in the <head>: When a <script> tag is placed in the <head> of your HTML document, it will be executed as soon as it is encountered by the browser while parsing the HTML document. If the script is large or if it's fetched from a slow network, it can block the rendering of the page and make the website appear slow to the user. This is why it's generally recommended to avoid placing <script> tags in the <head> unless they're needed for initial page setup or if they're small and fast to load.
```
<head>
  <script src="script.js"></script>
</head>
```
<script> at the end of the <body>: When a <script> tag is placed right before the closing </body> tag, it won't block rendering of the page because by the time the script is executed, the HTML document has already been parsed. This is a common practice to improve perceived page load performance.
```
<body>
  
  <script src="script.js"></script>
</body>
```

However, with the introduction of the async and defer attributes, you can control when your scripts are fetched and executed, making it less critical where in your document you place your <script> tags. For example, a script with the async or defer attribute can be placed in the <head> without blocking rendering, because these attributes tell the browser to fetch the script without blocking the HTML parser.

Some scenarios where you might want to use async and defer

Using async:

When you add the async attribute to a script, the script is fetched asynchronously while the HTML document is being parsed. Once the script is ready, the HTML parser is paused, the script is executed, and then the HTML parser resumes. This means that the script can execute before the HTML document is fully parsed, and it doesn't guarantee that scripts will execute in the order they are specified.

Let's say you have a script that tracks user behavior for analytics. This script doesn't depend on any other scripts or on the DOM being fully parsed. It can run as soon as it's ready, and it doesn't matter when it runs relative to other scripts. This is a good candidate for async.

<script async src="analytics.js"></script>

Using defer:

When you add the defer attribute to a script, the script is fetched asynchronously while the HTML document is being parsed, just like async. However, defer scripts are not executed until after the HTML document is fully parsed. This means that defer scripts won't block the rendering of the page and will execute in the order they are specified.

Now, imagine you have a script that needs to manipulate the DOM, like a script that creates a carousel or a modal. This script needs to wait until the DOM is fully parsed before it can run. It might also depend on another script, like a jQuery plugin. This is a good candidate for defer.

<script defer src="jquery.js"></script>
<script defer src="carousel.js"></script>

In this example, both scripts are fetched while the HTML is parsing, but they don't run until after the HTML is fully parsed. And because defer scripts maintain their order, we can be sure that jquery.js will execute before carousel.js.

async and defer are only useful for scripts that are fetched over the network. If your script is inline (i.e., not in an external file), it will run immediately, regardless of whether async or defer is specified.

If neither async nor defer is present, the script is fetched and executed immediately, blocking the parsing of the HTML document until the script is done.

In general, you should use async if your script is independent and doesn't rely on any other scripts, and defer if your script relies on the DOM being fully available or on other scripts.

The placement of the <script> tag in an HTML document

Comments

Read next