Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
Post History
Placing <script> in the <head>: Placing <script> in the <head> might affect the performance since the content won't load until the browser complete downloading the JavaScri...
Answer
#1: Initial revision
by
Kevin M. Mansour
·
2021-07-26T18:36:13Z (over 3 years ago)
## Placing `<script>` in the `<head>`:
Placing `<script>` in the `<head>` might affect the performance since the content won't load until the browser complete downloading the JavaScript files that placed in the `<head>` while also might produce a blank white screen for 4 Or 5 seconds Or maybe more (depends on the size of the JavaScript files that placed in the `<head>`) on load since the browser didn't complete downloading the JavaScript files which may not be a good user experience.
### 1. Document Object Model (DOM)
It is not recommended to place `<script>` in the `<head>` that will change or affect the layout, since the JavaScript might broke since the content isn't loaded yet which means methods like `document.getElementById();` will return `null` if the element isn't loaded yet.
#### 1. Minimal Fix
Since the content may not be loaded if you placed the `<script>` in the `<head>`, you may have to use
[`onload`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body#attr-onload) attribute on the `<body>`, as below:
```js
<body onload="myFunction();">
<h1>Hello World!</h1>
</body>
```
But it is not very good practise to use inline attributes, so I would highly recommended to create `eventListener` for
[`DOMContentLoaded`](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event), as below:
```js
document.addEventListener("DOMContentLoaded", function() {
// DOM Content Loaded.
console.log("Yay!");
});
```
#### 2. Modern
Since most of modern browsers support [`async`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async) attribute
and [`defer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer) attribute, so it would be better to use it.
##### 1. `async`
The script will be executed asynchronously as soon as it is available.
Example:
```js
<script src="test.js" async></script>
```
##### 2. `defer`
The script is executed when the page has finished loading.
**Note:**
The `defer` attribute is for the external scripts only.
Example:
```js
<script src="test.js" defer></script>
```
**Side note:**
Loading the JavaScript files externally is better for many reasons, e.g it will be cached by browsers which will speed up page load times.
## Placing `<script>` in the `<body>`:
Placing `<script>` in the `<body>` will not cause any performance problems and you will avoid many problems, the browser will load the content of the page, then the browser will start downloading JavaScript files.
## Summarize
- Place Library Scripts, e.g jQuery Library Or Bootstrap JS Library in the `<head>`.
- Place Scripts that will change Or affect the layout in the `<body>`.
- Loading the JavaScript files externally is better.
- It is not recommended to use Inline HTML attributes, e.g `<body onload="myFunction();">`.