WebKit Rendering Process

WebKit notes, mainly from Ju Yongsheng "WebKit Technology Insider" study notes, reproduced on the original, the book is the only WebKit core books, learning a good mentor, recommend interested friends can buy

WebKit rendering process includes a lot of data and modules

Data: Web content, Dom tree, internal representation, image

Modules: HTML interpreter, CSS interpreter, JavaScript engine, layout and drawing module

Rendering is divided into three stages depending on the direction of the data

1, URL of Web page to build DOM tree

2,dom tree to the drawing context that finished building WebKit

3, drawing context to the final image

The following is a detailed description of the three steps (this should be dashed to indicate a dependency relationship)

From Web page URL to DOM tree

Describes the process from web page URLs to the completion of the DOM tree, where the numbers represent the basic order and are not strictly consistent because the process may be repetitive and cross

Specific process:

1, when user enters the URL of the Web page, WebKit calls its resource loader to load the URL corresponding to the Web page

2, the loader relies on the network module to establish a connection, sends a request and accepts a reply

3,webkit accepts data from a variety of web pages or resources, some of which may be obtained synchronously or asynchronously

4, the page is handed over to the HTML interpreter into a series of words (tokens)

5, the interpreter constructs a DOM tree based on the Word Building nodes (node)

6, if the node is JavaScript code, call the JavaScript engine to interpret and execute

7,javascript code may modify the structure of the DOM tree

8, if the node needs to rely on other resources, such as pictures, CSS, video, etc., call the resource loader to load them, but they are asynchronous and do not hinder the creation of the current DOM tree

If it is a JavaScript resource URL (not marked asynchronously), you need to stop the creation of the current DOM tree until the JavaScript resource is loaded and executed by the JavaScript engine before continuing the creation of the DOM tree

During the above process, the Web page issues "domconent" events and Dom "onload" events during loading and rendering, respectively, after the DOM tree has been built, and when the DOM tree is built and the pages depend on the resources

Occurs after loading, because the loading of some resources does not hinder the creation of the DOM tree, so the two events do not occur at the same time most of the time

The next step is WebKit using CSS and DOM trees to build the renderobject tree until the drawing context

From CSS and DOM trees to drawing contexts

The specific process for this phase is as follows:

1, CSS file is interpreted as internal representation structure by CSS Interpreter

2, after the CSS interpreter has finished working, append the interpreted style information to the DOM tree, this is the RenderObject tree

3, RenderObject nodes are created, WebKit creates a renderlayer tree based on the hierarchy of the page and constructs a virtual drawing context.

In fact, there are complex internal processes, which are described in the following chapters

The establishment of the RenderObject tree does not imply that the DOM tree will be destroyed, and in fact, the four internal representations in the above diagram persist until the Web page is destroyed because they play a significant role in rendering the Web page.

Finally, the final image is generated based on the drawing context, which relies primarily on the 2D and 3D image libraries (all of which should be curves).

From the drawing context to the final image

The specific process for this phase in the diagram is as follows:

1, the drawing context is a platform-independent abstract class that bridges each drawing operation to a different concrete implementation class, that is, a drawing-specific implementation class

2, the drawing implementation class may also have a simple implementation, or there may be a complex implementation. In chromium, its implementation is quite complex and requires a chromium synthesizer to complete complex multi-process and GPU acceleration mechanisms. Detailed later

3, the drawing implementation class saves the results of the 2D graphics library or the 3D graphics library, and gives it to the browser to display with the browser interface

This process may actually not be as simple as depicted in the diagram, and modern browsers may introduce complex mechanisms in this process for efficiency and security on the drawing. And, drawing is also from the previous simple software rendering,

GPU hardware rendering, mixed rendering models, and so on, these are also analyzed later

WebKit Rendering Process