Javascript script Tag Placement
Description
Traditionally, all script
elements were placed
within the <head>
element on a page.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
<script type="text/javascript" src="example3.js"></script>
</head>
<body>
<!-- content here -->
</body>
</html>
Including all JavaScript files in the <head>
means
that all of the JavaScript code must be processed before the page begins
rendering.
For this reason, you can include JavaScript references in the <body>
element.
<!DOCTYPE html>
<html>
<body>
<!-- content here -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
Using this approach, the page is completely rendered before the JavaScript code is processed.