Shorten the page rendering time to make the page run faster

How to shorten the page rendering time on the browser as much as possible? This 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 image
• The page header indicates the document code

1. Write efficient CSS code

First, understand the process of browser parsing HTML code: build a DOM tree, and each element to be displayed on the page will be created in this DOM tree. Whenever a new element is added to the DOM tree, the browser will search the CSS style sheet through the CSS engine, find the style rules that match the element and apply them to the element. The CSS engine searches the style sheet and matches each rule from right to left.

After understanding the process, we can see that we can optimize our CSS code from two aspects: 1. The fewer CSS style rules defined, the better, so quickly delete unnecessary style definitions in the CSS file; 2. Optimize the selector writing method of each rule, and try to let the CSS engine know at a glance whether this rule needs to be applied to the current element, so that the engine can avoid unnecessary detours.

For example, the following are some inefficient ways of writing CSS:

a, Use wildcards as key selectors (key selectors refer to the rightmost selectors of each rule)

b. Use labels as key selectors

c, superfluous writing

d. Add the :hover pseudo-class to non-link tags. This will make pages with strict doctype very slow in IE7 and IE8.

Optimization suggestions:
a. Avoid using wildcards;
b. Let the CSS engine quickly identify whether the rule applies to the current element: use more id or class selectors and less tag selectors;
c. Don’t write id and class or tag and class together.
d. Try to avoid using descendant selectors and remove unnecessary ancestor elements. Consider using class selectors to replace descendant selectors.

e. Avoid adding the :hover pseudo-class to non-connected tags.

Second, avoid using CSS expressions

CSS expressions only work in IE browsers. Microsoft has not recommended their use since IE8 because they can seriously affect page performance: at any time, no matter what event is triggered, such as window resize events, mouse movement, etc., the CSS expression will be recalculated.

3. Put the CSS file at the top of the page

Placing external or inline style sheets in the body section will affect the speed of page rendering, because the browser will not continue downloading the rest of the page until all style sheets have been downloaded. In addition, inline style sheets (styles placed in <style>) may cause the page to be re-rendered or display certain elements in hidden pages. It is recommended not to use inline style sheets.

Fourth, specify the size of the page image

Specifying the page image size should match the actual size of the image (do not scale the image by specifying the size). This can avoid changes in the page structure caused by size changes, so it is beneficial to speed up page rendering.

5. Indicate the document code in the page header

HTML documents are transmitted across the network in the form of a data stream containing document encoding information. The encoding information of the page is generally specified in the header information of the HTTP response or in the HTML tag within the document. The client browser can only render the page correctly after determining the page encoding. Therefore, before drawing the page or executing any JavaScript code, most browsers (except IE6, IE7, and IE8) will buffer a certain number of bytes of data to find the encoding information. The number of bytes pre-buffered in different browsers is different. If the browser has not found the encoding information of the page after receiving the set amount of pre-buffered data, it will start rendering the page according to its own specified default encoding. If the page encoding information is obtained at this time and it is inconsistent with the current encoding, the entire page will have to be re-rendered, and in some cases it will even be necessary to re-acquire the data. Therefore, for pages larger than 1KB in size (according to tests on various browsers, the maximum amount of pre-buffered data is 1KB), the encoding information should be marked as early as possible.

Optimization suggestions:
a. Try to indicate the page code in the HTTP header information (this needs to be set on the server side). Browsers like Firefox, if they get the encoding information in the HTTP header, will pre-buffer less data and reduce unnecessary data buffering time;
b. Indicate the encoding information in the <head> section of HTML;
c. Get used to assigning encoding to documents;
d. The encoding specified for the page must match the actual encoding of the page; if you specify the encoding in both the HTTP header information and the HTML tag, make sure the encoding information is consistent.

Note: The article is not completely translated according to the original meaning of the Google document. The translated text is expressed in combination with my own understanding. If you find any errors, thank you for correcting them.