Underlying knowledge of WEB Front-end: How browsers Work (2)-rendering engine

The previous chapter briefly describes the knowledge about browser mechanisms. From the perspective of the basic architecture, we can also see that the most important aspect of the browser is the rendering engine (also called the typographical engine ), the root cause of many page compatibility problems can also be said to be this. 360 browser HTML5 run points again high (http://html5test.com/), UI and interaction again how different, the kernel is still the same. Well, let's take a closer look inside the rendering engine.

Rendering Engine (The rendering engine) Brief Description

The role of the rendering engine, literally, is to render the HTML, XML, IMAGES, and other resources returned from the server and display them to the end user. Using the browser plug-in (plug-in or browser extension) technology, it can also display resources in other document formats, such as PDF. later articles will explain this technology, this chapter focuses on the primary function of the rendering engine, that is, displaying HTML and image results in CSS styles through the rendering engine.

As mentioned earlier, firefox, chrome, and safari have two rendering engines. firefox uses gecko, safari, and chrome (followed by opera later) to use webkit. webkit is an open-source rendering engine that can only be used on the linux platform at first. Later, apple expanded its source code so that it can run on mac and windows platforms, as a rising star, chrome has expanded and promoted its columns to become a standard and popular rendering web engine. For more information about webkit, see http://webkit.org /.

Basic rendering process

After the requested resource reaches the rendering engine through the browser's network layer, rendering starts. The basic rendering process is shown in figure:

　　

The rendering engine first parses the HTML document and converts it to a DOM tree. This is the first step. Next, no matter the inline style, the external style or the CSS style introduced by the embedded system will be parsed, rendering another render tree used to render the DOM tree ), the rendering tree contains rectangles with color, size, and other display attributes. The order of these rectangles is the same as that of the display order. Then, the layout of each node in the rendering tree is processed to determine its display position on the screen. The last step is to traverse the rendering tree and draw each node using the UI backend layer mentioned in the previous chapter.

The above steps are a gradual process. To improve the user experience, the rendering engine tries to display the results to the end user as quickly as possible. It does not create and layout the rendering tree until all HTML files are parsed. It first displays the received local content while obtaining the document content from the network layer.

Different rendering engines

The above just introduces the general processing process of the rendering engine. The specific steps for different rendering engines may be different, take the common webkit and gecko for example.

The first is the detailed rendering process of webkit:

　　

Gecko rendering process of Firefox and other browsers:

 

 

From the above two figures, we can see that although the two use different "professional terms", we can see from the figure that the rendering process of the two is similar, we can separate the specific process in a unified manner. The next four chapters will provide detailed descriptions based on the four main rendering processes.