1. 網(wǎng)頁解析的過程
- 輸入URL地址后, 下載index.html文件
- 解析html文件,遇到css或者js文件,再下載
2. 瀏覽器的內(nèi)核
常見的瀏覽器內(nèi)核有
- Trident （ 三叉戟）：IE展父、360安全瀏覽器橘霎、搜狗高速瀏覽器、百度瀏覽器裆甩、UC瀏覽器鲁豪；
- Gecko（ 壁虎） ：Mozilla Firefox潘悼；
- Presto（急板樂曲）-> Blink （眨眼）：Opera
- Webkit ：Safari、360極速瀏覽器爬橡、搜狗高速瀏覽器治唤、移動端瀏覽器（Android、iOS）
- Webkit -> Blink ：Google Chrome糙申，Edge
經(jīng)常說的瀏覽器內(nèi)核指的是瀏覽器的排版引擎：
排版引擎（layout engine）宾添，也稱為瀏覽器引擎（browser engine）、頁面渲染引擎（rendering engine）或樣版引擎柜裸。
3. 解析引擎的工作流程
4. 渲染頁面的詳細(xì)流程
5. HTML解析過程
默認(rèn)情況下服務(wù)器會給瀏覽器返回index.html文件缕陕，所以解析HTML是所有步驟的開始：
解析HTML，會構(gòu)建DOM Tree：
6. 解析css規(guī)則
解析的html過程中疙挺，如果遇到CSS的link元素扛邑，那么會由瀏覽器負(fù)責(zé)下載對應(yīng)的CSS文件：
- 注意：下載CSS文件是不會影響DOM的解析的；
解析出對應(yīng)的規(guī)則樹：稱之為 CSSOM（CSS Object Model铐然，CSS對象模型）蔬崩；
7. 構(gòu)建Render Tree
1. 注意一：link元素不會阻塞DOM Tree的構(gòu)建過程恶座，但是會阻塞Render Tree的構(gòu)建過程
- 這是因?yàn)镽ender Tree在構(gòu)建時，需要對應(yīng)的CSSOM Tree沥阳；
2. 注意二：Render Tree和DOM Tree并不是一一對應(yīng)的關(guān)系跨琳，比如對于display為none的元素，壓根不會出現(xiàn)在render tree中桐罕；
8. 布局（layout）和繪制（Paint）
在渲染樹（Render Tree）上運(yùn)行布局（Layout）以計算每個節(jié)點(diǎn)的幾何體湾宙。
渲染樹會表示顯示哪些節(jié)點(diǎn)以及其他樣式，但是不表示每個節(jié)點(diǎn)的尺寸冈绊、位置等信息；
布局是確定呈現(xiàn)樹中所有節(jié)點(diǎn)的寬度埠啃、高度和位置信息死宣；
在繪制階段，瀏覽器將布局階段計算的每個frame轉(zhuǎn)為屏幕上實(shí)際的像素點(diǎn)碴开；
包括將元素的可見部分進(jìn)行繪制毅该，比如文本、顏色潦牛、邊框眶掌、陰影、替換元素（比如img）
8. 回流和重繪
8.1 理解回流reflow：（也可以稱之為重排）
第一次確定節(jié)點(diǎn)的大小和位置巴碗，稱之為布局（layout）朴爬。
之后對節(jié)點(diǎn)的大小、位置修改重新計算稱之為回流橡淆。
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)容稱之為繪制（paint）构韵。
之后重新渲染稱之為重繪。
8.4 什么情況下會引起重繪趋艘？
比如修改背景色疲恢、文字顏色、邊框顏色致稀、樣式等冈闭；
8.5 兩者的關(guān)系
回流一定會引起重繪，所以回流是一件很消耗性能的事情
8.6 避免發(fā)生回流
- 修改樣式時盡量一次性修改, 比如通過cssText修改抖单，比如通過添加class修改
- 盡量避免頻繁的操作DOM, 我們可以在一個DocumentFragment或者父元素中, 將要操作的DOM操作完成萎攒，再一次性的操作遇八；
- 盡量避免通過getComputedStyle獲取尺寸、位置等信息耍休；
- 對某些元素使用position的absolute或者fixed
9. 特殊解析 – composite合成
默認(rèn)情況下刃永，標(biāo)準(zhǔn)流中的內(nèi)容都是被繪制在同一個圖層（Layer）中的；
一些特殊的屬性羊精，會創(chuàng)建一個新的合成層（ CompositingLayer ）斯够，并且新的圖層可以利用GPU來加速繪制；
因?yàn)槊總€合成層都是單獨(dú)渲染的喧锦；
創(chuàng)建新圖層的常見屬性：
- 3D transforms
- video读规、canvas、iframe
- opacity 動畫轉(zhuǎn)換時燃少；
- position: fixed
- will-change：一個實(shí)驗(yàn)性的屬性束亏，提前告訴瀏覽器元素可能發(fā)生哪些變化；
- animation 或 transition 設(shè)置了opacity阵具、transform碍遍；
分層確實(shí)可以提高性能，但是它以內(nèi)存管理為代價阳液，因此不應(yīng)作為 web 性能優(yōu)化策略的一部分過度使用怕敬。
