Shulou(Shulou.com)06/02 Report--

The main content of this article is "how to improve the speed of the browser rendering page", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to improve the speed of the browser rendering page.

First, write efficient css code

First of all, figure out how the browser parses the html code: build a dom tree, and all the elements to be displayed on the page are created into the dom tree. Whenever a new element is added to the dom tree, the browser traverses the css stylesheet through the css engine to find style rules that match the element and apply to the element. The css engine looks for stylesheets 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 aspects: 1, the definition of css style rules the fewer the better, so quickly delete the unnecessary style definition in the css file; 2, optimize the selection character book writing way of each rule, try to let the css engine know whether this rule needs to be applied to the current element, so that the engine takes fewer unnecessary detours.

Such as the following inefficient css writing methods:

Body * {...} hide-scrollbars * {...}

B, use the tag as the key selector

Ul li a {...}

# footer h4 {...}

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

C, the way to draw superfluous words.

Ul#top_blue_nav {...} form#UserLogin {...}

D, add: hover pseudo-class to the connectionless tag, which will slow down pages that use strict doctype under IE7 and IE8.

H4:hover {...} .foo: hover {...} # foo:hover {...} div.faa: hover {...}

Optimization recommendations:

A, avoid using wildcards

B, let the css engine quickly determine whether the rule applies to the current element: use more id or class selectors and less tag selectors

C, don't add id to class or tag to class.

D, avoid using descendant selectors as far as possible, remove unnecessary ancestor elements, and consider using class selectors to replace descendant selectors.

/ * define different colors for unordered and ordered li, you might write: * / ul li {color: blue;} ol li {color: red;} / * add class to li, which makes the definition more efficient: * / .unordered-list-item {color: blue;} .colors-list-item {color: red;}

E, avoid adding: hover pseudo-class to the connectionless tag.

Second, avoid using css expressions

Css expressions work only in ie browsers, and Microsoft has deprecated them after ie8 because it can seriously affect page performance: any time an event is triggered, such as a window resize event, mouse movement, etc., the css expression will be recalculated.

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

Placing external or inline stylesheets in the body section affects the speed of page rendering, because browsers will not continue to download the rest of the page until all stylesheets have been downloaded. In addition, inline style sheets (styles that are included) may cause the page to re-render or show some elements of the hidden page, so it is recommended not to use inline style sheets.

Fourth, specify the size of the picture on the page

Specify the size of the page image, in line with the true size of the picture (do not scale the picture by specifying the size), you can avoid changes in the page structure caused by size changes, so it is beneficial to speed up the rendering of the page.

Fifth, the header of the page is marked with document coding.

HTML documents are transmitted between networks in the form of a data stream containing document coding information. The encoding information of the page is generally indicated in the header of the HTTP response or in the HTML tag within the document. Client browsers can render the page correctly only after determining the page encoding, so before drawing the page or executing any javascript code, most browsers (except ie6, ie7, ie8) will buffer a certain byte of data to find encoding information, and the number of bytes pre-buffered is different in different browsers. If the browser has not found the coding information of the page after receiving the set amount of pre-buffered data, it will start rendering the page according to the default encoding specified by the browser. If the page coding information is not consistent with the current encoding, the whole page will have to be re-rendered, and in some cases, the data will even need to be re-obtained. Therefore, pages whose size is larger than 1KB (according to the test in each browser, the largest amount of pre-buffered data is 1KB) should indicate the coding information as soon as possible.

Optimization recommendations:

A, try to indicate the page code in the HTTP header information (this needs to be set on the server side). Like Firefox browsers, if the encoding information is obtained from the HTTP header information, less data will be pre-buffered, thus reducing unnecessary data buffering time.

B, mark the coding information in the part of the HTML

C, get used to assigning encodings to documents

D, the encoding assigned to the page should be consistent with the actual encoding of the page; if you specify the encoding in both the HTTP header information and the HTML tag, make sure that the encoding information is consistent.

At this point, I believe you have a deeper understanding of "how to improve the speed of the browser to render the page". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.