How the browser works: Build the rendering tree

4. Rendering tree construction when Dom is built, the browser constructs another rendering tree, and the visual elements on this tree will be displayed in the correct order. This is a visual representation of the document. The purpose is to make visual elements render their content in their order. In Firefox, these elements are called "frames" in the rendering tree. WebKit uses the term Renderer or rendering object. A Renderer knows how to layout and draw itself and its children. The webkits rendering object class. The Renderer-based class has the following definitions: Class renderobject {virtual void layout (); Virtual void paint (paintinfo); Virtual void rect repaintrect (); node * node; // The Dom noderenderstyle * style; // The computed stylerenderlayer * containglayer; // The containing Z-index layer} renders a rectangular area, which usually corresponds to the CSS box of a node, it is also described in the css2.0 rule, which contains geometric information, such as width, height, and position. The box type is affected by the "display" style attribute related to the node. The following is the WebKit code. Based on the display attribute, a DOM node should be created for the Renderer of the type. Renderobject * renderobject: Createobject (node * node, renderstyle * style) {document * Doc = node-> document (); renderarena * arena = doc-> renderarena ();... renderobject * o = 0; Switch (style-> display () {case none: break; Case inline: O = new (ARENA) renderinline (node); break; Case block: O = new (ARENA) renderblock (node); break; Case inline_block: O = new (ARENA) renderblock (node); break; Case list_item: O = new (are Na) renderlistitem (node); break;...} return O;} Considering the element type, for example, Form Controls and tables have special frames. The Input Form Control in chrome. display: inline-block; Table-> display: tablethead-> display: Table-header-group; tr-> display: table-row; tbody-> display: Table-row-group; Th/TD-> display: Table-cell; in WebKit, if an element wants to create a special Renderer, it will override the createrender method, and the Renderer points to a style object that contains non-geometric information. 1. the rendering tree is associated with the DOM tree Renderer and corresponds to DOM elements, but it is not a one-to-one correspondence. Invisible elements are not inserted into the rendering tree, such as the "head" element, the display attribute of this element is set to "NONE" and will not be displayed in the rendering tree (the element with the visibility: Hidden setting will appear in the DOM tree ). Some DOM elements correspond to several visible objects (Renderer). These elements have complex structures and cannot be described as single rectangles, for example, the Select element has three Renderer: one display area, one drop-down box, and one drop-down button. In addition, when the text is separated into multiple rows, the new line will be added as an additional Renderer because the width is insufficient to display in one row. In another example, several Renderer breaks the HTML. According to CSS specifications, a row element must contain a unique block element or only inline element. In case of mixed content, the anonymous block Renderer will be created and wrapped with that inline element. Some Renderer objects correspond to a DOM node, but not in the same place in the tree. The floating and absolute positioning elements are separated from the stream and placed in different places in the rendering tree, and maps to real frames. It should be a placeholder framework.: 4.1.1 rendering tree and corresponding DOM tree

2. The Stream construction tree is in Firefox. This introduction is registered as a DOM update listener. This section describes how to create a delegate frame to "frameconstructor" and a constructor (style calculation). A framework is created. In WebKit, the process of interpreting styles and creating a Renderer is called "attachment ". each Dom node has an "Attach" method. The attachment is synchronous. When a node is inserted into the DOM tree, the "Attach" method of the new node is called. In the rendering result of the tree root node, HTML and body labels, the root rendering formation corresponds to the top block of the CSS specification called the inclusion block-containing all other blocks. Its size is the size of the display area in the browser window. Firefox calls it viewportframe and WebKit renderview. This is the rendering object of the document node. The rest of the Construction trees are inserted as a DOM node. For more information about this topic, see css2-examples. Styles include styles from various style sheets, inline styles, and visible attributes in HTML tags. They are then translated into matching CSS style attributes. The style sheet originated from the default style sheet of the browser, provided by the author of the style sheet page and the user style sheet-these Style Sheets provide the user's browser (the Browser allows you to define your favorite style. In Firefox, for example, by placing a style sheet in the Firefox configuration file folder. Style calculation brings some difficulties: a) style data is a very large structure, listing multiple style attributes, which may cause memory problems. B) Finding matching rules for each element may cause performance problems if it is not optimized. Traversing each element in the entire rule list finds a heavy task. The selector can have a complex structure, which may cause the matching process to start on a seemingly promising road to prove futile and must try another path. Example-this type of hybrid selector: div Div {...} this means that the rule applies to the child Div element of the three divs and selects a specific path on the tree to check. This may require traversing the node tree, but it is only the descendant of two divs, if you do not use this rule, you need to try it along another path. C. The application of the rule involves a very complex cascade rule and the rule-defined hierarchy. Let's take a look at how browsers face these problems: 1) share Style Data WebKit nodes reference style objects (rendering styles). In some cases, these objects can be shared between nodes, these nodes must be sibling or table sibling nodes, and these elements must be in the same mouse State (for example, one node cannot be in the hover, And the other node is not) element cannot have ID tag name must match class attribute must match corresponding attribute must be the same link status must match focus status must match cannot have element affected by attribute selector element cannot have in-row style attribute cannot there is a valid sibling selector, when any sibling selector encounters, WebCore simply throws a global conversion and invalidates the style sharing of the entire document when they are displayed. These include the + selector and first-child and: a selector such as last-child. 2) Firefox rule tree Firefox uses two trees to simplify style computation-Rule tree and style context tree. WebKit also has style objects, however, they are not stored in a tree like a style context tree, but are directed by the DOM node to its related style. For example: 4.3.2 Firefox style context

