Learn how browsers work-rendering engine 1

From the infrastructure we can also see that the browser's play is actually the rendering engine (also known as the typesetting engine), many of the source of page compatibility problems can be said to be derived from this. Well, let's go deep inside the rendering engine and take a closer look.

From the infrastructure we can also see that the browser's play is actually the rendering engine (also known as the typesetting engine), many of the source of page compatibility problems can be said to be derived from this. 360 Browser HTML5 run high (http://html5test.com/), UI and interaction again how different, the kernel is still the same. Well, let's go deep inside the rendering engine and take a closer look.

Rendering Engine ( The rendering engine ) briefly

The job of the rendering engine, as it literally means, is to take care of the Html,xml returned from the server, or the rendering of resources such as images, and display it to the end-user. Through the browser plug-in (plug-in or browser extension) technology, it can also display some other document format resources, such as PDF, later articles will be described for this technology, this chapter focuses on the primary function of the rendering engine, that is, the The rendering engine shows CSS-styled HTML and picture results.

As already mentioned, Firefox,chrome,safari includes two rendering engines, and Firefox uses Gecko,safari and Chrome (which later opera follows) to use WebKit. WebKit is an open-source rendering engine that can only be used on Linux platforms, and Apple Apple has expanded its source code to run with Mac and Windows platforms, with a number of extensions and promotions from the rising Star Chrome. Making it more and more popular as a standard rendering Web engine, WebKit details can be found in http://webkit.org/.

Basic rendering process

The rendering work begins when the resource requested by the user reaches the rendering engine through the network layer of the browser. Each render document typically does not exceed 8K of data blocks, where the underlying rendering process is as follows:

The rendering engine first parses the HTML document into a DOM tree, which is the first step. Next, either inline, inline or inline CSS styles are parsed, rendering another tree to render the DOM tree-the render tree, which contains rectangles with display properties such as color, size, and the order of the rectangles in the order in which they are displayed. Then it is the layout of each node of the render tree to determine where it appears on the screen. The final step is to traverse the render tree and draw each node with the UI back-end layer mentioned in the previous chapter.

The above steps are a gradual process, in order to improve the user experience, the rendering engine tries to show the results to the end user as quickly as possible. It does not wait until all of the HTML has been parsed to create and layout the render tree. It takes the content of the document from the network layer and displays the local content that has been received.

Different rendering engines for different rendering processes

The above just describes the rendering engine general processing process, for different rendering engine specific steps may be different, take the common WebKit and gecko.

The first is the detailed rendering process for WebKit:

Gecko rendering process for browsers such as Firefox:

Learn how browsers work-rendering engine 1