All geek questions in one place

Why does the standard put a css and js file at the top and bottom of the page (respectively)?

Just wondering why there is a performance improvement when standardizing a site using css and js in the headers and at the top / bottom of the page.

+6
source share
8 answers

This is not entirely correct. It is simply said:

  • Style declarations should be as close to the top as possible, as browsers will not display your page before loading CSS (to avoid flashing uneven content)

  • Script tags should be as close to the base as possible, since they block browsers from parsing after the tag before loading and ending it (since the script can modify the document using document.write)

If you're interested in interface performance, I highly recommend reading High Performance Websites: Basic Knowledge for Steve Souders Front- End Engineers.

+15
source

There are many WHY , but I always go with one of Yahoo Developers

Rule 5 for High Performance Websites - Put Styles at the Top

and

Rule 6 for high-performance websites - Move scripts to the bottom

+5
source

It is not standard to put js files in the header, most of the time it is better to place them at the bottom of the page, because then js loads after loading html. This allows the direct use of html elements (e.g. adding handlers to specific divs, etc.). For css, especially the <link> tag, it is standard for use in the header. This makes the style accessible to html, which is loaded into <body>. Place either css / js has little to do with performance.

+3
source

CSS should be at the top, so the browser can immediately begin prototyping.

Javascript should be at the bottom. Javascript may contain document.write (), so the browser cannot do anything after Javascript before it runs Javascript.

0
source

The reason to put CSS at the top is to load it before displaying the page so that the page is rendered using styles. Otherwise, it will be displayed without design and then resubmitted. JS often loads at the bottom rather than at the top. The reason for loading JS in the header is its availability on the page (otherwise you can call the object / function undefined if you have JS in the body of the page that uses external libraries)

0
source

I could improve performance if you move your javascript to the bottom of the page ...

0
source

AFAIK CSS is really valid only in the header, but also for CSS and JS, they should be in the head, so that by the time everything on the page requires them, they are definitely available.

For example, if you have a JS function call in the body of the page, but this function has not been declared before, then, of course, you will get a script error.

In terms of performance, I don't know how much performance improves if you have it in your head, but I could be wrong. Sometimes you can improve the performance of some scripts by specifying them at the bottom of the page, but this only happens because other content is displayed manually (rather than rendering the browser when loading external resources).

0
source

I think that the advantages you are talking about can be more readily attributed to the placement of the code in a separate file, and not to the files at a specific point on the page.

Of course, with JavaScript, you can use aspects such as minimization and anti-aliasing if they are placed in a separate file.

If multiple pages use a JS or CSS file, caching can also play a role in improving performance.

-1
source

Source: https://habr.com/ru/post/891621/

More articles:


All Articles