Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

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

77%
+5 −0
Q&A What's the difference between placing <script> in the <head> and placing in the <body>?

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...

posted 2y ago by Kevin M. Mansour‭

Answer
#1: Initial revision by user avatar Kevin M. Mansour‭ · 2021-07-26T18:36:13Z (over 2 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();">`.