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

This article mainly explains "what is the process of rendering web pages by browsers". Interested friends may wish to take a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the process of rendering a web page by a browser?"

The process of rendering a web page by the browser. The browser obtains the html document from the HTTP server and then presents the page to the user through the following steps:

Browser rendering web page flow

1. Parsing documents to build DOM tree

The parsed content of the browser can be divided into three parts:

HTML/XHTML/SVG: after parsing these three files, a DOM tree (DOMTree) is generated

CSS: parse stylesheets and generate CSS rule trees (CSSRuleTree)

JavaScript: parse scripts that manipulate DOMTree and CSSRuleTree through DOMAPI and CSSOMAPI to interact with users.

The execution order of the above three types of files will have similarities and differences according to their location in the document and their tag attributes, which are discussed later.

2. Build a render tree

After parsing the document, the browser engine attaches the CSSRuleTree to the DOMTree and constructs the RenderingTree (render tree) based on DOMTree and CSSRuleTree. It should be noted here:

The difference between RenderTree and DOMTree is that things like Head or display:node are not placed in the render tree.

Matching CSSRuleTree to DOMTree requires parsing CSS's selector. To improve the performance of this process, the DOM tree should be as small as possible, and CSSSelector should use id and class as much as possible to avoid excessive cascading.

3. Layout and drawing render trees

Parsing attributes such as position,overflow,z-index, and so on, and calculating the location and size of each render tree node is called reflow. Finally, the NativeGUIAPI of the operating system is called to complete the drawing (repain). Note:

The node that renders the tree is called frame in Gecko and renderer in webkit

Reflow and repaint are two different concepts, and their differences will be discussed later.

The influence of scripts and style files on browser rendering web pages

The browser fetches the document from the server and parses it from top to bottom. If the script file tag does not contain defer and async attributes, it executes the document content according to the following rules:

Parse the html document and build the DOM tree when you encounter HTML tags

In the process of building DOM, if you encounter an external style declaration or script declaration, pause the document parsing, create a new network connection, and start downloading the style file and script file

After the style file is downloaded, the CSSRuleDOM is built, and after the script file is downloaded, it is explained and executed immediately.

While building the DOM, combined with the CSS rule tree to complete the page rendering.

If the DOM tree is built before the CSS rule tree, the page is redrawn after the CSS rule tree is built, and the newly built CSS rules are applied to the render tree.

The influence of script File on document parsing

In this process, the download and execution of the script file is synchronized with the document parsing, and the download and execution of the script file will block the document parsing. If it is not well controlled, it will have an impact on the user experience to a certain extent.

At this point, I believe you have a deeper understanding of "what is the process of rendering web pages by browsers". 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.