This is the 17th day of my participation in Gwen Challenge

For Web front-end developers, browsers are all too familiar. We probably all know that browsers have a rendering engine, which parses and renders HTML files before rendering them to the user. However, many students are not clear about the specific rendering principle and process estimation. However, it is important for front-end developers to understand how browsers work.

What is a browser

Browser can be considered to be the most widely used software, before we understand the mechanism of rendering, we know first to get to know we are familiar with the browser, the browser’s main function is to present the user requested web resources, it needs to request from the server resources, and displays it in the browser window, the format of the resources are often HTML, Also includes PDF, image, and other formats

Major browsers

According to StatCounter’s latest data, there are six major desktop browsers: Chrome, Firefox, IE, Safari, Edge, and Opera.

On mobile, Chrome is still strong and UC is good, but… I won’t say.

If it is the full platform UC Browser also accounts for a large market. (It’s nice to see Internet Explorer losing ground and Chrome gaining ground, but of course the domestic situation may be worse)

The main components of the browser

The main components of the browser include:

  • The User Interface – includes the address bar, back/forward buttons, bookmarks directory, etc. This is what you see other than the main window that displays the page you requested.
  • Browser Engine – Interface for querying and manipulating the rendering engine.
  • Rendering Engine – The Rendering engine parses the content requested by the user (e.g. HTML or XML, the Rendering engine parses THE HTML or XML and related CSS, and returns the parsed content)
  • Networking – Used to complete network calls, such as HTTP requests, with platform-independent interfaces that work on different platforms.
  • UI Backend – Used to draw basic components such as composite selection boxes and dialogs. It has a common interface that is not specific to a platform and uses the user interface of the operating system at the bottom.
  • JavaScript interpreter – Used to interpret and execute JS code.
  • Data storage – belongs to the persistence layer, the browser needs to save all kinds of Data similar to cookies in the hard disk, HTML5 defines the Web database technology, which is a lightweight complete client storage technology

Enter the url to render the page

Regardless of redirection, there are roughly five steps to entering a URL into a page rendering:

  • The DNS query
  • A TCP connection
  • An HTTP request is a response
  • Server response
  • Client-side rendering

The focus of this article is on step 5, client rendering, or browser rendering

Browser rendering

The rendering engine’s job is to render, that is, to display the requested content in the browser window. By default, the rendering engine can display HTML, XML documents, and images, but it can also display other types of data with plug-ins (a browser extension), such as the PDF reader plug-in, which displays PDF format

Browser kernel

Major browsers use different kernels, which can be roughly divided into the following categories:

  • Trident kernel: IE

  • Gecko kernel: FireFox

  • Webkit kernel: Chrome, Safari

Key render path

When the browser receives an HTML page from the server, it goes through a number of steps to render it on the screen. The browser completes the Rendering sequence, which is called the Critical Rendering Path. Here’s the Rendering engine’s basic Rendering Path:

// / execute JavaScript // // // parse HTML to build A DOM tree -> parse CSS to build a CSSOM tree -> Build a Render tree -> layout a render tree -> Draw a render treeCopy the code

Here are a few concepts:

  • DOMTree: A data structure that the browser parses HTML into a tree.
  • CSSRuleTree: The browser parses the CSS into a tree data structure. CSSOM is short for CSS Object Model. It is similar to DOM, but only for CSS, not HTML.

  • RenderTree: DOM and CSSOM are combined to generate a RenderTree.
  • Layout: With Render Tree, the browser already knows what nodes are on the page, their CSS definitions, and their dependencies to figure out where each node is on the screen.
  • Painting: Work out the rules and use the graphics card to paint the content on the screen.
  • Reflow: When the browser finds that something has changed that affects the layout and needs to go back and rerender, this process is called reflow. Reflow will recursively calculate the geometry and position of all nodes starting from the root frame. Reflow is almost inevitable. Some of the effects currently present in the interface, such as the collapse and expansion of tree directories (essentially the display and hiding of elements), will cause reflow in the browser. Mouse slide, click… As long as these behaviors cause changes in the space area, positioning mode, margin and other attributes of some elements on the page, it will cause it to be inside, around or even the whole page to be re-colored. It is often impossible to predict which parts of the code the browser will reflow, and they all affect each other.
  • Repaint: Changing an element’s background color, text color, border color, etc., without affecting its surrounding or interior layout, a portion of the screen is repainted, but the element’s geometry remains the same.