The style context contains the final values. These values apply all matching rules in the correct order and convert them from logical values to specific values. For example, if the logical value is the percentage of the screen, it is converted to an absolute unit by calculation. The use of the style tree is really clever, it makes these values shared in the node do not need to be calculated multiple times, but also saves storage space. All matching rules are stored in the Rule tree, and the underlying node in a path has the highest priority. This tree contains the paths where all matching rules are found: it can be cleverly understood that each path corresponds to a node, and the path contains all the rules matched by the node ). The rule tree does not calculate all nodes from the beginning. Instead, when a node needs to calculate the style, the corresponding calculation is performed and the calculated path is added to the tree. We think of the path in the tree as a word in the dictionary. Suppose we have calculated the following rule tree: 4.3.2.1

If you need to match rules for another node in the content tree, now you know the matching rules (in the correct order) for the B-E-I, because we have calculated the path A-B-E-I-L, therefore, this path already exists in the tree, and there is little work left. Now let's take a look at how to save the tree. A) Structured style contexts are divided by structure. These structures include style information for specific categories such as border or color. All features in a structure are not inherited or non-inherited. The inherited features are inherited from its parent unless the elements have their own definitions. If the reset feature is not defined, the default value is used. The style context tree caches the complete structure (including the calculated value). In this way, if the underlying node does not provide a definition for a structure, the structure cached by the upper node is used. B) Use the rule tree to calculate the style context. When a style is calculated for a specific element, calculate a path in the Rule tree or use an existing one, then, use the rules in the path to fill the new style context. Starting from the underlying node of the style, it has the highest priority (usually the most specific selector) and traverses the rule tree, until the structure is filled up. If no required structure rule is defined on the Rule node, the rule goes up along the path until it is found. If no rule definition for the structure is found, if the structure is inherited, the structure of the parent in the content tree is found. In this case, we also successfully shared the structure. If the structure is reset, the default value is used. If a value is added to a specific node, You need to perform some additional calculations to convert it to the actual value, and then cache the value on the node on the tree so that its children can be used. When an element and its sibling element point to the same tree node, the complete style context can be shared by them. Let's look at an example: assume that the following HTML <HTML> <body> <Div class = "Err" id = "div1"> <p> This Is A <SPAN class = "big"> big error </span> This is also a <SPAN class = "big"> very big error </span> error </P> </div> <Div class = "Err" ID = "div2"> another error </div> </body> 



