參考資料
- 淘寶團(tuán)隊(duì)前端優(yōu)化
- alpha（阮一峰）
- requestAimationFrame （張?chǎng)涡瘢?/a>
- 移動(dòng)H5前端性能優(yōu)化指南
- chrome 渲染優(yōu)化
- 《高性能JavaScript》
零目溉、前言
本人垃圾，毀人無(wú)數(shù)菱农。之前在 JavaScript客戶(hù)端開(kāi)篇 一文提及JavaScript客戶(hù)端的時(shí)間線(xiàn)缭付，本篇將做進(jìn)一步詳細(xì)的敘述。主要包括渲染的路徑循未，以及渲染性能陷猫，并介紹一些常見(jiàn)的渲染優(yōu)化方法秫舌，及其他前端相關(guān)優(yōu)化要點(diǎn)。
一绣檬、主要渲染原理
1.0 前情提要
時(shí)間線(xiàn)
1.1 構(gòu)建對(duì)象模型
瀏覽器處理過(guò)程
- 轉(zhuǎn)換：瀏覽器從磁盤(pán)或網(wǎng)絡(luò)讀取 HTML 的原始字節(jié)足陨，然后根據(jù)指定的文件編碼格式（例如 UTF-8 ）將其轉(zhuǎn)換為相應(yīng)字符
- 符號(hào)化：瀏覽器將字符串轉(zhuǎn)換為 W3C HTML5 標(biāo)準(zhǔn) 指定的各種符號(hào)
- 詞法分析：發(fā)射的符號(hào)轉(zhuǎn)換為 對(duì)象 ，定義它們的屬性與規(guī)則
- DOM 構(gòu)建：因?yàn)?HTML 標(biāo)記定義不同標(biāo)簽間的相互關(guān)系（某些標(biāo)簽嵌套在其他標(biāo)簽中）娇未，所以創(chuàng)建的對(duì)象在樹(shù)狀數(shù)據(jù)結(jié)構(gòu)中互相鏈接墨缘，樹(shù)狀數(shù)據(jù)結(jié)構(gòu)還捕獲原始標(biāo)記中定義的父子關(guān)系：比如 HTML 對(duì)象是 body 對(duì)象的父對(duì)象， body 是 paragraph 對(duì)象的父對(duì)象等等
CSS 對(duì)象模型
- CSSOM 采用樹(shù)狀結(jié)構(gòu)的原因：在給頁(yè)面上的一切對(duì)象計(jì)算最終的樣式集時(shí)零抬，瀏覽器會(huì)先從應(yīng)用給該節(jié)點(diǎn)的最通用規(guī)則開(kāi)始（例如镊讼，如果節(jié)點(diǎn)是 body 元素的子元素，則應(yīng)用所有 body 樣式）平夜，然后蝶棋，通過(guò)應(yīng)用更具體的規(guī)則遞歸細(xì)化計(jì)算的樣式，即 規(guī)則向下層疊
- 上面的樹(shù)不是完整的 CSSOM 樹(shù)忽妒，它只是顯示了我們決定在樣式表中覆蓋的樣式玩裙。每個(gè)瀏覽器都會(huì)提供一套默認(rèn)的樣式，也稱(chēng)為 用戶(hù)代理樣式段直，即我們不提供任何自定義樣式時(shí)看到的樣式
- CSS 規(guī)則轉(zhuǎn)換的過(guò)程跟 HTML 相似献酗，如下圖：
CSSOM 轉(zhuǎn)換過(guò)程
1.2 渲染樹(shù)構(gòu)建、布局和繪制
Render Tree
- DOM 樹(shù)與 CSSOM 樹(shù)融合成渲染樹(shù)坷牛，其中渲染樹(shù)只包括渲染頁(yè)面需要的節(jié)點(diǎn)（不包括
<script>、<style>很澄、display: none;等） - 布局（也稱(chēng)為重排 （reflows））計(jì)算每個(gè)對(duì)象的精確位置及尺寸
- 最后一步的繪制京闰，輸入確定的渲染樹(shù)，在屏幕上渲染像素
1.3 CSS/JS阻塞
- CSS相關(guān)：
- 默認(rèn)情況下甩苛，CSS 被視為阻塞渲染的資源
- 媒體類(lèi)型與媒體查詢(xún)?cè)试S我們將一些 CSS 資源標(biāo)記為不阻塞渲染
- 所有 CSS 資源蹂楣，無(wú)論阻塞或不阻塞，瀏覽器都會(huì)下載讯蒲。
- JavaScript相關(guān)：
- JavaScript 可以查詢(xún)痊土、修改 DOM 與 CSSOM
- JavaScript 的執(zhí)行因 CSSOM 而阻塞
- 除非明確聲明 DOM 構(gòu)建為異步，否則 JavaScript 會(huì)阻塞這一流程
- 實(shí)例分析 CSS 和 JavaScript 默認(rèn)與異步情況下瀏覽器的執(zhí)行流程
// demo 1
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div></div>
<script src="app.js"></script>
</body>
</html>
demo 1 執(zhí)行流程
// demo 2
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div></div>
<script src="app.js" async></script>
</body>
</html>
demo 2 執(zhí)行流程
// demo 3
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet" media="print">
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div></div>
<script src="app.js" async></script>
</body>
</html>
demo 3 執(zhí)行流程
1.4 通過(guò)異步編程減少關(guān)鍵路徑阻塞
- 通過(guò)以上的不同執(zhí)行路徑分析墨林，可以得出以下通過(guò)異步編程減少關(guān)鍵路徑阻塞的結(jié)論：
- 首屏的 DOM 結(jié)構(gòu)盡量簡(jiǎn)單
- 若 JavaScript 代碼不影響 DOM 構(gòu)建赁酝，使用
async（放在<body>底部不一定不會(huì)影響最初的 DOM 構(gòu)建，主要看具體瀏覽器的執(zhí)行機(jī)制） - 若 HTML 語(yǔ)義化較好旭等，CSS 文件可使用媒體類(lèi)型
media= "print"使其不阻塞渲染
1.5 前端自動(dòng)化打包的優(yōu)化方式
- 為減少 http 請(qǐng)求次數(shù)酌呆，現(xiàn)在的自動(dòng)化打包工具都會(huì)把 JavaScript 文件打包到不超過(guò) 4 個(gè) JavaScript 文件中（瀏覽器同時(shí)請(qǐng)求上限為 4 個(gè)），因此加載速度會(huì)較慢搔耕，故 Web App 經(jīng)常采用首屏頁(yè)面加載
- 首屏頁(yè)面渲染完畢后隙袁，再加載
bundle.js，加載完畢后進(jìn)行頁(yè)面的重排（reflows）和重繪（repaint），進(jìn)入單頁(yè)面應(yīng)用（Single Page Application）
二菩收、性能優(yōu)化
2.0 前情提要
- 本節(jié)性能優(yōu)化內(nèi)容基于第一節(jié)的瀏覽器渲染原理梨睁，根據(jù)各個(gè)流程給予一定的性能優(yōu)化指南。內(nèi)容跟第一節(jié)有部分重復(fù)娜饵。
2.1 加載優(yōu)化（最耗時(shí)）
- 減少 HTTP 請(qǐng)求：瀏覽器一般同時(shí)響應(yīng)請(qǐng)求為4個(gè)請(qǐng)求（PC 一般為4個(gè)坡贺，Android 支持4個(gè)，IOS 5后可支持6個(gè)）划咐，所以盡量減少頁(yè)面的請(qǐng)求數(shù)拴念，首次加載同時(shí)請(qǐng)求數(shù)不能超過(guò)4個(gè)。（Webpack打包等）
- 合并 CSS褐缠、 JavaScript政鼠；
- 合并小圖片、 使用 CSS sprite队魏，base-64公般；
- 緩存：使用緩存可以減少向服務(wù)器的請(qǐng)求數(shù)，節(jié)省加載時(shí)間胡桨，所以所有靜態(tài)資源都要在服務(wù)器端設(shè)置緩存官帘，并且盡量使用長(zhǎng) Cache （長(zhǎng) Cache 資源的更新可使用時(shí)間戳）
- 緩存原理參考；
- 緩存一切可緩存的資源昧谊；
- 使用長(zhǎng) Cache （使用時(shí)間戳更新 Cache）刽虹；
- 使用外聯(lián)式引用 CSS、JavaScript（可使用 localstorage 緩存圖片）呢诬；
- 壓縮 HTML涌哲、CSS、JavaScript：減少資源大小可以加快網(wǎng)頁(yè)顯示速度尚镰，所以要對(duì)HTML阀圾、CSS、JavaScript 等進(jìn)行代碼壓縮狗唉，并在服務(wù)端設(shè)置 GZip
- 壓縮（例如多余的空格初烘、換行符和縮進(jìn)），自動(dòng)化工具或在線(xiàn)壓縮工具分俯；
- 啟用 GZip
- 使用首屏加載：首屏的快速顯示肾筐，可以大大提升用戶(hù)對(duì)頁(yè)面速度的感知，因此應(yīng)盡量針對(duì)首屏的快速顯示做優(yōu)化缸剪；
- 按需加載：將不影響首屏的資源和當(dāng)前屏幕資源不用的資源放到用戶(hù)需要時(shí)才加載局齿，可以大大提升重要資源的顯示速度和降低總體流量。但是這也會(huì)導(dǎo)致大量重繪橄登，影響渲染性能
- LazyLoad
- 滾屏加載
- 通過(guò) Media Query 加載
- 預(yù)加載：大型重資源頁(yè)面（如游戲）可使用增加 Loading 的方法抓歼，資源加載完成后再顯示頁(yè)面讥此。但 Loading 時(shí)間過(guò)長(zhǎng)，會(huì)造成用戶(hù)流失谣妻。
- 對(duì)用戶(hù)行為分析萄喳，可以在當(dāng)前頁(yè)加載下一頁(yè)資源，提升速度
- 圖片壓縮：圖片是最占流量的資源蹋半，因此盡量避免使用它他巨，使用時(shí)選擇最合適的格式（實(shí)現(xiàn)需求的前提下，以大小判斷）减江，合適的大小染突。
- 使用 智圖 壓縮；
- 使用其他方式代替圖片（CSS3辈灼，SVG份企，IconFont）；
- 使用 Srcset （主要移動(dòng)端）巡莹；
- 選擇合適的圖片（webP優(yōu)于JPG司志，PNG8優(yōu)于GIF）；
- 選擇合適的大薪嫡（首次加載不大于1014KB骂远，不寬于640（基于手機(jī)的一般寬度））；
2.2 腳本執(zhí)行優(yōu)化
- CSS 寫(xiě)在頭部（阻塞 DOM 渲染腰根，不阻塞加載激才，內(nèi)聯(lián)會(huì)阻塞加載），JavaScript 寫(xiě)在尾部或異步（默認(rèn)阻塞加載和渲染）
- 避免圖片和 iFrame 等的空 Src：空 Src會(huì)重新加載當(dāng)前頁(yè)面额嘿，影響速度和效率
- 盡量避免重設(shè)圖片大忻秤：指通過(guò) CSS、JavaScript 等中多次重置圖片大小岩睁，多次重設(shè)圖片大小會(huì)引發(fā)圖片的多次重繪，影響性能
- 圖片盡量避免使用 DataURL 揣云，前面提到 DataURL可以減少加載時(shí)間捕儒，但是 DataURL 沒(méi)有使用圖片的壓縮算法文件會(huì)變大，并且要解碼后再渲染邓夕，耗時(shí)長(zhǎng)刘莹，綜上應(yīng)盡量避免
2.3 CSS優(yōu)化
- 盡量避免在 HTML 標(biāo)簽中寫(xiě) Style 屬性
- 避免 CSS 表達(dá)式：CSS 表達(dá)式的執(zhí)行需跳出 CSS 書(shū)的渲染，因此請(qǐng)避免 CSS 表達(dá)式
- 移除空的 CSS 規(guī)則：空的 CSS 規(guī)則增加了 CSS 文件的大小焚刚，且影響 CSS 樹(shù)的執(zhí)行点弯，所以需移除空的 CSS 規(guī)則
- 使用
flexbox代替?zhèn)鹘y(tǒng)的布局模型 - 正確使用
display屬性： -
display:inline后邊不應(yīng)再使用width、height矿咕、margin抢肛、padding以及float -
display:inline-block后不應(yīng)該使用float -
display:block后不應(yīng)該再使用vertical-align -
display:table后不應(yīng)該再使用margin或float - 不濫用
float：float在渲染時(shí)的計(jì)算量比較大狼钮，盡量減少使用 - 不濫用 Web 字體：Web字體需要下載，解析捡絮，重繪當(dāng)前頁(yè)面熬芜，盡量減少使用
- 不聲明過(guò)多的
font-size： 盡量使用語(yǔ)義化標(biāo)簽的默認(rèn)字體大小，提高 CSS 樹(shù)的效率 - 值為 0 時(shí)不需要任何單位
- 標(biāo)準(zhǔn)化各種瀏覽器前綴
- 沒(méi)前綴應(yīng)放在最后
- CSS 動(dòng)畫(huà)只用（
-webkit-無(wú)前綴兩種即可） - 其他前綴為
-webkit-福稳、-moz-涎拉、-ms-、無(wú)前綴四種 - 避免讓選擇器看起來(lái)像正則表達(dá)式：高級(jí)選擇器執(zhí)行耗時(shí)長(zhǎng)且不易讀懂的圆，避免使用
2.4 JavaScript執(zhí)行優(yōu)化
- 減少重繪和回流
- 避免不必要的 DOM 操作鼓拧；
- 盡量改變 Class 而不是 Style ，使用 classList 代替 className 越妈；
- 避免使用
document.write()季俩； - 減少
drawImage； - 緩存 DOM 選擇與計(jì)算：每次 DOM 選擇都要計(jì)算叮称，用一個(gè)變量保存這個(gè)值种玛；
- 盡量使用事件代理，避免批量綁定事件瓤檐；
- 盡量使用 ID 選擇器：ID選擇器是最快的赂韵；
-
Touch事件優(yōu)化：使用touchstart、touchend代替click挠蛉，但注意Touch響應(yīng)過(guò)快祭示，易引發(fā)誤操作；
2.5 渲染優(yōu)化
- HTML 使用
viewport：viewport可以加速頁(yè)面的渲染谴古； - 減少 DOM 節(jié)點(diǎn)：DOM 節(jié)點(diǎn)太多影響頁(yè)面的渲染质涛，應(yīng)盡量減少 DOM 節(jié)點(diǎn)
- 動(dòng)畫(huà)優(yōu)化：
- 盡量使用 CSS3 動(dòng)畫(huà)
- 合理使用
requestAnimationFrame動(dòng)畫(huà)代替setTimeout（跑在主線(xiàn)程上，一般一秒刷新 60 次掰担，提高動(dòng)畫(huà)幀的利用效率）也糊，參考文章 requestAnimationFrame & CSS3 animation仅政； - 適當(dāng)使用 Canvas 動(dòng)畫(huà)， 5 個(gè)元素以?xún)?nèi)使用 CSS 動(dòng)畫(huà)（IOS8可使用webGL）；
- 高頻事件優(yōu)化：
Touchmove和Scroll事件可導(dǎo)致多次渲染 - 使用
requestAnimationFrame監(jiān)聽(tīng)?zhēng)兓骄保沟迷谡_的時(shí)間進(jìn)行渲染罗洗； - 增加響應(yīng)變化的時(shí)間間隔碌宴，減少重繪次數(shù)
- GPU 加速：CSS中以下屬性（CSS3 transitions页慷、CSS3 3D transforms、Opacity执庐、Canvas酪耕、webGL、Video）來(lái)觸發(fā) GPU 渲染轨淌，但過(guò)度使用會(huì)引發(fā)手機(jī)耗電增加迂烁。
