Suggestions on how to improve browser rendering page speed

How to shorten the browser page rendering time as much as possible, the article starts from the following aspects:

Write efficient CSS Code

Avoid the use of CSS expressions

Put the CSS file at the top of the page

Specify the size of the page picture

Page header indicates document encoding

One, write the efficient CSS code

First, understand the browser parsing HTML code: Building a DOM tree, the elements of the page to display will be created into this DOM tree. Whenever a new element is added to the DOM tree, the browser uses the CSS engine to look through the CSS stylesheet and find the style rules that match the element to apply to the element. The CSS engine looks up a style sheet and matches each rule in Right-to-left order.

After understanding the process, we can see that we can optimize our CSS code in two ways: 1, the less the CSS style rules are defined, the better, so quickly delete the unnecessary style definitions in the CSS file; 2, optimize the way each rule is written, Try to get the CSS engine to see whether the rule needs to be applied to the current element, leaving the engine less of an unnecessary detour.

Some of the less efficient ways to write CSS are as follows:

Body * {...}

Hide-scrollbars * {...}

B, use tags to make key selectors

Ul li a {...}

#footer h3 {...}

* HTML #atticPromo ul li a {...}

C, the formulation of the superfluous

Ul#top_blue_nav {...}

Form#userlogin {...}

D, add to the connectionless tag: hover pseudo class, which will be very slow to strict DOCTYPE pages in IE7 and IE8.

H3:hover {...}

. Foo:hover {...}

#foo: hover {...}

Div.faa:hover {...}

Optimization Recommendations:

A, avoid using wildcard characters;

b, let the CSS engine quickly identify whether the rule applies to the current element: multiple ID or class selector, less tag selector;

C, do not gild the ID and class or tag and class, etc. connected to write;

D, try to avoid the use of descendant selectors, remove unnecessary ancestor elements, you can consider using the class selector to replace the descendant selector;

* To define different colors for unordered and ordered Li, you might write this: *

UL li {color:blue;}

Ol li {color:red;}

/* Add class to Li so that the definition is more efficient: * *

. Unordered-list-item {Color:blue}

. Ordered-list-item {color:red}

E, avoid adding: hover pseudo class to non-connection tags.

Second, to avoid the use of CSS expressions

CSS expressions only work in IE browser, Microsoft has not recommended after IE8, because it will seriously affect the performance of the page: any time, regardless of any event is triggered, such as the window Resize event, mouse movement, etc., the CSS expression will be recalculated again.

Third, put the CSS file at the top of the page

Putting an inline or inline style sheet in the body section affects the speed at which the page is rendered, because the browser will not continue downloading the rest of the page until all the stylesheet downloads are complete. In addition, inline style sheets (styles placed in