Why put css at the top and js at the bottom?

The reasons why css is placed above and js is placed below: 1. When loading html to generate a DOM tree, the DOM tree can be rendered at the same time, which can prevent flickers, white screens or confusing layouts; 2. JavaScript loading It will be executed immediately and will block subsequent resource loading.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer.

Recommended: css video tutorial

The difference between href and src

Generally use href to load CSS and put it in the header part; use src to load the script and place it at the bottom of the body.

href

is the abbreviation of hypertext reference, which represents a hypertext reference and is used to establish a link between the current element and the document. Commonly used ones include link and a.

When CSS is referenced using href, the browser will identify the document and ask for the CSS, download it in parallel, and will not stop loading the current document.

src

is the abbreviation of source, which is a resource and an essential part of the page. The content pointed to by src will be embedded in the position of the current tag in the document. Commonly used ones include img, script, and iframe.

When the script uses src reference, when the browser parses the element, it will stop rendering the document until the resource is loaded. This is also the reason why the script is placed at the bottom instead of the head.

The reasons for putting CSS in the head and script at the bottom

1. Put CSS in the head

When loading html to generate a DOM tree, You can render the DOM tree at the same time.

This can prevent flickering, white screen or confusing layout.

2. Put javascript at the end.

javascript may change the structure of the DOM tree, so a stable DOM tree is needed.

Javascript will be executed immediately after loading and will block subsequent resource loading. (Characteristics of javascript loading and execution)

Expand knowledge:

1. First, let us understand a few common problems:

1. When optimizing the page , you need to put the css at the head and the js file at the end. Why can this be done to optimize the page?

2. When using jquery, why do you write the function in $(document).ready () incident?

3.javascript will block the parsing of dom.

When the <script> tag is encountered during the parsing process, the parsing process will be stopped and the script will be processed instead. </script>

If the script is inline, the browser will go first Execute this inline script.

If it is externally linked, the script will be loaded first and then executed.

After processing the script, the browser continues to parse the HTML document.

2. Analysis of DOMContentLoaded function and load function

1. The DOMContentLoaded event actually means that the dom content has been loaded.

For example, when we open a web page,

The page is blank at first and nothing can be seen. After a period of time, the page displays the content, but there are still some The image resources cannot be seen. At this time, the page can be interacted normally.

After a while, all the resources on the page will be loaded, and then the entire page will be loaded.

The DOMContentLoaded event is triggered from the blank page to the display of the page content, and this event is when the HTML document is loaded and parsed.

2. The load event will not be triggered until all resources on the page (pictures, audio, video, etc.) are loaded. The load event of the page will not be triggered until DOMContentLoaded is triggered.

3. About the ready function in jquery

The ready function in jquery actually listens to the DOMContentLoaded event,

So we write the function in the ready function, which can be used on the page After the parsing is completed,

we can access all elements of the page, shorten the interaction time of the page, and improve the overall experience of the page

4. Why put css at the head and js at the tail? Can increase the performance of the page

Now the browser for a better user experience, the rendering engine will try to display content on the screen as soon as possible,

It will not wait until all HTMl elements are parsed before building and layout the dom tree, so part of the content will be parsed and displayed.

That is to say, the browser can render incomplete dom tree and cssom, reducing the time of white screen as soon as possible.

If we put js in the header, js will block the parsing of dom, and the content of dom will affect the drawing of the dom tree, causing the dom drawing to be delayed.

So we will put js behind to reduce the time for dom drawing, but it will not reduce the time for DOMContentLoaded to be triggered.

The above is the detailed content of Why put css at the top and js at the bottom?. For more information, please follow other related articles on the PHP Chinese website!