Suppose we parse HTML and encounter the second Div tag. We need to create a style context for this node and fill in its style structure. We matched the rules and found that the rules for matching the DIV are 1, 2, and 6. We found that there is a path 1 and 2 that we can use in the Rule tree, we only need to add a node for Rule 6 to the following (that is, F in the Rule tree ). Create a style context and place it in the Context tree. The new style context points to node F in the Rule tree. Now we need to fill in the style context, starting from filling the margin structure. Since the last rule node does not add the margin structure, follow the path up, until we find the structure calculated by inserting the node before the cache, we find that B is the closest node with the specified margin value. Because the color structure is defined, the cache structure cannot be used. Since color has only one attribute, no other attribute needs to be filled up along the path. Calculate the final value (convert the string to RGB) and cache the calculated structure. The second span element is simpler. After rule matching, it is found that it points to rule G. Like the previous span, since a sibling node points to the same node, it can share the complete style context, it only refers to the context of the previous span. Because the structure contains rules inherited from the parent, the context tree is cached (the color feature is inherited, but Firefox regards it as a reset and caches it in the Rule tree ). For example, if we add rules for paragraph text: P {font-family: verdana; font size: 10px; font-weight: bold} then the child node Div of P in the content tree will share the same font structure as its parent. This happens when the font rule is not specified for this Div. There is no rule tree in WebKit, And the matched declaration will be traversed four times. First, the high-priority attribute of non-important will be applied (the reason is that these attributes are applied first, it is because others depend on them-such as display), followed by high-priority important, followed by general-priority non-important, and finally the General-priority important rules. In this way, multiple properties will be processed in the correct cascade order, and the last one will take effect. To sum up, shared style objects (the structure is complete or partial) Solve Problems 1 and 3. Firefox's rule tree helps apply rules in the correct order. 3) Rules are processed to simplify the matching process. style rules come from the following sources: CSS rules in external style sheets or style labels P {color: blue} · In-row style attributes <p bgcolor = "blue"/> · HTML visual attributes (mapped to the corresponding style rules) are easily matched with the next two elements, because their style attributes and HTML attributes can map elements as keys. As mentioned in question 2 above, CSS rule matching may be tricky. To solve this problem, you can first process the rules to make them more accessible. After the style sheet is parsed, the rule adds some hash ing based on the selection operator. The ing can be based on the ID, class, label name, or any comprehensive ing that does not belong to these categories. If the separator is ID, the rule will be added to ID ing. If it is a class, it will be added to class ing. This process makes it easier to match rules. You do not need to view every declaration. We can find the relevant rules of an element from the ing, this optimization reduces the workload by 95 + % during rule matching. Let's take a look at the following style rules: P. error {color: Red} # messagediv {Height: 50px} Div {margin: 5px} the first rule is inserted with class ing, the second rule is inserted with ID ing, and the third rule is tag ing. The following HTML snippet: <P class = "error"> An error occurred </P> <Div id = "messagediv"> This is a message </div> first, find the rule corresponding to the P element, class ing will contain an "error" key and locate P. error rules. Div has related rules in ID ing and tag ing. The rest of the work is to find out which rules are correctly matched by the key. For example, if the DIV rule is table Div {margin: 5px}, this is also generated by TAG ing, because the key is the rightmost selector, but it does not match the DIV element here, because the DIV here does not have the table ancestor. WebKit and Firefox both perform this operation. 4) apply the rule style object in the correct cascading order with the attributes corresponding to all visible attributes. If the attributes are not defined by any matching rules, some features can be inherited from the style object of the parent, and some use the default values. This problem occurs because there are more than one definition. Here we use cascading order to solve this problem. A) a cascading declaration of a style attribute in a style sheet may appear in several style sheets or multiple times in a style sheet. Therefore, the order in which rules are applied is crucial, this order is the cascade order. According to the css2 specification, the cascade order is (from low to high): 1. browser Statement 2. user Declaration 3. general statement of the author 4. author's important statement 5. the user important declares that browser declarations are the least important. Users can only overwrite the author's declarations when the declarations are marked as important. Declarations with the same level will be sorted by specifity and the order in which they are defined. HTML visualization properties are converted to matched CSS declarations, which are considered as author rules with the lowest priority. B) specifity defined in the specifitycss2 specification is as follows: · if the declaration comes from the style attribute rather than a selector rule, 1 is counted; otherwise, 0 (= A) is counted) · calculate the number of ID attributes in the selector (= B) · calculate the number of classes and pseudo classes in the selector (= C) · calculate the number of element names and pseudo elements in the selector (= d) connected to four numbers a-B-c-d (using a large base computing system) to obtain specifity. The base number used here is defined by the highest base number in the category. For example, if a is 14, The hexadecimal format can be used. In different cases, when a is 17, the Arabic numerals 17 must be used as the base. In this case, the html body Div... (There are 17 tags in the selection operator, which is generally unlikely ). * {}/* A = 0 B = 0 C = 0 D = 0-> specificity = 0, 0, 0 */Li {}/* A = 0 B = 0 C = 0 d = 1-> specificity = 0, 0, 1 */Li: first-line {}/* A = 0 B = 0 C = 0 d = 2-> specificity = 0, */ul Li {}/* A = 0 B = 0 C = 0 d = 2-> specificity =, 0, 2 */ul ol + Li {}/* A = 0 B = 0 C = 0 d = 3-> specificity = 0, */H1 + * [rel = up] {}/* A = 0 B = 0 C = 1 d = 1-> specificity =, */ul ol Li. red {}/* A = 0 B = 0 C = 1 d = 3-> specificity = 0, 0, 1, 3 */Li. red. level {}/* A = 0 B = 0 C = 2 D = 1-> specificity = 0, 0, 2, 1 */# x34y {}/* A = 0 B = 1 c = 0 D = 0-> specificity = 0, 1, 0, 0 */style = ""/* A = 1 B = 0 C = 0 D = 0-> specificity =, */C) after the sorting rule is matched, rules need to be sorted in a cascading order. WebKit first uses Bubble sorting to sort small lists and then combines them into a large list. WebKit performs sorting by repeating the ">" Operation for rules: static bool operator> (cssruledata & R1, cssruledata & R2) {int spec1 = r1.selector ()-> specificity (); int spec2 = r2.selector ()-> specific Ity (); Return (spec1 = spec2): r1.position ()> r2.position (): spec1> spec2;} 4. in a gradual process, WebKit uses a flag to identify that all top-level style sheets have been loaded. If the style is not fully loaded during attch, place the placeholder and mark it in the document, once the style sheet is loaded, it is recalculated.