How to shorten the time of page rendering on the browser as much as possible

Summary: How to shorten the browser page rendering time as much as possible, the article from the following aspects: write efficient CSS code to avoid using CSS expressions to put the CSS file at the top of the page to specify the size of the page Picture page header marked document code one, write

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

Write efficient CSS Code

Avoid using CSS expressions

Put the CSS file at the top of the page

Specify the size of the page picture

Page header indicates document encoding

Write 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 rule that matches 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:

Body * {...}

Hide-scrollbars * {...}

b, use the label as the key selector

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 IDs or class selectors, fewer tag selectors;

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, avoid using 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 <style>) may cause the page to be rendered again or to show some elements in a hidden page, and it is recommended that you do not use an inline style sheet.

Four, specify the size of the page picture

Specify the size of the page picture, to conform to the actual size of the picture (do not specify the size of the picture to scale), you can avoid the change in the size of the page structure effect changes, so the speed of the page rendering is beneficial.

Five, the page header marked document encoding

HTML documents are transmitted across the network in the form of data streams that contain document-encoded information. The encoding information for the page is typically indicated in the header information of the HTTP response or in the HTML tag within the document. The client browser only determines the page encoding to properly render the page, so before drawing the page or executing any JavaScript code, most browsers (IE6, IE7, IE8) will buffer some byte of data to find the encoded information, different The number of cached bytes in the browser is different. If the browser has not found the encoded information of the page after it has received the preset amount of cached data, will start rendering the page according to the default encoding you specify, and if you get the page encoding information again, and the encoding is not consistent with what you are using, the entire page will have to be rendered again, and in some cases you may need to retrieve the data again. Therefore, for pages larger than 1KB (based on the test conditions in each browser, the maximum amount of pre-buffered data on 1KB) should be marked as early as the encoding information.

Optimization Recommendations:

A, try to mark the page encoding in HTTP header information (this needs to be set on the server side). Like the Firefox browser, if the HTTP header information gets the encoded information, it will buffer less data to reduce the unnecessary data buffer time;

b, the coding information is indicated in the <head> part of the HTML;

c, to get used to assigning code to documents;

D, the code assigned to the page conforms to the actual page code, and if you specify the encoding in the HTTP header information and HTML tags, make sure that the coded information is consistent.