Rendering flow chart

The Webkit rendering engine flow is shown below:

The Gecko rendering engine flow is shown below:

As you can see from the two figures above, webKit and Gecko’s main flow is basically the same, although they use slightly different terminology:

  • The browser parses the HTML into a DOM tree, which is built by deep traversal: all children of the current node are built before the next sibling of the current node is built.
  • Parse the CSS into CSS Rule Tree.
  • Construct Rendering Tree according to DOM Tree and CSS Rule Tree. Note: Rendering Tree is not the same as DOM Tree, because something like Header or display: None doesn’t need to be in the Rendering Tree.
  • With Render Tree, browsers already know what nodes are in a web page, their CSS definitions, and their dependencies. The next step is called Layout, which, as the name suggests, calculates the position of each node on the screen.
  • The next step is to draw, which is to traverse the Render tree and draw each node using the UI back-end layer.

Differences between the two:

  • Gecko calls a tree of visible formatting elements a frame tree, and WebKit uses the term Render tree to name a tree of rendered objects.
  • The positioning layout of elements in Webkit is called layout, whereas in Gecko it is called backflow.
  • Webkit calls the process of using DOM nodes and style information to build a Render tree as Attachment. Gecko adds a layer between HTML and DOM tree, called content pool, which is equivalent to a factory for making DOM elements

The phases in the process are discussed below

Build a DOM tree

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation of a document and defines a way for that structure to be accessed from within the program to change the structure, style, and content of the document. DOM parses a document as a structured collection of nodes and objects (objects that contain properties and methods). In short, it connects a Web page to a script or programming language.

After the browser gets the HTML byte data from the network or hard disk, it goes through a process to parse the byte into a DOM tree

Suppose the browser gets the following HTML document returned:

<! doctype html> <html> <head> <link rel="stylesheet" href="./theme.css"></link> <script src="./config.js"></script> </title> </head> <body> <h1 class="title"> </h1> <p> </body> </html>Copy the code

First, the browser parses the document from top to bottom to build a DOM tree, as follows:

Build CSSOM tree

Called the CSSOM tree CascadingStyleSheetsObjectModel cascading style sheets (CSS) object model, it has to do with the meaning of the DOM tree were similar, but it is a set of CSS object.

Once the browser gets the data from the external CSS file, it starts building the CSSOM tree just as it would a DOM tree, and the process is no different.

The CSS style content is as follows:

