瀏覽器組成與渲染-重繪與重排總結

瀏覽器主要組成

瀏覽器是多進程的，一個頁面從請求到渲染，是多個進程在同時進行，這些進程主要由如下的組件產生。

瀏覽器主要組成：

• 用戶界面（The user interface）
• 瀏覽器引擎（The browser engine）
• 渲染引擎（The rendering engine）
• 網絡（Networking）
• UI 後端繪製（UI backend）
• js 解析器（JavaScript interpreter）
• 數據存儲（Data storage）

渲染引擎

渲染引擎主要渲染 html 、css 、圖片 等內容。不一樣瀏覽器的渲染機制有差別。

渲染步驟

瀏覽器渲染網頁的過程，主要有如下幾個步驟

1. 解析HTML，生成 DOM 樹
2. 構建 DOM 樹：此時只有形狀和顏色等屬性
3. 渲染樹結構：給每一個節點都加上座標，構成顯示佈局
4. 繪製樹：給節點加上 UI 樣式，進行繪製顯示

下圖是 webkit 內核（chrome） 的渲染流程：

重繪和重排

• 重繪：當元素外觀的改變時觸發。如改變vidibility、outline、背景色等屬性。
• 重排/迴流：當元素的位置和幾何信息改變時觸發。如改變窗口大小、元素的width、height、position 等。

重排處於layout階段、重繪處於paint階段，越往前損耗越高，因此重排會比重繪要消耗性能。

注意：重排必定會觸發重繪，而重繪不必定會重排。

重繪（repaint）

1. 致使 repaint 的操做：

• 全部改變元素外觀的操做：color、background、box-shadow 等。

2. 常見的引發 repaint 的元素

常見 repaint 元素
color	border-style	visibility	background
text-decoration	background-image	background-position	background-repeat
outline-color	outline	outline-style	border-radius
outline-width	box-shadow	background-size

重排/迴流（reflow）

一、致使 reflow 的操做：

• 改變窗口大小
• 改變文字大小
• 添加/刪除樣式表
• 內容的改變，(用戶在輸入框中寫入內容也會)
• 激活僞類，如:hover
• 操做class屬性
• 腳本操做DOM
• 計算offsetWidth和offsetHeight
• 設置style屬性
• ...

二、常見的引發的 reflow 元素

常見 reflow 元素
width	height	padding	margin
display	border-width	border	top
position	font-size	float	text-align
font-family	line-height	vertical-align	right
clear	white-space	bottom	min-height

三、如何減小重排？

1. 不要一條一條地修改 DOM 的樣式，預先定義好 class，而後修改 DOM 的 className
2. 把 DOM 離線後修改，好比：先把 DOM 給 display:none (有一次 Reflow)，而後你修改100次，而後再把它顯示出來
3. 不要把 DOM 結點的屬性值放在一個循環裏當成循環裏的變量
4. 儘量不要修改影響範圍比較大的 DOM
5. 爲動畫的元素使用絕對定位 absolute / fixed
6. 不要使用 table 佈局，可能很小的一個小改動會形成整個 table 的從新佈局

參考文章：

• How Browsers Work: Behind the scenes of modern web browsers
• css 重排和重繪總結
• 你真的瞭解迴流和重繪嗎