The "browser rendering principle" rendering tree constructs the relationship between the render tree and the DOM tree (reproduced in the learning ... ）

While the DOM tree is being built, the browser builds the render tree. The node (renderer) of the render tree, called the frame in gecko, is called renderer in WebKit. The renderer is created after the document is parsed and the DOM node is created, and the style information for the DOM node is computed.

In WebKit, renderer is created by the DOM node called the Attach () method. The Attach () method calculates the style information for a DOM node. Attach () is a top-down recursive operation. That is, the parent node always creates its own renderer before the child node. When destroyed, it is a bottom-up recursive operation, that is, child nodes are always destroyed before the parent node.

If the display property of an element is set to none, or if the descendant of the element inherits the Display:none,renderer, it will not be created. The sub-class of the node together with the Display property determines what renderer is created for that node. However, Visibility:hidden elements are created.

In WebKit, depending on the display property, different renderer are created, such as:

(1) Display:inline, the Renderinline type is created.

(2) Display:block, the Renderblock type is created.

(3) Display:inline-block, the Renderblock type is created.

(4) Display:list-item, the Renderlistitem type is created.

The elements of Position:relative and Position:absolute in the render tree are not the same as the location of the DOM nodes in the DOM tree.

The corresponding relationship between the DOM tree and the render tree is as follows:

The "browser rendering principle" rendering tree constructs the relationship between the render tree and the DOM tree (reproduced in the learning ... ）