Clik here to view.
Many a times people get confused where exactly to place their JavaScript files in HTML. This is because, JavaScript fits nicely into the “head” as well as the “body” section of the HTML. Also, JavaScript can be placed inline by pasting it directly to the HTML document or placing it externally and linking it to the HTML page. We will see the best practice of placing the JavaScript and the respective consequences.
This is the layout of a normal HTML page:
<html>
<head>
<title>Website Title </title>
</head>
<body>
</body>
</html>
1. Placing it in Head:
This is a problem!!!!!
<html>
<head>
<title>Website Title </title>
<script language="javascript" type="text/javascript">Some script</script>
</head>
<body>
</body>
</html>Why?
Because, all the scripts placed in the head section start downloading to the browser when the page is requested. The user has to not only wait for the pages to render but also for the scripts to render.
Another problem with JavaScript are they block parallel downloads per host-name. This means, when a JavaScript is downloading to the page/browser no other downloads can occur simultaneously. JavaScript blocks all other downloads on the page. Hence, page will be rendered slow and the user experience become horrible if the internet connection is slow.
You might also like:
Speed up the website part 1
Speed up the website part 2
2. Placing it in Body:
This is a nice solution!!!
<html>
<head>
<title>Website Title </title>
</head>
<body>
<script language="javascript" type="text/javascript">Some script</script>
</body>
</html>Why?
The scripts would load only when full page has been downloaded causing the best user experience. This means, head loads first in an HTML page and next the body. As simple as that.
The problem here would be: If the page is too huge, then placing the scripts to the bottom can cause problems because the user can use the JavaScript experience on the page only when the whole page has finished loading.
Note: It is not always possible to place the script to the bottom and some times it becomes challenging. If the script has document.write in the code then it becomes difficult.
As much as possible put the scripts to the bottom of the page[just before </body> tag]
Place the JavaScript external to the website
Placing the JavaScript code external will help the page load faster. This is always being stressed by many web developers and by many coding forums to place it external. The reason being, the JavaScript file placed external would be cached by the browser and would be easier for the browsers to know the consistency of the external JavaScript. Whereas, placing the JavaScripts inline with the HTML document makes the JavaScript to be downloaded each time the page is requested.
Best syntax to place the JavaScript external is:
<script type='text/javascript' src='EXTERNAL_JAVASCRIPT_URL'></script>
Clik here to view.
<script type='text/javascript' src='EXTERNAL_JAVASCRIPT_URL'/>
Conclusion
Using JavaScript at the bottom of the HTML document does a lot of good work for the page load. Similarly, using the JavaScript file externally is the best choice.
Hope you liked this article. Thanks for reading. Enjoy. ~iTechColumn
Clik here to view.
The post Where to place JavaScript in HTML Web page? appeared first on Itechcolumn.