Rendering engine of browser (WebKit)



The three things behind the browserThe introduction in the last article gives you a vague understanding of the composition of the browser

  1. What is a browser?
  2. Basic architecture of chrome
  3. Browser main components
  4. What is the browser kernel?
  5. JavaScript (JS) engine
  6. rendering engine

Today, let’s do the WebKit for learning and discussion.

First of all, as a sequential introduction. I’d like to introduce in detail what a browser should containchromiumWhat is included in the implementation). But consider infront endIntroduction of the topic. Only do a simple list, do not do a specific discussion; If you are interested, you can study by yourself.

Secondly, if you are familiar with it, I should focus on itJS engine (V8 event loop related); But I’d like to introduce and discuss the content in this sectionRendering engine (WebKit). For nothing else, I just like to play ~ because the audience I wrote this series is still biased towards the front end, so it involves the part that needs code intervention to explainJavaScriptTo achieve.

rendering engine

Rendering engine of browser (WebKit)

I’m used to drawing. Don’t care about ugly details
From the figure above, we can get the information about the internal parsing and execution process of the rendering engine

  1. When you visit the page, you will make a network request to get the content of the page; When hit, the cache will read directly from the memory.
  2. HTML parser is used to parse HTML, and it is partitioned by specific identifier. It can be parsed into CSS DOM JS modules.
  3. CSS parser is also used to parse CSS.
  4. DOM parser is used to analyze DOM structure( During the construction process, it is found that JS is partially executed (5). If it is asynchronous request for resources, it will not hinder parsing).
  5. The JavaScript part is thrown to the JS engine for parsing( If there is an operation, the DOM / CSS part will affect the previous parsing and hinder parsing).
  6. Build rendertree by analyzing the content above.
  7. After parsing, the rendertree is used for layout and drawing.
  8. Display the final image on the screen.

Let’s discuss the part mentioned above!

Parser parsing

There are too many words in the above parser. We get an information analysis is a very important part of the rendering engine, so we need to introduce the analysis first

Parsing documents is to transform documents into meaningful structures, that is, structures that can be understood and used by code. The result of parsing is usually a node tree representing the document structure, which is called parsing tree or syntax tree.

Parsing is based on the grammar rules (the language or format in which the document is written). For example, HTML parsing is based on the html4 / 5 specification. All parseable formats must correspond to certain grammars (composed of vocabulary and grammar rules).

Rendering engine of browser (WebKit)

The parsing process is usually divided into two sub processesLexical analysis and grammatical analysis
lexical analysis It is the process of dividing the input into a large number of tags( Segmentation can identify a large number of marked segments)Grammatical analysisIt’s the process of applying the grammatical rules of a language (what exactly is the language supposed to do).


The task of the HTML parser is to parse HTML tags into parse trees.

HTML syntax definition:
The vocabulary and syntax of HTML are defined in the specification created by W3C.

The output “parse tree” of the parser is a tree structure composed of DOM elements and attribute nodes. DOM is the abbreviation of document object model. It isHTMLThe object representation of a document is also an interface between external content (such as JavaScript) and HTML elements.
The root node of the parse tree isDocumentObject.

Rendering engine of browser (WebKit)

DOM parsing code (can’t run) first of all, you need to understand that the parsing process must be an iterative process

