瀏覽器是如何將html、js、css、image等資源渲染成視覺化的頁面的呢？本文簡單介紹一下渲染過程中涉及到的關鍵步驟。
該過程分為四步：模型物件的構建、渲染樹構建、布局、繪製。
瀏覽器獲取到html、css檔案後，需要對其進行解析，抽象成dom和cssom物件，然後提供相應的js api，方便開發者進行互動邏輯開發。
html檔案位元組轉變成dom的過程如下圖所示：
主要經歷字元編碼—》令牌提取標籤—》詞法分析轉變成dom物件—》依照標籤的巢狀關係構建成dom樹；
css檔案位元組轉變成cssom的過程與html轉dom類似，區別就是按照規則通用性建立樹形關係。
所謂渲染樹，就是將dom樹和cssom樹合併，得到每個可見元素的內容和顯示樣式。
（1）渲染樹並非顯示所有元素，而只是佔據空間元素，如display: none的元素不在渲染樹中，而visibility: hidden的在渲染樹中；
（2）渲染樹包含的內容只是元素的內容及其樣式資訊，在不同視口（viewport，也就是瀏覽器的螢幕畫布）下實際展示肯能會有差別；
（3）渲染樹構建後，webkit還會繼續構建渲染層（renderlayer），這是為了簡化渲染邏輯，同時方便開發者檢視網頁層次。
經過前兩步的操作，我們知道了元素的內容和樣式資訊，但是實際在不同顯示器中的大小和位置如何確定呢，這就需要進行布局操作了，有的地方稱為"自動重排"（reflow）。webkit依據框模型來計算元素的位置和大小，布局輸出的是乙個"盒模型"物件，該物件包含了每個元素在視口內的確切位置和尺寸。
在布局結束後，接下來就是繪製，實現柵格化。繪製一般涉及到paint和composite layers。
paint一般通過影象上下文來控制，分為2d和3d繪製上下文。
前文提到了renderlayer的概念，繪製過程中，每個renderlayer是輸出影象中的一層，各個層根據深度資訊組合成一張影象，這個組合的過程稱為composite layers。
介紹完了關鍵渲染路徑的概念，接下來結合chrome dev-tool來看一下實際的情況，chrome的版本是60.0。
stop
optimize
optimize by fastdom
help
渲染的關鍵路徑主要體現在主線程中，如下圖所示。
圖中的藍色的parse html表示dom的構建過程，藍色的parse stylesheet代表cssom的構建過程，黃色的evaluate script表示js的執行過程，紫色的recalculate style表示構建render tree的過程，紫色的layout表示布局過程。
main執行緒中的圖中，有一些細線條記錄著一些事件的觸發時間，游標放在上面就可以檢視。事件主要分為loading、scripting、redering、painting四大類，具體可以檢視官方介紹。其中scripting型別中有一種event型別的事件，如下圖中的event（domcotentloaded）可以在js中被監聽到，常用的還有readystatechange、pageshow、pagehide、loaded、webkitvisiblechange等，最近有乙個專案中pageshow事件就幫我解決了ios wkwebview回退頁面快取不重新整理的問題。
通常我們會將css檔案放在head標籤中，js檔案放置在body標籤的後面，這是有一定道理的。由於js執行的過程中可能修改dom和css樣式，這也就造成了evaluate script的執行會阻塞parse html的過程，如果js中引用未解析到的dom程式就會報錯；如果script標籤之前有引入css檔案，evaluate script會等到parse stylesheet過程結束後再執行。
前端效能優化主要分為網路請求和**層面兩種。網路請求上的方法是壓縮合併、按需載入、快取等；**層面則就是要優化渲染路徑，畢竟單執行緒要在模型物件構建、渲染樹構建、布局、渲染之間切換，如下圖所示。
優化渲染路徑對於頁面效能至關重要，接下來會寫幾篇文章針對不同階段給出優化方法，敬請期待。
基於WebKit核心的瀏覽器設定放大縮小
環境 win7 32位，vs2013,webkit r174650 主要思路是修改webkit原始碼，在webview新增乙個介面，同webkit核心打交道 在webview工程中搜尋settextsizemultiplier，這個函式只放大文字，不能滿足要求，所以新增新的函式以及介面 webvie...
webkit瀏覽器常見開發問題
滔滔不絕，直到我除錯xml解析時，我才發現好多問題都與理解的不一致，在分析原始碼的時候只了解了大體步驟。細節你真的清楚嗎？一 http header 網頁頭請求 列舉幾個重要的 accept 指定客戶端能夠接收的內容型別 accept text plain,text html accept char...
Webkit 瀏覽器預設焦點查詢演算法
當我們用 方向鍵 在 html頁面 上移動，此時，可通過多種方式控制焦點行為 1 通過 js 邏輯，控制焦點的移動，此時下乙個焦點位置，完全是由 js 來控制 2 可通過瀏覽器預設行為，瀏覽器會計算焦點的位置，響應上下左右按鍵是通過 各個焦點相對位置 來確定下乙個焦點 注 1 當頁面通過 js 邏輯...