How browsers work----The rendering engine（1）

The responsibility of the rendering engine is well... Rendering, that is display of the requested contents on the browser screen.
By default the rendering engine can display HTML and XML documents and images. It can display other types through a plug-in (a browser extension). An example is displaying PDF using a PDF viewer plug-in. We will talk about plug-ins and extensions in a special chapter. In this chapter we will focus on the main use case - displaying HTML and images that are formatted using CSS.
rendering engine的职责是在屏幕上显示请求到的内容。rendering engine缺省可以显示HTML、XML和图片，通过插件可以显示其他类型的信息，比如PDF。在这一章，我们主要关注结合CSS显示HTML、图片。

Rendering engines


Our reference browsers - Firefox, Chrome and Safari are built upon two rendering engines. Firefox uses Gecko - a "home made" Mozilla rendering engine. Both Safari and Chrome use Webkit.
Webkit is an open source rendering engine which started as an engine for the Linux platform and was modified by Apple to support Mac and Windows. See http://webkit.org/ for more details.

我们研究的浏览器主要使用了两种rendering engines，Fiefox使用Gecko，Safari和Chrome使用Webkit。

The main flow


The rendering engine will start getting the contents of the requested document from the networking layer. This will usually be done in 8K chunks.
rendering engine先从网络层请求文档，8k为一个单位

After that this is the basic flow of the rendering engine:

The rendering engine will start parsing the HTML document and turn the tags to DOM nodes in a tree called the "content tree". It will parse the style data, both in external CSS files and in style elements. The styling information together with visual instructions in the HTML will be used to create another tree - the render tree.

rendering engine首先解析HTML文档生成一颗content tree。它会把样式数据解析到样式元素。HTML里的样式信息和可视化指令将被用来生成另一棵树----render tree。


The render tree contains rectangles with visual attributes like color and dimensions. The rectangles are in the right order to be displayed on the screen.

render tree含有一批长方形，这些长方形含有可视化属性，比如颜色和尺寸。这些长方形的顺序就是显示在屏幕上的顺序。


After the construction of the render tree it goes through a "layout" process. This means giving each node the exact coordinates where it should appear on the screen. The next stage is painting - the render tree will be traversed and each node will be painted using the UI backend layer.

构建完render tree后就该布局了。布局就是给每个node设置正确的显示坐标信息。下一个阶段是绘制----render tree会遍历每个node并使用UI backend layer来绘制


It's important to understand that this is a gradual process. For better user experience, the rendering engine will try to display contents on the screen as soon as possible. It will not wait until all HTML is parsed before starting to build and layout the render tree. Parts of the content will be parsed and displayed, while the process continues with the rest of the contents that keeps coming from the network.

要注意理解这个过程是渐进的。为了更好的用户体验，rendering engine要在尽可能短的时间里显示内容。它不会等到HTML全部解析完后才构建render tree。一部分已经解析并显示了，而剩下的部分也许还在网络上传输。

Main flow examples

Figure 3: Webkit main flow

Figure 4: Mozilla's Gecko rendering engine main flow(3.6)

From figures 3 and 4 you can see that although Webkit and Gecko use slightly different terminology, the flow is basically the same. 
Gecko calls the tree of visually formatted elements - Frame tree. Each element is a frame. Webkit uses the term "Render Tree" and it consists of "Render Objects". Webkit uses the term "layout" for the placing of elements, while Gecko calls it "Reflow". "Attachment" is Webkit's term for connecting DOM nodes and visual information to create the render tree. A minor non semantic difference is that Gecko has an extra layer between the HTML and the DOM tree. It is called the "content sink" and is a factory for making DOM elements. We will talk about each part of the flow:

从图3和4可见，虽然Webkit和Gecko略有不同，但流程基本一致。Gecko管可视化元素树为Frame tree，每个元素是一个frame。Webkit则将其称之为RenderTree，各个元素为Render Object。Webkit称放置element的过程为layout，而Gecko称之为Reflow。Webkit称连接DOM node和可视化信息创建render tree的过程为Attachment。Gecko在HTML和DOM tree之间有一个额外的层称之为content sink，它的作用为标记DOM element。