Browser

瀏覽器的工作順序

1. DNS 查詢

瀏覽器從域名服務器發起 DNS 查詢請求 得到 IP 位址

2. TCP 透過 3方交握 建立連線

3. TLS 安全協議

4. 解析 Parse

Parsing HTML

解析 HTML 並建構 DOM ( Document Object Model) Tree
透過 HTML Tag 建立的 Tree 描述了文件的結構
Tree 中 反映了不同的 Tag 中的層級關係
DOM 節點越多 建構 DOM 的時間越長

當解析中遇到css 或圖片時會請求資源並繼續解析
但遇到 script 標籤會阻塞渲染 並停止解析

Preload Scanner

預加載器會先掃描外部的引用資源並先下載

Parsing CSS

建立 CSSOM Tree 和 DOM 結構類似
CSSOM 中包含了 所有樣式
css是阻塞渲染的 在瀏覽器接收完css前 內容無法渲染

從性能的角度來說 更少的特定選擇器相對更快
但對瀏覽器來說 這點消耗非常小

Render Tree

為了建立渲染樹 瀏覽器從 DOM 根節點開始決定哪些 CSS 規則被添加
而有 display: none 和 head 元素不會被放進 render tree 中

Layout

計算每個節點的尺寸和位置
第一次確認節點尺寸和位置稱為 Layout
隨後有相關變化稱為 Reflow

Paint

將節點繪製到畫面上
將每個元素轉化為實際的像素
包含了背景色 圖片 文字等

compositing

將元素以不同層進行繪製
並合成在畫面上

Reflow 和 Repaint

Reflow 
如果變動導致畫面需要更新
width height 等
當有一個節點變動 就需要重新計算畫面中所有元素的位置和長寬

Repaint
變動不影響布局的屬性時
color outline visibility等