html, body { width: 100%; height: 100%; background-color: #fcfcfc; } .title { font-size: 20px; } .footer { font-size: 12px; color: #aaa; }Copy the code

Constructing the CSSOM tree is shown as follows:

In order to see the construction of this key rendering path visually, we can use the Performance (i.e. Timeline) function in Chrome Developer Tools to view it. The following is the Baidu home page:Open the Event Log to see the detailed rendering process

Create a Render tree

After building the DOM tree and the CSSOM tree, the browser only has two independent object sets. The DOM tree describes the structure and content of the document, and the CSSOM tree describes the style rules applied to the document. To render a page, you need to combine the DOM tree and the CSSOM tree to form the rendering tree

Render tree and its corresponding DOM tree are shown as follows:

  • In the figure, the rendering tree viewport is the viewport, which is the initial containing block of the document, and Scroll represents the scrolling area
  • The browser will traverse each visible node starting at the root of the DOM tree. (Invisible nodes do not need to be rendered to the page. Invisible nodes also include nodes whose display: None property is used by CSS. The semantics are to hide the element, but the element still occupies layout space, so it will be rendered as an empty box).
  • For each visible node, find the appropriate CSS style rule and apply it.
  • Once the render tree is built, each node is visible and contains its content and the style of the corresponding rule.

Once the rendering tree is built, the browser has the content and style of each visible node. The next step is to calculate the exact location and size of each node in the window, known as the layout phase or refayout.

Layout or reflow (relayout)

This process is the render tree by rendering object information, calculate each render the object’s position and size, put it in the correct position of the browser window, and sometimes we will be done in a document layout is to modify the DOM, after this time may need to layout, can also be referred to as reflux, essentially is a process of layout, Each render object has a layout or backflow method that implements its layout or backflow.

Flow (flow)

HTML uses a flow-based layout, which is arranged from left to right and top to bottom. For details, see the CSS positioning mechanism.

Global layout versus local layout

The layout of the rendering tree can be divided into global and local, global means to rearrange the entire rendering tree, such as when we change the size or direction of the window or modify the size of the root element or font size; A local layout can be a rearrangement of a part of the render tree or a render object.

Dirty bit System

Most Web applications operate on the DOM quite frequently, which means that the DOM needs to be laid out and reflowed all the time, and small changes can trigger reflowback of the entire render tree, which is obviously bad. To avoid this, browsers use dirty bit systems. Backflow is required when only one render object has changed or a render object and its children have dirty bits.

There are two types of dirty bit values that represent the desired layout:

  • “Dirty” – Changes itself and requires backflow
  • “Children are dirty” – Children have changed and need to backflow

The layout process

The layout phase will start from the root node of the rendering tree, and then determine the exact size and position of each node object on the page, i.e. corresponding to the root element of the HTML document. Then the next level of rendering objects, such as corresponding to the element, and so on, and then recursively calculate the geometric information (position and size) of each render object in turn.

CSS uses a mental model called the box model to represent the distance between each node and other elements. It includes: margins, borders, padding, and actual content. Every label on a page is a box. The output of the layout phase is a box model that accurately captures the exact position and size of each element on the screen, and all relative measurements are converted to absolute pixel values on the screen.

The layout flow of each render object is as follows:

  • 1. Calculate the width of this render object;
  • 2. Iterate through all the children of the render object, in order:
  • 2.1 Set the coordinates of child render objects
  • 2.2 Determine whether the layout or backflow method of the child rendering object needs to be triggered to calculate the height of the child rendering object.
  • 3. Set the height of the render object: Set the height of the child render object according to the cumulative height, margin and padding height;
  • 4. Set the dirty bit value of this render object to false.

Forced backflow Is triggered when a document is manipulated again after a rendered tree layout is complete, changing the content or structure of the document, or elements are positioned, requiring a layout such as:

  • DOM operations such as add, delete, modify, or move;
  • Change content;
  • Activate pseudo class;
  • Accessing or changing certain CSS properties (including changing style sheets or element class names or using JavaScript operations);
  • Browser window changes (scrolling or sizing changes)

Finally, there is the paint or repaint phase, where the browser UI component traverses the render tree and calls the paint method of the render object to display the content on the screen. It is also possible to modify the DOM later and redraw the render object. For the relationship between draw and redraw, see layout and reflow.

Similar to layout, global and local rendering is also divided into global and local rendering, that is, the entire rendering tree or some render objects are drawn.

Trigger redraw We already know that many operations can trigger backflow, but when can redraw be triggered? Usually, changing the visual style of an element such as background-color, visibility, margin, padding, or color will trigger global or local redraw.

Now let’s review the entire process of the browser’s key render path:

  • Process HTML tag data and generate a DOM tree.
  • Process CSS markup data and generate CSSOM trees.
  • Merge the DOM tree with the CSSOM tree to generate the render tree.
  • Traverse the render tree to start the layout, calculating the location of each node.
  • Draw each node to the screen.

In this article we have covered the rendering mechanism of the browser. Understanding this will help us to better optimize performance.

The above! Last rule, post my blog, welcome to follow

Please pay attention to the official number: Full stack flying Squadron