If you"ve taken computer science classes you may recognize this as a "tree".

如果你上過計(jì)算機(jī)科學(xué)的課程，那么你就能認(rèn)出來它是一棵樹。

The DOM serves double duty as both the internal representation of the page, and the API exposed to script for querying or modifying the rendering.
The JavaScript engine (V8) exposes DOM web APIs as thin wrappers around the real DOM tree through a system called "bindings".

DOM具有雙重功能，它既能作為頁面的內(nèi)部展示，也能作為查詢和更改呈現(xiàn)的腳本的公開API。Javascript引擎(V8)通過一個(gè)系統(tǒng)叫做“bindings”把真實(shí)的DOM tree封裝成一個(gè)輕量的wrapper。

Having built the DOM tree, the next step is to process the CSS styles.
A CSS selector selects a subset of DOM elements that its property declarations should apply to.

構(gòu)建了DOM tree以后，下一步是處理CSS styles。一個(gè)CSS選擇器選擇它屬性聲明了應(yīng)當(dāng)應(yīng)用的DOM元素的子集。

Style properties are the knobs by which web authors can influence the rendering of DOM elements.
There are hundreds of style properties.

作者可以通過Style屬性影響DOM元素的渲染。style屬性有幾百個(gè)。

Furthermore, it"s not trivial to determine which elements a style rule selects.
Some elements may be selected by more than one rule, with conflicting declarations for a particular style property.

此外，確定樣式規(guī)則選擇哪些元素并非易事。
某些元素可能由多個(gè)規(guī)則選擇，并且具有特定樣式屬性的沖突聲明。

The layout stage runs after the style recalc stage.
First, the layout tree is constructed.  Then, we walk the layout tree, filling in the geometry data, and processing side effects of the geometry.

layout階段在style重計(jì)算階段以后進(jìn)行。首先，layout tree構(gòu)建，然后我們遍歷這個(gè)layout tree，填充幾何數(shù)據(jù)，然后處理幾何產(chǎn)生的副作用。

Today, layout objects contain both inputs and outputs of the layout stage, without a clean separation between them.
For example, the LayoutObject acquires ownership of its element"s ComputedStyle object.
A new layout system called LayoutNG is expected to simplify the architecture, and make it easier to build new layout algorithms.

如今，layout對(duì)象包括layout階段的輸入和輸出,它們之間的區(qū)分沒有那么清晰。
比如，LayoutObject獲取它元素的 ComputedStyle 對(duì)象的所有權(quán)。一個(gè)新的layout系統(tǒng)叫做LayoutNG，被期望用來簡(jiǎn)化架構(gòu)，構(gòu)建新的更簡(jiǎn)單的layout算法。

Now that we understand the geometry of our layout objects, it"s time to paint them.
Paint records paint operations into a list of display items.
A paint operation might be something like "draw a rectangle at these coordinates, in this color".
There may be multiple display items for each layout object, corresponding to different parts of its visual appearance, like the background, foreground, outline, etc.
This is just a recording that can be played back later.  We"ll see why that"s useful in a bit.

現(xiàn)在我們理解了layout object的幾何形狀，接下來就是繪制它們。
paint將paint操作記錄為一列display item。一個(gè)paint操作類似于“在這些坐標(biāo)用這個(gè)顏色繪制一個(gè)矩形”。對(duì)于每個(gè)layout object也許有多個(gè)display item，對(duì)應(yīng)視覺外觀的不同部分，比如背景，前景，輪廓等。~~~

It"s important to paint elements in the right order, so that they stack correctly when they overlap.
The order can be controlled by style.
以正確的順序paint element非常重要，只有這樣才能在元素覆蓋的時(shí)候正常顯示。這個(gè)順序能被style所控制。

It"s even possible for an element to be partly in front of and partly behind another element.
That"s because paint runs in multiple phases, and each paint phase does its own traversal of a subtree.

一個(gè)元素部分在另外一個(gè)元素的前面或者后面是可能的。因?yàn)閜aint在不同階段運(yùn)行，每次的paint階段做了自己子樹的遍歷。

The paint operations in the display item list are executed by a process called rasterization.
Each cell in the resulting bitmap holds values for four color channels.

