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

藏色散人
Release: 2022-12-30 11:12:42
Original
3526 people have browsed it

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.

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

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!