瀏覽器渲染展示原理

小標題起得有點大，我們知道，不同瀏覽器的核心（渲染引擎，Rendering Engine）是不一樣的，例如現在最主流的 chrome 瀏覽器的核心是 Blink 核心（在Chrome（28及往後版本）、Opera（15及往後版本）和Yandex瀏覽器中使用），火狐是 Gecko，IE 是 Trident ，瀏覽器核心負責對網頁語法的解釋並渲染（顯示）網頁，不同瀏覽器核心的工作原理並不完全一致。

所以其實下面將主要討論的是 chrome 瀏覽器下的渲染原理。因為 chrome 核心渲染可查證的資料較多，對於其他核心的瀏覽器不敢妄下定論，所以下面展開的討論預設是針對 chrome 瀏覽器的。

首先，我要丟擲一點結論：

使用 transform3d api 代替 transform api，強制開始 GPU 加速

這裡談到了 GPU 加速，為什麼 GPU 能夠加速 3D 變換？這一切又必須要從瀏覽器底層的渲染講起，瀏覽器渲染展示網頁的過程，老生常談，面試必問，大致分為：

1. 解析HTML(HTML Parser)

2. 構建DOM樹(DOM Tree)

3. 渲染樹構建(Render Tree)

4. 繪製渲染樹(Painting)

找到了一張很經典的圖：

這個渲染過程作為一個基礎知識，繼續往下深入。

當頁面載入並解析完畢後，它在瀏覽器內代表了一個大家十分熟悉的結構：DOM（Document Object Model，文件物件模型）。在瀏覽器渲染一個頁面時，它使用了許多沒有暴露給開發者的中間表現形式，其中最重要的結構便是層(layer)。