WebKit Rendering Basics (reprinted in Learning ...) ）

Overview

WebKit is a rendering engine, not a browser, which focuses on the presentation of Web content, where rendering is one of the core parts. This chapter focuses on a certain degree of understanding and understanding of the basis of the rendering, the main understanding is based on the DOM tree to introduce the origin and manner of the construction of the render tree and the Renderlayer tree.

So what is DOM? In a nutshell, Dom is a structured representation of HTML or XML documents, which allows users to access the relevant properties of any element in an HTML page by providing a standard interface, and to add, delete, and update the DOM accordingly. The relevant information can be found in the documentation, which is not mentioned here.

based on some visual (visual) nodes of the DOM tree, WebKit to create the corresponding RenderObject nodes, which also form a tree called the render tree, as needed. Based on the render tree, WebKit also creates a new Renderlayer node for some of these nodes as needed to form a renderlayer tree.

The render tree and the Renderlayer tree are the basic but very important facilities provided by WebKit support rendering. This is because WebKit's layout calculations depend on them, and both browser rendering and GPU hardware acceleration are dependent on them. Fortunately, thanks to the flexibility of their interface definitions, different browsers can easily implement their own rendering and acceleration mechanisms.

In order to visually understand these three kinds of trees, the corresponding relationship between the three trees and their relationships is given, and the details are described in detail later.

The establishment of the render tree

The render tree is a new tree based on the DOM tree, which is the infrastructure of mechanisms such as layout and rendering. The render tree node and the DOM tree node are not one by one correspondence, so under what circumstances do you need to create a new render node?

A) The document node of the DOM tree;

b) Visual nodes in the DOM tree, such as html,body,div, do not create render tree nodes such as head,meta,script, etc.

C) In some cases it is necessary to establish an anonymous render node that does not correspond to any node in the DOM tree;

renderobject objects are created at the same time that the DOM tree is created and, of course, the RenderObject object may be created if there is a dynamic addition to the element in the DOM. The example is the function call procedure that the RenderObject object was created.  

After the render tree is established, the layout operation calculates the relevant properties, which are the position, size, or not. With this information, the rendering engine only knows where and how to draw the elements.

RenderObject class and its subclasses

RenderObject is the node base class for the render tree and provides a common set of interfaces. It has a number of subclasses that may correspond to nodes in the DOM tree, such as RenderText, and some are container classes, such as Renderblock. The inheritance diagram of some commonly used classes is given, in which Renderblock is a very important class.  

Anonymous Renderblock Object

There are block-level elements and embedded (inline) elements in the CSS. Inline elements behave as row layouts, meaning that these elements are displayed as rows. Take the ' div ' element as an example, if you set the property ' style ' to ' display:inline ', then that is an inline element, then it may be on the same line as the previous element, and if the element is not set, then the block-level element is displayed in the new line. Renderblock is used to represent block-level elements, in order to handle the convenience, in some cases need to establish an anonymous Renderblock object, because Renderblock children must be embedded elements or are non-embedded elements. So, when it contains two elements, it creates a block-level Renderblock node for the adjacent inline elements, then sets the node for its own children and sets these inline elements for its children.

Renderlayer Tree

The Renderlayer tree is a new tree built on the render tree. Similarly, the Renderlayer node and the render node are not one by one correspondence, but one-to-many relationships. So what are the cases where the RenderObject node needs to establish a new Renderlayer node?

A) the Renderview node corresponding to the document node of the DOM tree

b) The child node of document in the DOM tree, which is the Renderblock node corresponding to the HTML node

c) an explicit CSS location

D) objects that have transparency effects

e) The node has an overflow (overflow), alpha or reflective effect

f) Canvas 3D (WebGL)

g) The RenderObject object corresponding to the video node

Renderlayer when creating a RenderObject object, it is created at the same time if needed, and it is also possible to update the style of the page when executing the JavaScript code so that a new renderlayer is created.

# # An example

Said so much, a heap of classes, a set of rules, sounds too abstract, not too easy to understand, then a specific render tree and Renderlayer tree in the end what is it? To visualize the render tree and Renderlayer tree, here is a concrete example to explain and illustrate. First, let's look at a simple HTML page with the source code shown below.

This HTML source code is parsed by WebKit and generates a DOM tree. The main structure of the DOM tree for this code is shown in the ' Dom Tree ' section of the first image of this chapter. When the DOM tree is generated, WebKit also establishes a render tree, as stated above, and the render tree of the code is printed as the text information shown.

Again, take a look at the third layer. Because you created a Webgl3d context object from canvas, you need to regenerate a new layer.

Finally, let's explain the creation time of the three layer. The first and second layers are created after the DOM tree is created, and the third layer tests the resource load after parsing and executing the following JavaScript code.

Based on the above description, I believe you have a certain understanding of the render tree and the Renderlayer tree. Now let's recall the first picture of this chapter. The diagram actually gives the example HTML page in the WebKit of the three trees in the corresponding relationship (select only the important part), I believe you now know what they mean.

Source code Directory

Webkit/Source/webcore/rendering  Webkitwebkit/ source/webcore/dom< Span class= "pun" >/ Domwebkit/source/ Webcore/html/ html page, which are based on domnode            

WebKit Rendering Basics (reprinted in Learning ...) )