2. css performance optimization topic ---- 2, css Performance Optimization

2. css performance optimization topic ---- 2, css Performance Optimization

Css selector Optimization

First, the resolution sequence of the css selector is from right to left.

For example:

1. (1) box> span

When rendering a webpage, the browser searches for span first, and then continues to search up until the parent element of span is. box. If no, the browser searches for the next span.

1. (2). box span

When rendering a webpage, the browser searches for span first, and then searches up until the parent element of span is. box. If it cannot be searched, it searches for the next span.

In contrast, 1. (1) is more efficient than 1. (2.

 

 

2. (1) # btn

Every id on a page is unique. the browser will directly find the # btn element and render it.

2. (2) button # btn

In this example, a button is added to the selector above. After the browser finds the # btn element, it will look for the button element again.

 

 

3. [name = "submit"]

Do not use the global selector whenever possible

 

4. Use a special class instead of multiple rules.

For example:

4. (1) div. box ul li

4. (2). div-

 

5. Use css to inherit attributes and reduce code usage.

Not inherited: display, margin, border, padding, background, height, min-height, max-height, width, min-width, max-width, overflow, position, left, right, top, bottom, z-index, float, clear, table-layout, vertical-align, page-break-after, page-bread-before, and unicode-bidi. All elements can be inherited: visibility and cursor. Inline elements can inherit: letter-spacing, word-spacing, white-space, line-height, color, font, font-family, font-size, font-style, font-variant, font-weight, text-decoration, text-transform, and direction. Terminal block elements can be inherited: text-indent and text-align. List elements can inherit from the following types: list-style, list-style-type, list-style-position, and list-style-image. Table elements can be inherited: border-collapse. Font attribute writing format (css1 only)
Font: font-style font-variant font-weight font-size line-height font-family;

Default font Attribute Value
Font: normal medium normal "Times New Roman"; 5.css is placed in the head position. The advantage of css is that the browser does not render the page when loading the css file, the page will be rendered only after the css file is loaded. Before that, the page is displayed as blank. 6.css abbreviation, can reduce the use of code to achieve the goal of smaller files.