一次完整的請(qǐng)求過程：
一次完整的請(qǐng)求過程
本文主要探討render部分躏升，前端是如何渲染模板給用戶顯示的辩棒。
五種主流瀏覽器——IE、Firefox膨疏、Safari一睁、Chrome及Opera
份額
各大瀏覽器解析
瀏覽器功能
瀏覽器的主要功能是將用戶選擇得web資源呈現(xiàn)出來(lái)，它需要從服務(wù)器請(qǐng)求資源佃却，并將其顯示在瀏覽器窗口中者吁，資源的格式通常是HTML，也包括PDF饲帅、image及其他格式复凳。
瀏覽器的主要構(gòu)成High Level Structure（高層結(jié)構(gòu)）
- 用戶界面－ 包括地址欄、后退/前進(jìn)按鈕灶泵、書簽?zāi)夸浀扔耍簿褪悄闼吹降某擞脕?lái)顯示你所請(qǐng)求頁(yè)面的主窗口之外的其他部分
- 瀏覽器引擎－ 用來(lái)查詢及操作渲染引擎的接口
- 渲染引擎－ 用來(lái)顯示請(qǐng)求的內(nèi)容，例如赦邻，如果請(qǐng)求內(nèi)容為html髓棋，它負(fù)責(zé)解析html及css，并將解析后的結(jié)果顯示出來(lái)
- 網(wǎng)絡(luò)－ 用來(lái)完成網(wǎng)絡(luò)調(diào)用惶洲，例如http請(qǐng)求按声，它具有平臺(tái)無(wú)關(guān)的接口，可以在不同平臺(tái)上工作
- UI 后端－ 用來(lái)繪制類似組合選擇框及對(duì)話框等基本組件恬吕，具有不特定于某個(gè)平臺(tái)的通用接口签则，底層使用操作系統(tǒng)的用戶接口
- JS解釋器－ 用來(lái)解釋執(zhí)行JS代碼
- 數(shù)據(jù)存儲(chǔ)－ 屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)币呵，HTML5定義了web database技術(shù)怀愧，這是一種輕量級(jí)完整的客戶端存儲(chǔ)技術(shù)
瀏覽器基本組件
- Chrome為每個(gè)標(biāo)簽分配了各自的渲染引擎實(shí)例，是單獨(dú)的進(jìn)程
- 渲染引擎：Firefox余赢、Chrome和Safari是基于兩種渲染引擎構(gòu)建的，F(xiàn)irefox使用Geoko——Mozilla自主研發(fā)的渲染引擎哈垢，Safari和Chrome都使用webkit妻柒。Webkit是一款開源渲染引擎，它本來(lái)是為linux平臺(tái)研發(fā)的耘分，后來(lái)由Apple移植到Mac及Windows上举塔。
渲染過程
- 當(dāng)用戶輸入url绑警，webkit調(diào)用資源加載器加載url對(duì)應(yīng)的網(wǎng)頁(yè)
- 加載器依賴網(wǎng)絡(luò)模塊建立連接，發(fā)送請(qǐng)求并接受答復(fù)
- webit接收到各種網(wǎng)頁(yè)或者資源的數(shù)據(jù)央渣，其中某些資源可能是同步或者異步的
- 網(wǎng)頁(yè)被交給html解析器轉(zhuǎn)變一系列的詞語(yǔ)(Token)
- 解析器根據(jù)詞語(yǔ)構(gòu)建節(jié)點(diǎn)计盒，形成DOM書
-
如果節(jié)點(diǎn)依賴其他資源，例如css img 芽丹，則調(diào)用資源加載器來(lái)加載他們北启，這些都是異步的，不會(huì)阻礙dom樹的構(gòu)建
在瀏覽器中分析
css阻塞
- 內(nèi)部css是html解析器調(diào)用解析css的api解析的拔第，這是同步的不會(huì)阻塞渲染過程
-
外部css樣式會(huì)調(diào)用css樣式表解析器咕村，這會(huì)是異步的，會(huì)阻塞渲染過程（不會(huì)有閃屏問題：用戶只看到dom結(jié)構(gòu)而看不到樣式）
css樣式表解析器解析外部css樣式表蚊俺，阻礙了渲染過程
js阻塞
- 內(nèi)部js和外部js都會(huì)阻塞頁(yè)面的渲染
- 主流瀏覽器會(huì)有預(yù)解析處理懈涛，在執(zhí)行js腳本時(shí)，其他線程會(huì)解析文檔的其余部分泳猬，并找出加載需要通過網(wǎng)絡(luò)加載的其他資源批钠。
圖層
圖層不會(huì)影響到根節(jié)點(diǎn)
創(chuàng)建圖層的條件
- 3D css屬性
- video節(jié)點(diǎn)
- canvas節(jié)點(diǎn)
- css3動(dòng)畫節(jié)點(diǎn)
- css加速屬性的元素（盡量給每個(gè)動(dòng)畫都加：will-change:transform，瀏覽器會(huì)幫你開圖層）
- 有一個(gè)z-index較低且包含一個(gè)復(fù)合層的兄弟元素
打開瀏覽器圖層
重繪（repaint）
- 重繪是一個(gè)元素外觀的改變所觸發(fā)的瀏覽器行為得封，例如改變outline价匠，背景色等屬性。瀏覽器會(huì)根據(jù)元素的新屬性重新繪制使元素呈現(xiàn)出新的外觀呛每。重繪不會(huì)帶來(lái)重排
- 需要注意的是踩窖，如果圖層中某個(gè)元素需要重繪，那么整個(gè)圖層都需要重繪
- 優(yōu)化：重繪元素(css動(dòng)畫晨横，gif圖)需要開一個(gè)圖層（translateZ(0)）洋腮，不影響到其他元素
重排（reflow 回流）
- 渲染對(duì)象在創(chuàng)建完成并添加到渲染樹時(shí)，并不包含位置和大小信息手形。計(jì)算這些值的過程稱之為布局和重排啥供。重排必定導(dǎo)致重繪
勾選此屬性，當(dāng)瀏覽發(fā)生重繪頁(yè)面變綠
由重繪库糠，重排想到的前端頁(yè)面渲染優(yōu)化方案：
- 元素的top伙狐，left操作盡量用css3的translate操作
- 使用opacity來(lái)替代visibility
- 不要使用table布局
- 將多次改變樣式屬性的操作合并成一次操作，放到一個(gè)class進(jìn)行操作
- 復(fù)雜的操作瞬欧，先將dom離線后（dioplay：none）再進(jìn)行操作
- 利用文檔碎片
7.動(dòng)畫實(shí)現(xiàn)贷屎，啟動(dòng)gpu加速
8.為動(dòng)畫元素新建圖層，提高動(dòng)畫元素的z-index
主流程 The main flow
- 第一步艘虎，瀏覽器拿到html文件唉侄，先用標(biāo)簽轉(zhuǎn)化為內(nèi)容樹中的dom節(jié)點(diǎn)，生成dom樹野建，顯示基本結(jié)構(gòu)
- 第二步属划，解析外部CSS文件及style標(biāo)簽中的樣式信息恬叹。生成另一棵樹——render樹，render樹由一些包含有顏色和大小等屬性的矩形組成同眯，它們將被按照正確的順序顯示到屏幕上（有時(shí)候剛打開網(wǎng)頁(yè)時(shí)會(huì)看到?jīng)]有樣式的結(jié)構(gòu)）注意：第2步可能和第1步同時(shí)進(jìn)行
- 第三步绽昼，渲染引擎給每個(gè)矩形找坐標(biāo)，布局须蜗，繪制
解析 Parsing－general
解析是渲染引擎中一個(gè)非常重要的過程硅确。解析一個(gè)文檔即將其轉(zhuǎn)換為具有一定意義的結(jié)構(gòu)——編碼可以理解和使用的東西。解析的結(jié)果通常是表達(dá)文檔結(jié)構(gòu)的節(jié)點(diǎn)樹唠粥，稱為解析樹或語(yǔ)法樹疏魏。在解析之前會(huì)將文檔先轉(zhuǎn)換 Translation為解析書，再解析晤愧。解析是由解析器來(lái)做的大莫，解析又分為語(yǔ)法解析和此法解析。解析是根據(jù)文法 Grammars規(guī)則來(lái)進(jìn)行的