//Analyze regular expressions for tags < > and attributes
    var startTag = /^<([-A-Za-z0-9_]+)((?:\s+[\w-]+(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/,
        endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/,
        attr = /([-A-Za-z0-9_]+)(?:\s*=\s*(?:(?:"((?:\.|[^"])*)")|(?:'((?:\.|[^'])*)')|([^>\s]+)))?/g;
    function ParserHTML(html){
         //Receive parameter HTML

            //Match comment content
            if(html.indexOf("<!--") == 0){
            //Match start tag
            if (html.indexOf("<") == 0) {
                match = html.match(startTag);

                if (match) {
                  html = html.substring(match[0].length); // Matching interception
                  //Continue iteration
           if(html.indexOf("</") == 0){
               //Match end label operation

    //Output schematic structure
    //I can't find what I wrote before. You can try to realize it. If you have any questions, please feel free to communicate. This example is available.


Different from HTML, CSS parsing is context free syntax; It can be parsed by many parsers.
Lexical grammar (vocabulary) is defined by regular expressions for each tag

  • comment \/\*[^*]*\*+([^/*][^*]*\*+)*\/
  • num [0-9]+|[0-9]*"."[0-9]+
  • nonascii [\200-\377]
  • nmstart [_a-z]|{nonascii}|{escape}
  • nmchar [_a-z0-9-]|{nonascii}|{escape}
  • name {nmchar}+
  • ident {nmstart}{nmchar}*
  • Creating parser automatically through CSS syntax file will create bottom-up shift reduction parser. The CSS file is parsed into stylesheet objects, and each object contains CSS rules. CSS rule objects contain selectors and declaration objects, as well as other objects corresponding to CSS syntax. As follows:

Rendering engine of browser (WebKit)


At the same time of DOM tree construction, the browser will also build another tree structure: rendering tree. This is a tree composed of visual elements according to their display order, and it is also a visual representation of documents. It lets you draw content in the right order.

The webkits renderobject class is the base class of all rendering trees, which is defined as follows:

class RenderObject{
  virtual void layout();  // layout
  virtual void paint(PaintInfo);  // draw
  virtual void rect repaintRect(); // Redraw rect
  Node* node;  //  DOM node
  RenderStyle* style;  //  Compute render style
  RenderLayer* containgLayer; //render layer 
The relationship between rendering tree and DOM tree

The rendering tree corresponds to DOM elements, but not one by one. Non visual DOM elements are not inserted into the rendering tree, such as the “head” element. If the display attribute value of an element is “None”, it will not be displayed in the rendering tree (but the element with the visibility attribute value of “hidden” will still be displayed).

The example of multiple render trees is HTML with invalid format. According to CSS specification, inline elements can only contain one of block elements or inline elements. If mixed content occurs, an anonymous block rendering tree should be created to wrap the inline element.

Some render objects correspond to DOM nodes, but they are in different positions in the tree than DOM nodes. This is the case with floating and absolute positioning elements, which are out of the normal process, placed elsewhere in the tree, and mapped to the real frame, while in place is the occupying frame.


When you create a finished rendering tree, you do not include position and size information. The process of calculating these values is called layout or rearrangement.

HTML adopts the flow based layout model, which means that in most cases, only one traversal can calculate the geometric information. The elements in the back position of the flow usually do not affect the geometric characteristics of the elements in the front position, so the layout can traverse the document from left to right and from top to bottom. But there are exceptions, such as HTML table calculation needs more than one traversal (3.5).

The coordinate system is established relative to the root frame, using the upper and left coordinates.

Layout is a recursive process. It starts from the root rendering tree (corresponding to the < HTML > elements of the HTML document), and then recursively traverses some or all of the framework hierarchies to calculate geometric information for each rendering tree that needs to be calculated.

The location of the root render tree is in the upper left corner 0,0(consistent with the coordinate rules of canvas2d) its size is the view area of the browser window.
All rendering trees have onelayoutperhapsreflowMethod, each rendering tree will call the layoutmethod.


In the rendering phase, the system will traverse the rendering tree and call thepaintMethod to display the contents of the rendering tree on the screen. Drawing is done by using the basic components of user interface.

The drawing order is actually the order in which elements enter the stack style context; From the back to the front. The stack order of the block rendering tree is as follows:

  1. background color
  2. Background picture
  3. frame
  4. Offspring
  5. outline

Drawing implementation can be referred tocanvas(Canvas must learn, always pay attention to some cutting-edge actions)To understand the drawing method and process of basic elements. For example, drawingline(need coordinate base, element structure, etc.):

Rendering engine of browser (WebKit)

picture source


From the life diary of the last article: 20210521 that day is still happy (the circle of friends is still not active). 20210522. I’m not happy. 20210523, that is to say, today is generally OK, and there is no study( Work and rest (HA HA)

And then, because someone has been using wechat recently, which programming paradigm should I choose better? What programming paradigm do I use now? It’s difficult to write your own code and maintain it( Before the next issue of JS engine, I will make a brief introduction to the programming paradigm for your reference, a small episode (expected tomorrow).

come on. If you have any questions, please leave a message at any time. You will reply when you see it. As for the composition of the last piece, well, it’s my pigeon. I don’t see anyone urging me. I’m too lazy to draw

Related references

  1. The morphology and grammar of CSS
  2. Processing model
  3. WebCore Rendering
  4. WebKit website
  5. Introduction to WebKit
  6. Canvas related