1. 網(wǎng)頁(yè)解析的過(guò)程
- 輸入U(xiǎn)RL地址后, 下載index.html文件
- 解析html文件,遇到css或者js文件,再下載
2. 瀏覽器的內(nèi)核
常見(jiàn)的瀏覽器內(nèi)核有
- Trident （ 三叉戟）：IE、360安全瀏覽器、搜狗高速瀏覽器、百度瀏覽器、UC瀏覽器；
- Gecko（ 壁虎） ：Mozilla Firefox；
- Presto（急板樂(lè)曲）-> Blink （眨眼）：Opera
- Webkit ：Safari、360極速瀏覽器、搜狗高速瀏覽器、移動(dòng)端瀏覽器（Android、iOS）
- Webkit -> Blink ：Google Chrome，Edge
經(jīng)常說(shuō)的瀏覽器內(nèi)核指的是瀏覽器的排版引擎：
排版引擎（layout engine），也稱(chēng)為瀏覽器引擎（browser engine）、頁(yè)面渲染引擎（rendering engine）或樣版引擎。
3. 解析引擎的工作流程
4. 渲染頁(yè)面的詳細(xì)流程
5. HTML解析過(guò)程
默認(rèn)情況下服務(wù)器會(huì)給瀏覽器返回index.html文件，所以解析HTML是所有步驟的開(kāi)始：
解析HTML，會(huì)構(gòu)建DOM Tree：
6. 解析css規(guī)則
解析的html過(guò)程中，如果遇到CSS的link元素，那么會(huì)由瀏覽器負(fù)責(zé)下載對(duì)應(yīng)的CSS文件：
- 注意：下載CSS文件是不會(huì)影響DOM的解析的；
解析出對(duì)應(yīng)的規(guī)則樹(shù)：稱(chēng)之為 CSSOM（CSS Object Model，CSS對(duì)象模型）；
7. 構(gòu)建Render Tree
1. 注意一：link元素不會(huì)阻塞DOM Tree的構(gòu)建過(guò)程，但是會(huì)阻塞Render Tree的構(gòu)建過(guò)程
- 這是因?yàn)镽ender Tree在構(gòu)建時(shí)，需要對(duì)應(yīng)的CSSOM Tree；
2. 注意二：Render Tree和DOM Tree并不是一一對(duì)應(yīng)的關(guān)系，比如對(duì)于display為none的元素，壓根不會(huì)出現(xiàn)在render tree中；
8. 布局（layout）和繪制（Paint）
在渲染樹(shù)（Render Tree）上運(yùn)行布局（Layout）以計(jì)算每個(gè)節(jié)點(diǎn)的幾何體。
渲染樹(shù)會(huì)表示顯示哪些節(jié)點(diǎn)以及其他樣式，但是不表示每個(gè)節(jié)點(diǎn)的尺寸、位置等信息；
布局是確定呈現(xiàn)樹(shù)中所有節(jié)點(diǎn)的寬度、高度和位置信息；
在繪制階段，瀏覽器將布局階段計(jì)算的每個(gè)frame轉(zhuǎn)為屏幕上實(shí)際的像素點(diǎn)；
包括將元素的可見(jiàn)部分進(jìn)行繪制，比如文本、顏色、邊框、陰影、替換元素（比如img）
8. 回流和重繪
8.1 理解回流reflow：（也可以稱(chēng)之為重排）
第一次確定節(jié)點(diǎn)的大小和位置，稱(chēng)之為布局（layout）。
之后對(duì)節(jié)點(diǎn)的大小、位置修改重新計(jì)算稱(chēng)之為回流。
8.2 什么情況下引起回流?
- 比如DOM結(jié)構(gòu)發(fā)生改變（添加新的節(jié)點(diǎn)或者移除節(jié)點(diǎn)）；
- 比如改變了布局（修改了width、height、padding、font-size等值）
- 比如窗口resize（修改了窗口的尺寸等）
- 比如調(diào)用getComputedStyle方法獲取尺寸、位置信息；
8.3 理解重繪repaint：
第一次渲染內(nèi)容稱(chēng)之為繪制（paint）。
之后重新渲染稱(chēng)之為重繪。
8.4 什么情況下會(huì)引起重繪？
比如修改背景色、文字顏色、邊框顏色、樣式等；
8.5 兩者的關(guān)系
回流一定會(huì)引起重繪，所以回流是一件很消耗性能的事情
8.6 避免發(fā)生回流
- 修改樣式時(shí)盡量一次性修改, 比如通過(guò)cssText修改，比如通過(guò)添加class修改
- 盡量避免頻繁的操作DOM, 我們可以在一個(gè)DocumentFragment或者父元素中, 將要操作的DOM操作完成，再一次性的操作；
- 盡量避免通過(guò)getComputedStyle獲取尺寸、位置等信息；
- 對(duì)某些元素使用position的absolute或者fixed
9. 特殊解析 – composite合成
默認(rèn)情況下，標(biāo)準(zhǔn)流中的內(nèi)容都是被繪制在同一個(gè)圖層（Layer）中的；
一些特殊的屬性，會(huì)創(chuàng)建一個(gè)新的合成層（ CompositingLayer ），并且新的圖層可以利用GPU來(lái)加速繪制；
因?yàn)槊總€(gè)合成層都是單獨(dú)渲染的；
創(chuàng)建新圖層的常見(jiàn)屬性：
- 3D transforms
- video、canvas、iframe
- opacity 動(dòng)畫(huà)轉(zhuǎn)換時(shí)；
- position: fixed
- will-change：一個(gè)實(shí)驗(yàn)性的屬性，提前告訴瀏覽器元素可能發(fā)生哪些變化；
- animation 或 transition 設(shè)置了opacity、transform；
分層確實(shí)可以提高性能，但是它以?xún)?nèi)存管理為代價(jià)，因此不應(yīng)作為 web 性能優(yōu)化策略的一部分過(guò)度使用。
