How, after all, correctly connect styles and js files?

In many sources it is indicated that the most correct is such a method: css at the beginning (at the head), and js at the end, before closing. But when I look at the largest resources as it is done, it turns out differently everywhere, and in fact, as I understand it, the largest resources care about the speed of loading the site in the first place. Someone places everything in the head, someone and so, and syk.

Or are there any "pitfalls" that are worth paying attention to? Just quite interesting. I myself always place css at the beginning, and all js at the end.

  • one
    The largest resources checked for speed? Are all really fast? Just interesting, do not think anything. A couple somehow checked, but there is no talk about speed and speech. - HamSter

2 answers 2

Why is the css model above, the js below more attractive?

Here the important point is that the browser loads the page from top to bottom.

Scenario number 1

There is a page on which scripts and styles above

<html> <head> <link rel="stylesheet" href="styles.css"> <script src="scripts.js" type="text/javascript"></script> </head> <body> <!-- here is page content --> </body> </html>

An example script for downloading it will be:

  1. Loading styles
  2. Download scripts
  3. Load the rest of the markup

In this scenario, there is a drawback, before the content of the page is displayed directly, the browser must load styles and scripts, which gives a rather long delay if it is a large resource.

Scenario number 2

There is a page on which styles are at the top, and scripts before the closing body tag.

 <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- here is page content --> <script src="scripts.js" type="text/javascript"></script> </body> </html>

An example script for downloading it will be:

  1. Loading styles
  2. Load markup
  3. Download scripts

In this scenario, there are advantages over the first, before the content of the page is displayed directly, the browser should load only the styles, and it will load the scripts last, which allows the user to quickly see the contents of the page.

Why styles should be left at the top? If the styles as well as the scripts are moved to the bottom of the page, then the markup after loading will not be stylized, which will look pretty ugly until the moment the styles are loaded.

  • In the first case, the browser must load styles and scripts. Scripts are loaded asynchronously, as a rule, therefore not an argument. - edem
  • @edem, I think you are not quite right, until the download of all scripts, the further rendering of the page is locked. Ie, if there are scripts in the header, then the markup will not be generated until all the scripts in the header are loaded and processed. Give arguments if I'm wrong. - Kison
  • No, in your example you have the right conclusions, I forgot that to change the behavior, you must explicitly specify the parameters for loading scripts using defer or async. Read more w3.org/TR/html51/… - edem

Take to the end what is not necessary for the design of your site. After all, when opening a site, the user first sees it, and then interacts with it. If (relatively speaking) in some script you have to change the fonts (depending on the device, screen size, Math.random () =)), then this script makes sense to place higher, so that the user would rather see the site in the right form . If some script is engaged in image processing of previews, loading of articles as it scrolls, or performs some other actions that do not affect what the user sees at the first instant of opening the site - put it below.

In general, paraphrasing one slogan, - "functional is nothing, the view is everything!" :)