Introduction to Rendering Engines
The browsers discussed in this article - Firefox, Chrome and Safari - are built on two rendering engines, Firefox uses Geoko - Mozilla's own rendering engine, and Safari and Chrome both use webkit.
Rendering the main process
The rendering engine first obtains the content of the requested document over the network, usually done in 8K chunks. The following is the basic flow of the rendering engine after getting the content:
Parse html to build dom tree -> build render tree -> layout render tree -> draw render tree
Here are a few concepts to explain for your convenience:
DOM Tree: The browser parses HTML into a tree-like data structure.
CSS Rule Tree : The browser parses CSS into a tree-like data structure.
Render Tree: Render Tree is generated after DOM and CSSOM are combined.
layout: With Render Tree, the browser can already know which nodes are in the web page, the CSS definitions of each node and their affiliation, so as to calculate the position of each node on the screen.
painting: According to the calculated rules, the content is painted on the screen through the graphics card.
Reflow (reflow): When the browser finds that a certain part has changed, which affects the layout, it needs to go back and re-render. Experts call this rewind process called reflow. Reflow will recursively start from the root frame of <html> and calculate the geometric size and position of all nodes in turn. Reflow is almost inevitable. Some popular effects on the interface, such as the folding and unfolding of tree-like directories (essentially the display and hiding of elements), will cause browser reflow. Mouse over, click... As long as these behaviors cause changes in the footprint, positioning, margins and other attributes of certain elements on the page, they will cause re-rendering within, around, and even the entire page. Usually we can't predict which part of the code the browser will reflow, they all affect each other.
repaint (repaint): When changing the background color, text color, border color, etc. of an element does not affect its surrounding or internal layout properties, part of the screen is repainted, but the geometric size of the element does not change.
Note: (1) Nodes with display:none will not be added to the Render Tree, but visibility: hidden will, so if a node is not displayed at first, it is better to set display:none.
(2) display:none will trigger reflow, and visibility:hidden will only trigger repaint, because no position change is found.
(3) In some cases, such as modifying the style of an element, the browser will not reflow or repaint once, but will accumulate a batch of such operations, and then do a reflow, which is also called asynchronous reflow or incremental asynchronous reflow . But in some cases, such as resize window, change the default font of the page and so on. For these operations, the browser will reflow immediately.
Let's take a look at the main process of webkit:
Let's take a look at the main process of Geoko:
Formatted visual elements are called "Frame trees" in Gecko. Each element is a frame. webkit uses the term "render tree", which consists of "render objects". In webkit, "layout" is used to represent the layout of elements, and Gecko calls it "reflow". Webkit uses "Attachment" to connect DOM nodes with visual information to build a render tree. A small non-semantic difference is that Gecko has an additional layer between the HTML and the DOM tree, called a "content sink", which is a factory for creating DOM objects.
Although Webkit and Gecko use slightly different terminology, the process is basically the same, as follows:
1. 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
2. 将CSS解析成 CSS Rule Tree 。
3. 根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
4. 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。
5. 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。
注意：上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。