在display item列表上進(jìn)行paint操作被稱為rasterization（光柵化）。位圖上的每個(gè)像素點(diǎn)存著四個(gè)顏色通道的值。

The rastered bitmap is stored in memory, typically GPU memory referenced by an OpenGL texture object.
The GPU can also run the commands that produce the bitmap ("accelerated rasterization").
Note that these pixels are not yet on the screen!

光柵化的位圖在內(nèi)存中存儲(chǔ)，通常是被OpenGL紋理對(duì)象引用的GPU內(nèi)存。
GPU能夠運(yùn)行產(chǎn)生位圖的命令（“加速光柵化”）
注意到此時(shí)像素并不在屏幕上。

Rasterization issues OpenGL calls through a library called Skia. Skia provides a layer of abstraction around the hardware, and understands more complex things like paths and Bezier curves.
Skia is open-source and maintained by Google. It ships in the Chrome binary but lives in a separate code repository. It"s also used by other products such as the Android OS.
Skia"s GPU-accelerated codepath builds its own buffer of drawing operations, which is flushed at the end of the raster task.

Rasterization通過一個(gè)Skia的庫產(chǎn)生OpenGL調(diào)用，Skia圍繞硬件提供了一層抽象，能理解類似路徑和貝塞爾曲線等更復(fù)雜的事情。
Skia開源且由谷歌維護(hù)。它附帶在chrome二進(jìn)制文件中，但是屬于一個(gè)多帶帶的代碼庫，同時(shí)也被其他產(chǎn)品，比如安卓系統(tǒng)使用。
Skia的GPU加速代碼路徑構(gòu)建了它獨(dú)立的繪制操作緩沖區(qū)，它會(huì)在光柵化任務(wù)結(jié)束的時(shí)候刷新。

Recall that the renderer process is sandboxed, so it can"t make system calls directly.
GL calls issued by Skia are actually proxied into a different process using a "command buffer".
The GPU process receives the command buffer and issues the "real" GL calls through a set of function pointers.
Besides escaping the renderer sandbox, isolating GL in the GPU process protects us from unstable or insecure graphics drivers.

回顧之前說的渲染進(jìn)程在沙盒中，所以并不能直接進(jìn)行系統(tǒng)調(diào)用。
Skia發(fā)起的GL調(diào)用使用“command buffer”被代理給了另一個(gè)不同的進(jìn)程。
GPU進(jìn)程接受command buffer然后通過函數(shù)指針發(fā)起“真正”的GL調(diào)用。
逃離沙盒進(jìn)程，GPU進(jìn)程中獨(dú)立的GL將從不穩(wěn)定和不安全的圖形驅(qū)動(dòng)中保護(hù)我們。

Those GL function pointers are initialized by dynamic lookup from the system"s shared OpenGL library - or the ANGLE library on Windows.
ANGLE is another library built by Google; its job is to translate OpenGL to DirectX, which is Microsoft"s API for accelerated graphics on Windows.
There are also OpenGL drivers for Windows, but historically they have not been very high quality.

這些GL函數(shù)指針通過系統(tǒng)的共享OpenGL庫（或Windows上的ANGLE庫）進(jìn)行動(dòng)態(tài)查找來初始化。
ANGLE是Google建立的另一個(gè)庫; 它的工作是將OpenGL轉(zhuǎn)換為DirectX，這是微軟在Windows上加速圖形的API。
Windows也有OpenGL驅(qū)動(dòng)程序，但從歷史上看，它們的質(zhì)量并不高。

Moving raster to the GPU process will improve performance.
It"s also needed to support Vulkan.
把光柵化移動(dòng)到GPU進(jìn)程能夠改善性能。它同時(shí)需要支持Vulkan

We have now gone all the way from content to pixels in memory.
But note that the rendering is not static.
Running the full pipeline is expensive
現(xiàn)在我們已經(jīng)走完在內(nèi)存中從content到pixels的全程了。但是渲染本身不是靜態(tài)的，走完管道全程總是代價(jià)昂貴的。

Change is modelled as animation frames.
Each frame is a complete rendering of the state of the content at a particular point in time.

