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.
What's the difference between placing <script> in the <head> and placing in the <body>?
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?
1 answer
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();">.
0 comment threads
0 comment threads