Optimize browser rendering (CSS)

Once the resource is downloaded to the client, the browser still needs to load, interpret, and render HTML/CSS/JavaScriptCode. You can use the features of the current browser to organize your code to improve the performance of your page on the client.

• Use efficient CSS Selector
• Avoid using CSS expressions
• Place the CSS file in the Document Header
• Size of the specified Image
• Specify a Character Set)

Use efficient CSS Selector

Overview:
Avoid using the inefficient key selector that needs to match a large number of elements and accelerate page rendering.

Details:
The browser parses HTML by constructing an internal document tree. Then it matches the styles specified by elements in different style sheets according to standard CSS cascade, inheritance and sorting rules. For implementation on Mozilla (or possibly for other reasons), the CSS engine uses style rules to match each element. The engine searches from right to left one by one from the rightmost selector until a matching item is found or the rule is discarded.
According to this principle, the fewer rules the engine needs to match, the better. Of course, deleting unused CSS is also an important step to improve rendering performance. Pages that contain a large number of elements or a large number of CSS rules can also enhance the performance of webpages defined by optimized rules. The key to optimizing rules is to define rules as much as possible to avoid unnecessary redundancy, so that the style engine does not need to match unnecessary rules for quick rendering.

Rules of the following categories are considered inefficient:

• And descendant selector rules

1) Rules with General Selector
Body *{...}
. Hide-scrollbars *{...}
2) Rules with Tag selectors
Ul Li {...}
# Footer H3 {...}
* Html # atticpromo ul Li {...}
The descendant selector is inefficient because the match of each element in the browser must traverse the DOM tree and evaluate each ancestor element until a matching or reaching the root element is found. The larger the number of unspecified keys, the more nodes need to be evaluated.

• Rules with subsets or adjacent selectors

1) Rules with General Selector
Body> *{...}
. Hide-scrollbars> *{...}
2) Rules with Tag selectors
Ul> LI> {...}
# Footer> H3 {...}
Subset or adjacent selector is inefficient because the browser has to evaluate another node for each matching element. Each sub-selector is equivalent to two times. Similarly, the more uncertain keys, the more nodes to be evaluated. However, at the same time of inefficiency, the performance is still better.

• Rule over-qualified Selector

Eg.
Ul # top_blue_nav {...}
Form # userlogin {...}
The ID selector is a unique definition. Including labels or class leaders only add redundant information that does not need to be evaluated.
Non-linked elements use pseudo-class rules
Eg.
H3: hover {...}
. Foo: hover {...}
# FOO: hover {...}
Div. FAA: hover {...}
The hover pseudo-class selector is used on non-linked elements, which leads to slow operation in IE7 and IE8 in some cases. Without strict doctype declarations, IE7 and IE8 will ignore the use of pseudo classes on non-linked elements. When strict doctype is used, the use of pseudo classes on non-linked elements will lead to performance degradation.

Suggestion:

• Avoid using a universal Selector

The element can inherit the ancestor element or use a class for multiple elements.

• Make your rules as detailed as possible

Compared with the label selector, we recommend that you use the class or ID selector.

• Remove redundant leading

The following restrictions are redundant:
1) Add the tag selector or class to the ID for leading
2) Add the label selector to the class for leading (in any case, adding a class to a label is a good design)

• Avoid using descendant selector, especially those labels with specified Redundancy

For example, rulesBody ul Li {...}A redundant body label is specified, because all the elements in the lower-level are the bodies of the child.

• Use class selector instead of descendant Selector

Eg. If you need to give an ordered list with different styles for an unordered list, you may do this:
Ul Li {color: Blue ;}
Ol Li {color: red ;}
In fact, we recommend that you use two classes to define them:
Eg.
. Unordered-list-item {color: Blue ;}
. Ordered-list-item {color: red ;}
If you must use a descendant selector or a child selector, use at least one additional node instead of a few tag selectors.

• Avoid adding pseudo class selector to non-link elements in IE

Alternatively, you can test whether the mouse hover function is available in IE7 and IE8 environments. If you find that hovering leads to performance problems, we recommend that you use the onmouseover event of JavaScript to handle it.

 

Note: I have translated only some of them and used them as notes. If you think it is not good, you can read text E. Site address: https://developers.google.com/speed/docs/best-practices/rendering? Hl = ZH-CN