Certain style properties cause a layer to be created for a layout object.
If a layout object doesn"t have a layer, it paints into the layer of the nearest ancestor that has one.
特定的樣式屬性會(huì)為layout對(duì)象創(chuàng)建layer。如果一個(gè)layout對(duì)象本身并沒有l(wèi)ayer，那么它將被繪制到最近的祖先節(jié)點(diǎn)上。

Building the layer tree is a new lifecycle stage on the main thread. Today, this happens before paint, and each layer is painted separately.

構(gòu)建layer tree是主線程上的新生命周期階段。如今，這發(fā)生在paint之前，每層都是多帶帶paint的。

After paint is finished, the commit updates a copy of the layer tree on the compositor thread, to match the state of the tree on the main thread.

paint結(jié)束后，commit將更新compositor線程上的layer tree的拷貝，以匹配主線程上tree的狀態(tài)。

Recall: raster is the step after paint, which turns paint ops into bitmaps.
Layers can be large - rastering the whole layer is expensive, and unnecessary if only part of it is visible.
So the compositor thread divides the layer into tiles.
Tiles are the unit of raster work. Tiles are rastered with a pool of dedicated raster threads. Tiles are prioritized based on their distance from the viewport.
(Not shown: a layer actually has multiple tilings for different resolutions.)

回想一下：raster在paint之后，它將paint ops轉(zhuǎn)換為位圖。
layer可能很大 - 整個(gè)layer都光柵化的成本很高，如果只有部分可見則不必要全部光柵化。
因此，compositor線程將layer劃分為tiles。
tiles是raster work的基本單位。 專門的raster線程池對(duì)tiles進(jìn)行光柵化。 根據(jù)tiles與viewport的距離確定tiles的優(yōu)先級(jí)。
（未顯示：layer實(shí)際上有不同分辨率的多個(gè)tilings。）

Once all the tiles are rastered, the compositor thread generates "draw quads". A quad is like a command to draw a tile in a particular location on the screen, taking into account all the transformations applied by the layer tree. Each quad references the tile"s rastered output in memory (remember, no pixels are on the screen yet).
The quads are wrapped up in a compositor frame object which gets submitted to the browser process.

一旦所有tiles都被光柵化，compositor線程就會(huì)生成“draw quads”。 quads類似一個(gè)命令，考慮了圖層樹應(yīng)用的所有變換在屏幕上的特定位置繪制tile。 每個(gè)quads在內(nèi)存中引用了tile的光柵輸出（請(qǐng)記住，屏幕上還沒有像素）。
quads被包裝在一個(gè)compositor frame object中，該對(duì)象被提交給瀏覽器進(jìn)程。

The compositor thread has two copies of the tree, so that it can raster tiles from a new commit while drawing the previous commit.
合成器線程有兩個(gè)樹的副本，因此它可以在繪制上一次commit時(shí)，對(duì)新的commit進(jìn)行光柵化tiles。

The browser process runs a component called the display compositor, inside a service called "viz" (short for visuals).
The display compositor aggregates compositor frames submitted from all the renderer processes, along with frames from the browser UI outside of the WebContents.  Then it issues the GL calls to draw the quad resources, which go to the GPU process just like the GL calls from the raster workers.
On most platforms the display compositor"s output is double-buffered, so the quads draw into a backbuffer, and a "swap" command makes it visible.
(On OS X we do something a little different with CoreAnimation.)
Finally our pixels are on the screen. :)

瀏覽器進(jìn)程在名為“viz”（visual的簡(jiǎn)稱）的service中運(yùn)行一個(gè)名為display compositor的組件。
display compositor聚合從所有renderer進(jìn)程提交的compositor frame，以及來自WebContents外部的browser UI的frame。 然后它發(fā)起GL調(diào)用來繪制quad資源，這些資源就像來自raster worker的GL調(diào)用一樣進(jìn)入GPU進(jìn)程。
在大多數(shù)平臺(tái)上，display compositor的輸出是雙緩沖的，因此quads繪制到backbuffer，“swap”命令使其可見。
（在OS X上，我們使用CoreAnimation做了一些不同的事情。）
最后我們的像素在屏幕上。:)