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

Dashboard
Notifications
Mark all as read
Q&A

What's the difference between placing <script> in the <head> and placing in the <body>?

+6
−0

While learning JavaScript, I started to see sometimes the <script> is placed in the <head> and sometimes it is placed in the <body>, What's difference between placing the <script> in the <head> and placing in the <body>, and What's the best for more performance and efficiency?

Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

0 comment threads

1 answer

+5
−0

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 attribute on the <body>, as below:

<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, as below:

document.addEventListener("DOMContentLoaded", function() { 
    // DOM Content Loaded.
    console.log("Yay!");
});

2. Modern

Since most of modern browsers support async attribute and 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:

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

<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();">.
Why does this post require moderator attention?
You might want to add some details to your flag.

0 comment threads

Sign up to answer this question »