從輸入URL到頁面展現，這中間發生了什麼

1. 用戶輸入

若是是搜索內容，地址欄會使用瀏覽器默認的搜索引擎來合成新的帶搜索關鍵字的URL
若是判斷符合URL規則，自動加上http://或者https://（若是被301過）

2. URL請求過程

瀏覽器進程經過IPC將請求發送給網絡進程
先查詢是否有緩存且緩存有效，若是是則直接從緩存中取
網絡請求拉取
根據不一樣的響應Content-Type作不一樣的事情，application/octet-stream則回交給下載管理器，導航流程結束，若是是html，則繼續導航流程

3. 準備渲染進程

打開同一站點的頁面，會複用一個渲染進程，不然從新打開一個渲染進程

4. 提交文檔

• 「提交文檔」的消息是由瀏覽器進程發出，渲染進程接收到消息會和網絡進程創建傳輸數據的「管道」

傳輸結束，渲染進程發出「確認提交」的消息給瀏覽器進程
瀏覽器進程更新瀏覽器界面，包括安全狀態/歷史狀態等

5. 渲染階段

因爲渲染過程十分複雜，因此分爲幾個子流程分步，每一個子階段能夠看做一個輸入輸出的過程

1. 構建DOM樹

html文檔經過html解析器輸出DOM樹

2. 樣式計算

• css文本經過css解析器輸出styleSheets，經過document.styleSheets能夠看到
• 轉化樣式中的屬性值，使其統一
  將rem單位轉化px單位
  將#fff轉化爲rgba(255,255,255,0)
  將font-weight:bold轉化爲font-weight: 700

計算出每個DOM節點的樣式
根據css的繼承規則和層疊規則，生成權重最大的css樣式

3. 佈局階段

建立佈局樹
遍歷DOM樹，保持DOM樹的結構，將可見的節點添加到佈局樹
佈局計算
在執行佈局操做的時候，會把佈局計算的結果原地寫回佈局樹中，因此佈局樹是輸入也是輸出，Chrome正在重構佈局代碼，試圖清晰地區分輸入和輸出

4. 分層

擁有一些特殊樣式的DOM節點會被獨立層一個渲染層

5. 圖層繪製

渲染引擎會把繪製過程分紅不少個小指令，經過layers右擊打開profiler能夠看見各指令

6. 柵格化raster

實際上繪製操做是由渲染引擎的合成線程完成的
當前圖層的繪製指令列表準備好後，主線程會提交給合成線程
一般頁面內容會很長，而視圖只有固定的高度，因此只能看到的內容部分稱爲視圖，渲染非視圖中的內容也是沒有必要，因此合成線程會將圖層分爲圖塊(tile)這些圖塊一般是256256或者512512.而後合成線程會按照視圖附近的圖塊來優先生成位圖，生成位圖的操做是經過柵格化執行的。圖塊做爲柵格化的最小單位。渲染進程維護了一個柵格化的線程池
一般，柵格化會使用gpu加速生成，生成的位圖保存在gpu內存中

參考：極客時間《瀏覽器工做原理與事件》