10分钟看懂浏览器的渲染过程及优化
一、瀏覽器概述
??目前的主流瀏覽器有5個：Internet Explorer、Firefox、Safari、Chrome和Opera瀏覽器。根據(jù) StatCounter 瀏覽器統(tǒng)計數(shù)據(jù)，目前（截止2019 年 5 月）Firefox、Safari 和 Chrome 瀏覽器的總市場占有率將近 83.66%。由此可見，如今開放源代碼瀏覽器在瀏覽器市場中占據(jù)了非常堅實的部分。
??以上5種瀏覽器由于有著不同的瀏覽器內(nèi)核，造成同樣的html頁面有著不同呈現(xiàn)。Internet Explorer的內(nèi)核是Trident；Firefox的內(nèi)核是Gecko；Chrome、Safari內(nèi)核是Webkit；Opera的內(nèi)核則是Presto。
二、瀏覽器渲染過程
??我們先大致看下瀏覽器渲染關(guān)鍵路徑圖：
1、HTML解析，構(gòu)建DOM樹
??瀏覽器從網(wǎng)絡(luò)或硬盤中獲得HTML字節(jié)數(shù)據(jù)后會經(jīng)過以下流程將字節(jié)解析為DOM樹：
- 字符編碼：先將HTML的原始字節(jié)數(shù)據(jù)轉(zhuǎn)換為文件指定編碼的字符。
- 令牌化：然后瀏覽器會根據(jù)HTML規(guī)范來將字符串轉(zhuǎn)換成各種令牌（如<html>、<body>、<p>這樣的標(biāo)簽以及標(biāo)簽中的字符串和屬性等都會被轉(zhuǎn)化為令牌，每個令牌具有特殊含義和規(guī)則）。
- 生成節(jié)點對象：接著每個令牌都會被轉(zhuǎn)換成定義其屬性和規(guī)則的對象，即節(jié)點對象。
- 構(gòu)建DOM樹：最后將節(jié)點對象構(gòu)建成樹形結(jié)構(gòu)，即DOM樹。HTML標(biāo)簽之間有復(fù)雜的父子關(guān)系，樹形結(jié)構(gòu)剛好可以詮釋這樣的關(guān)系。
??下面通過一段HTML代碼與配圖更好的理解“字節(jié) -> 字符 -> 令牌-> 節(jié)點對象 -> 對象模型”這個過程：
<html><head><meta name="viewport" content="width=device-width,initial-scale=1"><link href="style.css" rel="stylesheet"><title>Critical Path</title></head><body><p>Hello <span>web performance</span> students!</p><div><img src="test.png"></div></body> </html> 復(fù)制代碼 DOM樹構(gòu)建過程2、CSS解析，構(gòu)建CSSOM樹
??瀏覽器解析遇到<link>標(biāo)簽時，瀏覽器就開始解析CSS，像構(gòu)建DOM樹一樣構(gòu)建CSSOM樹。style.css的代碼如下：
body { font-size: 16px } p { font-weight: bold } span { color: red } p span { display: none } img { float: right } 復(fù)制代碼 CSSOM樹3、Render Tree
??在構(gòu)建了DOM樹和CSSOM樹之后，瀏覽器只是擁有2個相互獨立的對象集合，DOM樹描述的文檔結(jié)構(gòu)和內(nèi)容，CSSOM樹描述了對應(yīng)文檔的樣式規(guī)則，想要渲染出頁面，就需要將DOM樹、CSSOM樹結(jié)合在一起，構(gòu)建渲染樹。
渲染樹4、Layout
??渲染樹構(gòu)建好后，瀏覽器得到了每個節(jié)點的內(nèi)容與樣式，下一步就是需要計算每個節(jié)點在瀏覽器窗口的確切位置與大小，即layout布局。
??布局階段，從渲染樹的根節(jié)點開始遍歷，采用盒子模型的模式來表示每個節(jié)點與其他元素之間的距離，從而確定每個元素在屏幕內(nèi)的位置與大小。
盒子模型：包括外邊距（margin），內(nèi)邊距（padding），邊框（border），內(nèi)容（content）。標(biāo)準(zhǔn)盒子模型width/height = content；IE盒子模型width/height = content + padding + border。
盒子模型5、Paint繪制頁面
??當(dāng)Layout布局完成后，瀏覽器會立即發(fā)出Paint事件，開始講渲染樹繪制成像素，繪制所需要的時間跟CSS樣式的復(fù)雜度成正比，繪制完成后，用戶才能看到頁面在屏幕中的最終呈現(xiàn)效果。
??如果想更詳細(xì)地體驗瀏覽器渲染流程，可以使用Chrome開發(fā)者工具中的Performance面板，錄制瀏覽器從請求直到渲染完成的過程，如下圖所示：
Performance三、渲染優(yōu)化方案
1、優(yōu)化渲染關(guān)鍵路徑方案
??通過優(yōu)化渲染關(guān)鍵路徑，可以優(yōu)化頁面渲染性能，減少頁面白屏?xí)r間。
- 優(yōu)化JS：JavaScript文件加載會阻塞DOM樹的構(gòu)建，可以給<script>標(biāo)簽添加異步屬性async，這樣瀏覽器的HTML解析就不會被js文件阻塞。
- 優(yōu)化CSS：瀏覽器每次遇到<link>標(biāo)簽時，瀏覽器就需要向服務(wù)器發(fā)出請求獲得CSS文件，然后才繼續(xù)構(gòu)建DOM樹和CSSOM樹，可以合并所有CSS成一個文件，減少HTTP請求，減少關(guān)鍵資源往返加載的時間，優(yōu)化渲染速度。
2、其他優(yōu)化方案
- 加載部分HTML
瀏覽器先加載主要HTML初始化靜態(tài)部分，動態(tài)變化的HTML內(nèi)容通過Ajax請求加載。這樣可以減少瀏覽器構(gòu)建DOM樹的工作量，讓用戶感覺頁面加載速度很快。 - 壓縮
對HTML、CSS、JavaScript這些文件去除冗余字符（例如不必要的注釋、空格符和換行符等），再進(jìn)行壓縮，減小文件數(shù)據(jù)大小，加快瀏覽器解析文件編碼。 - 圖片加載優(yōu)化
1）小圖標(biāo)合并成雪碧圖，進(jìn)而減少img的HTTP請求次數(shù)；
2）圖片加載較多時，采用懶加載的方案，用戶滾動頁面可視區(qū)時再加載渲染圖片。 - HTTP緩存
瀏覽器自帶了HTTP緩存的功能，只需要確保每個服務(wù)器響應(yīng)的頭部都包含了以下的屬性：
1）ETag： ETag是一個傳遞驗證令牌，它對資源的更新進(jìn)行檢查，如果資源未發(fā)生變化時不會傳送任何數(shù)據(jù)。當(dāng)瀏覽器發(fā)送一個請求時，會把ETag一起發(fā)送到服務(wù)器，服務(wù)器會根據(jù)當(dāng)前資源核對令牌（ETag通常是對內(nèi)容進(jìn)行Hash后得出的一個指紋），如果資源未發(fā)生變化，服務(wù)器將返回304 Not Modified響應(yīng)，這時瀏覽器不必再次下載資源，而是繼續(xù)復(fù)用緩存。
2）Cache-Control： Cache-Control定義了緩存的策略，它規(guī)定在什么條件下可以緩存響應(yīng)以及可以緩存多久。
a、no-cache： no-cache表示必須先與服務(wù)器確認(rèn)返回的響應(yīng)是否發(fā)生了變化，然后才能使用該響應(yīng)來滿足后續(xù)對同一網(wǎng)址的請求（每次都會根據(jù)ETag對服務(wù)器發(fā)送請求來確認(rèn)變化，如果未發(fā)生變化，瀏覽器不會下載資源）。no-store直接禁止瀏覽器以及所有中間緩存存儲任何版本的返回響應(yīng)。簡單的說，該策略會禁止任何緩存，每次發(fā)送請求時，都會完整地下載服務(wù)器的響應(yīng)。
b、public&private： 如果響應(yīng)被標(biāo)記為public，則即使它有關(guān)聯(lián)的HTTP身份驗證，甚至響應(yīng)狀態(tài)代碼通常無法緩存，瀏覽器也可以緩存響應(yīng)。如果響應(yīng)被標(biāo)記為private，那么這個響應(yīng)通常只為單個用戶緩存，因此不允許任何中間緩存（CDN）對其進(jìn)行緩存，private一般用在緩存用戶私人信息頁面。
c、max-age： max-age定義了從請求時間開始，緩存的最長時間，單位為秒。
小結(jié)
??今天瀏覽器渲染過程和優(yōu)化方案就介紹到這里，大家如果有更多更好的頁面性能優(yōu)化方案可以多多交流，評論區(qū)歡迎留言~~
轉(zhuǎn)載于:https://juejin.im/post/5d136700f265da1b7c6128db
總結(jié)
以上是生活随笔為你收集整理的10分钟看懂浏览器的渲染过程及优化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Django(模板语言-自定义filte
- 下一篇： HTML文件上传与下载