3
I always put the CSS scripts and links at the top of the document in the head of the document. Now I realize that there is another concept where 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 a long time ago, but I don’t remember the whole. Is it better? Do you have technical advantages? I would like to know about.
4
<script>The reason to put the scripts at the end <body> is simple: Downloading scripts blocks parallel downloads. The HTTP/1.1 specification suggests that browsers do not attempt 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 make any other download, even from different hosts.
That is, your page is "blocked" while the script is being loaded, making the user experience slower.
<link> and <script>According to W3 specification, the tag <link> and the tag <style> can only be placed between tags <head>.
So put them inside the tag <body> is invalid.
3
Positioning scripts and css links in an html document
The HTML 4 and 5 specification indicates that a tag script should be positioned within a tag head or body in an HTML document and which can appear any number of times in each of them. Traditionally, tags script used to load external Javascript files appear in head, along with tags link to upload external CSS files and other metainformation about the page. The theory was that it is best to keep as many style and behavior dependencies together as possible, loading them first so that the page appears and behaves correctly.
Example of inefficient Javascript positioning:
<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>
While this code may seem innocuous, it presents a severe performance issue: there are three Javascript files being uploaded into head. Once each tag script prevents the page from continuing to be rendered until the Javascript code fully loads and runs, the apparent performance of that page will be penalized. Keep in mind that browsers don’t start rendering anything on the page until the tag body opening is found. Putting scripts at the top of the page in this way usually leads to a noticeable delay, often in the form of an empty blank page, before the user can start reading and interacting with the document.
Example of recommended script placement
<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>
Once scripts block the download of all types of page resources, it is recommended that all tags script are positioned as close as possible to the end of the tag body so that they do not affect the download of the page.
For more information on js and css positioning. See: https://novatec.com.br/livros/javascriptdesemp/capitulo9788575222416.pdf
Browser other questions tagged javascript html css html5 dom
You are not signed in. Login or sign up in order to post.
i have put lines like this at the end of the body and it has worked: <link href="~/Content/Scheduling.css" rel="stylesheet" />
– pnet
@pnet Works because your browser is smart. But it doesn’t make your html valid. When in doubt, use the verifier of W3.
– Beterraba