I've always put the scripts and links to the CSS at the top of the document in the head of the document. Now I realize that there is another concept in which the calls to scripts and CSS are at the bottom of the document html , in the last lines of body .
Is there a reason for this? A colleague of mine gave me an explanation some time ago, but I do not remember at all. Is it better? Do you have technical advantages? I would like to know about it.
<script>
The reason to put the scripts at the end <body> is simple : download scripts block parallel downloads. The HTTP / 1.1 specification suggests that browsers do not try to download more than two components from the same host in parallel. If you host your images on different hosts, you can get more than two downloads in parallel.
However, in the case of scripts, the browser will not download any more, even from different hosts.
That is, your page is "locked" while the script is loading, making the user experience slower.
<link> and <script>
According to the W3 specification, tag <link> and tag <style> can only be placed between the tags <head> .
So putting them inside the <body> tag is invalid.
Placing scripts and css links in an html document
HTML specification 4 and 5 indicates that a script tag should be placed inside a head or body tag in an HTML document, and which may appear any number of times in each of them. Traditionally, script tags used to load external JavaScript files appear in head , next to link tags to load external CSS files and other metadata about the page . The theory was that it is best to keep the maximum of style and behavior dependencies together by loading them first so that the page comes up and behaves correctly.Inefficient JavaScript placement example:
<html>
<head>
<title>Script Example</title>
<-- Exemplo de posicionamento JavaScript ineficiente -->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Although this code may seem innocuous, it has a serious performance problem: there are three JavaScript files being loaded into head . Because each script tag prevents the page from being rendered until the JavaScript code loads and executes fully, the apparent performance of that page will be penalized. Keep in mind that browsers do not start rendering anything on the page until the opening body tag is found. Placing scripts at the top of the page in this way generally leads to a noticeable delay, often in the form of an empty blank page, before the user can begin reading and interacting with the document.
Recommended script placement example
<html>
<head>
<title>Script Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
<-- Exemplo do posicionamento recomendado do script -->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
</body>
</html>
Since scripts block downloading of all page resource types, it is recommended that all script tags be positioned as close to the end of the body in> so that they do not affect the download of the page.
For more information on positioning js and css. See: link