WebKit Technology--web page rendering principle

WebKit rendering

Webkit was an open-source project launched by Apple, and Google created a new project with the project in Webkit, and the usual Chrome browser is generally based on a stable version of Chromium. This article mainly introduces the browser's rendering engine, the WebKit kernel. WebKit as a browser's rendering engine enables the conversion of HTML/CSS/JS text and corresponding resource files into image results.

1. The internal module structure diagram is as follows:

You can see that the rendering engine roughly includes modules such as the HTML interpreter, CSS interpreter, layout, and JavaScript engine. These modules may also rely on other base modules, such as those that rely on the second tier.

2. Show how these modules work together to complete the basic rendering process for a webpage:

The first is the content of the Web page, sent to the HTML interpreter. The HTML interpreter forms a DOM tree after interpreting it, and the JavaScript engine handles it if it encounters JavaScript code. If the page contains CSS, give it to the CSS interpreter to parse it. When the DOM is established, it accepts style information from the CSS interpretation and constructs a new internal drawing model. The model calculates the position and size information of each element inside the model by the layout module, and finally the drawing module completes from the model to the image.

Finally explain the pointing meaning of the dashed arrows in the diagram. They represent other modules that may be used in each stage during the rendering process. In the Web content download, need to use to network and storage, this is obvious. However, when calculating the layout and drawing, it is necessary to use the 2d/3d graphics module, and because to generate the final visualization, it is time to start decoding audio video and pictures, and draw them into the final image along with other content. After rendering is complete, the user may need to interact with the rendered result, or the Web page itself is animated, which in general will continue the re-rendering process.

3. Web page Rendering process

Webkit Web page rendering process, so and online that the more popular surface questions (enter the URL to the page to show what the process) a little different.

There are three main processes: the first stage is from the URL to the completion of the DOM tree, the second stage is the DOM tree to the completion of the WebKit drawing context, the third stage is from the drawing context to the final generated image.

We're still looking at the diagram to understand the three stages.

Here you explain the effect of each step 1-8:

1. Indicates that when the user enters the URL, WebKit calls its resource loader to load the resource corresponding to the URL

2. The loader relies on the network module to establish links, requests, and accepts replies.

3.webkit receives data from various Web page requests or resources, some of which may be synchronous or asynchronous.

4. Web page to the HTML interpreter into a series of words (tokens)

5. Interpreter constructs DOM nodes based on words, forming a DOM tree

6 If the node has JS code, call the JavaScript engine

7. Where JS has the potential to modify the DOM tree structure

8. If the nodes also need to load other resources (such as video images), the loader will be called to load them, but the process is asynchronous and does not hinder the creation of the current DOM tree.

This is the first stage of the process, and then the second stage

This specific process is probably:

1.CSS file interpreted by CSS interpreter internal representation structure

After the 2.CSS interpreter has finished working, append the interpreted style information to the DOM tree, which is renderobject

3.RenderObject nodes while creating, WebKit creates a renderlayer tree based on the hierarchy of the Web page, while building a virtual drawing context.

The four internal representations in the figure above are always present, unless the page is destroyed.

The last one is the third stage, which generates the final image according to the drawing context:

The above three stages basically introduced a finished page rendering process. Because of the dynamic interaction of the Web page, the browser has been repeatedly executing the rendering process.

Here is an example of a browser to see the actual situation:

I have my demo open in the Chrome browser (the demo is an HTML file with only one picture).

Open Chrome's developer tools and find the results shown below in the network

You can see that the final load of two resources: an HTML page, a picture.

Two vertical bars, the first indicates that the DOM has been loaded, and the second indicates that the resource is fully loaded. You can see that the second line appears after the picture is loaded. The second line appears after the first phase is complete, and then the second, three-stage.

This TimeLine is based on the time to get the Web page rendering action process. The blue section represents the first stage of loading the DOM resources, while the purple shows only the layout layouts, but he represents the second phase. The green representation is the third stage of the drawing stage (paint drawing node and composite layers the hierarchy of the composite Web page).

WebKit Technology--web page rendering principle