參考資料
- 淘寶團隊前端優(yōu)化
- alpha（阮一峰）
- requestAimationFrame （張鑫旭）
- 移動H5前端性能優(yōu)化指南
- chrome 渲染優(yōu)化
- 《高性能JavaScript》
零、前言
本人垃圾，毀人無數(shù)。之前在 JavaScript客戶端開篇 一文提及JavaScript客戶端的時間線，本篇將做進一步詳細的敘述。主要包括渲染的路徑，以及渲染性能，并介紹一些常見的渲染優(yōu)化方法，及其他前端相關(guān)優(yōu)化要點。
一、主要渲染原理
1.0 前情提要
時間線
1.1 構(gòu)建對象模型
瀏覽器處理過程
- 轉(zhuǎn)換：瀏覽器從磁盤或網(wǎng)絡(luò)讀取 HTML 的原始字節(jié)，然后根據(jù)指定的文件編碼格式（例如 UTF-8 ）將其轉(zhuǎn)換為相應(yīng)字符
- 符號化：瀏覽器將字符串轉(zhuǎn)換為 W3C HTML5 標準 指定的各種符號
- 詞法分析：發(fā)射的符號轉(zhuǎn)換為 對象 ，定義它們的屬性與規(guī)則
- DOM 構(gòu)建：因為 HTML 標記定義不同標簽間的相互關(guān)系（某些標簽嵌套在其他標簽中），所以創(chuàng)建的對象在樹狀數(shù)據(jù)結(jié)構(gòu)中互相鏈接，樹狀數(shù)據(jù)結(jié)構(gòu)還捕獲原始標記中定義的父子關(guān)系：比如 HTML 對象是 body 對象的父對象， body 是 paragraph 對象的父對象等等
CSS 對象模型
- CSSOM 采用樹狀結(jié)構(gòu)的原因：在給頁面上的一切對象計算最終的樣式集時，瀏覽器會先從應(yīng)用給該節(jié)點的最通用規(guī)則開始（例如，如果節(jié)點是 body 元素的子元素，則應(yīng)用所有 body 樣式），然后，通過應(yīng)用更具體的規(guī)則遞歸細化計算的樣式，即 規(guī)則向下層疊
- 上面的樹不是完整的 CSSOM 樹，它只是顯示了我們決定在樣式表中覆蓋的樣式。每個瀏覽器都會提供一套默認的樣式，也稱為 用戶代理樣式，即我們不提供任何自定義樣式時看到的樣式
- CSS 規(guī)則轉(zhuǎn)換的過程跟 HTML 相似，如下圖：
CSSOM 轉(zhuǎn)換過程
1.2 渲染樹構(gòu)建、布局和繪制
Render Tree
- DOM 樹與 CSSOM 樹融合成渲染樹，其中渲染樹只包括渲染頁面需要的節(jié)點（不包括
<script>、<style>、display: none;等） - 布局（也稱為重排 （reflows））計算每個對象的精確位置及尺寸
- 最后一步的繪制，輸入確定的渲染樹，在屏幕上渲染像素
1.3 CSS/JS阻塞
- CSS相關(guān)：
- 默認情況下，CSS 被視為阻塞渲染的資源
- 媒體類型與媒體查詢允許我們將一些 CSS 資源標記為不阻塞渲染
- 所有 CSS 資源，無論阻塞或不阻塞，瀏覽器都會下載。
- JavaScript相關(guān)：
- JavaScript 可以查詢、修改 DOM 與 CSSOM
- JavaScript 的執(zhí)行因 CSSOM 而阻塞
- 除非明確聲明 DOM 構(gòu)建為異步，否則 JavaScript 會阻塞這一流程
- 實例分析 CSS 和 JavaScript 默認與異步情況下瀏覽器的執(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ān)鍵路徑阻塞
- 通過以上的不同執(zhí)行路徑分析，可以得出以下通過異步編程減少關(guān)鍵路徑阻塞的結(jié)論：
- 首屏的 DOM 結(jié)構(gòu)盡量簡單
- 若 JavaScript 代碼不影響 DOM 構(gòu)建，使用
async（放在<body>底部不一定不會影響最初的 DOM 構(gòu)建，主要看具體瀏覽器的執(zhí)行機制） - 若 HTML 語義化較好，CSS 文件可使用媒體類型
media= "print"使其不阻塞渲染
1.5 前端自動化打包的優(yōu)化方式
- 為減少 http 請求次數(shù)，現(xiàn)在的自動化打包工具都會把 JavaScript 文件打包到不超過 4 個 JavaScript 文件中（瀏覽器同時請求上限為 4 個），因此加載速度會較慢，故 Web App 經(jīng)常采用首屏頁面加載
- 首屏頁面渲染完畢后，再加載
bundle.js，加載完畢后進行頁面的重排（reflows）和重繪（repaint），進入單頁面應(yīng)用（Single Page Application）
二、性能優(yōu)化
2.0 前情提要
- 本節(jié)性能優(yōu)化內(nèi)容基于第一節(jié)的瀏覽器渲染原理，根據(jù)各個流程給予一定的性能優(yōu)化指南。內(nèi)容跟第一節(jié)有部分重復(fù)。
2.1 加載優(yōu)化（最耗時）
- 減少 HTTP 請求：瀏覽器一般同時響應(yīng)請求為4個請求（PC 一般為4個，Android 支持4個，IOS 5后可支持6個），所以盡量減少頁面的請求數(shù)，首次加載同時請求數(shù)不能超過4個。（Webpack打包等）
- 合并 CSS、 JavaScript；
- 合并小圖片、 使用 CSS sprite，base-64；
- 緩存：使用緩存可以減少向服務(wù)器的請求數(shù)，節(jié)省加載時間，所以所有靜態(tài)資源都要在服務(wù)器端設(shè)置緩存，并且盡量使用長 Cache （長 Cache 資源的更新可使用時間戳）
- 緩存原理參考；
- 緩存一切可緩存的資源；
- 使用長 Cache （使用時間戳更新 Cache）；
- 使用外聯(lián)式引用 CSS、JavaScript（可使用 localstorage 緩存圖片）；
- 壓縮 HTML、CSS、JavaScript：減少資源大小可以加快網(wǎng)頁顯示速度，所以要對HTML、CSS、JavaScript 等進行代碼壓縮，并在服務(wù)端設(shè)置 GZip
- 壓縮（例如多余的空格、換行符和縮進），自動化工具或在線壓縮工具；
- 啟用 GZip
- 使用首屏加載：首屏的快速顯示，可以大大提升用戶對頁面速度的感知，因此應(yīng)盡量針對首屏的快速顯示做優(yōu)化；
- 按需加載：將不影響首屏的資源和當前屏幕資源不用的資源放到用戶需要時才加載，可以大大提升重要資源的顯示速度和降低總體流量。但是這也會導(dǎo)致大量重繪，影響渲染性能
- LazyLoad
- 滾屏加載
- 通過 Media Query 加載
- 預(yù)加載：大型重資源頁面（如游戲）可使用增加 Loading 的方法，資源加載完成后再顯示頁面。但 Loading 時間過長，會造成用戶流失。
- 對用戶行為分析，可以在當前頁加載下一頁資源，提升速度
- 圖片壓縮：圖片是最占流量的資源，因此盡量避免使用它，使用時選擇最合適的格式（實現(xiàn)需求的前提下，以大小判斷），合適的大小。
- 使用 智圖 壓縮；
- 使用其他方式代替圖片（CSS3，SVG，IconFont）；
- 使用 Srcset （主要移動端）；
- 選擇合適的圖片（webP優(yōu)于JPG，PNG8優(yōu)于GIF）；
- 選擇合適的大小（首次加載不大于1014KB，不寬于640（基于手機的一般寬度））；
2.2 腳本執(zhí)行優(yōu)化
- CSS 寫在頭部（阻塞 DOM 渲染，不阻塞加載，內(nèi)聯(lián)會阻塞加載），JavaScript 寫在尾部或異步（默認阻塞加載和渲染）
- 避免圖片和 iFrame 等的空 Src：空 Src會重新加載當前頁面，影響速度和效率
- 盡量避免重設(shè)圖片大小：指通過 CSS、JavaScript 等中多次重置圖片大小，多次重設(shè)圖片大小會引發(fā)圖片的多次重繪，影響性能
- 圖片盡量避免使用 DataURL ，前面提到 DataURL可以減少加載時間，但是 DataURL 沒有使用圖片的壓縮算法文件會變大，并且要解碼后再渲染，耗時長，綜上應(yīng)盡量避免
2.3 CSS優(yōu)化
- 盡量避免在 HTML 標簽中寫 Style 屬性
- 避免 CSS 表達式：CSS 表達式的執(zhí)行需跳出 CSS 書的渲染，因此請避免 CSS 表達式
- 移除空的 CSS 規(guī)則：空的 CSS 規(guī)則增加了 CSS 文件的大小，且影響 CSS 樹的執(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在渲染時的計算量比較大，盡量減少使用 - 不濫用 Web 字體：Web字體需要下載，解析，重繪當前頁面，盡量減少使用
- 不聲明過多的
font-size： 盡量使用語義化標簽的默認字體大小，提高 CSS 樹的效率 - 值為 0 時不需要任何單位
- 標準化各種瀏覽器前綴
- 沒前綴應(yīng)放在最后
- CSS 動畫只用（
-webkit-無前綴兩種即可） - 其他前綴為
-webkit-、-moz-、-ms-、無前綴四種 - 避免讓選擇器看起來像正則表達式：高級選擇器執(zhí)行耗時長且不易讀懂，避免使用
2.4 JavaScript執(zhí)行優(yōu)化
- 減少重繪和回流
- 避免不必要的 DOM 操作；
- 盡量改變 Class 而不是 Style ，使用 classList 代替 className ；
- 避免使用
document.write()； - 減少
drawImage； - 緩存 DOM 選擇與計算：每次 DOM 選擇都要計算，用一個變量保存這個值；
- 盡量使用事件代理，避免批量綁定事件；
- 盡量使用 ID 選擇器：ID選擇器是最快的；
-
Touch事件優(yōu)化：使用touchstart、touchend代替click，但注意Touch響應(yīng)過快，易引發(fā)誤操作；
2.5 渲染優(yōu)化
- HTML 使用
viewport：viewport可以加速頁面的渲染； - 減少 DOM 節(jié)點：DOM 節(jié)點太多影響頁面的渲染，應(yīng)盡量減少 DOM 節(jié)點
- 動畫優(yōu)化：
- 盡量使用 CSS3 動畫
- 合理使用
requestAnimationFrame動畫代替setTimeout（跑在主線程上，一般一秒刷新 60 次，提高動畫幀的利用效率），參考文章 requestAnimationFrame & CSS3 animation； - 適當使用 Canvas 動畫， 5 個元素以內(nèi)使用 CSS 動畫（IOS8可使用webGL）；
- 高頻事件優(yōu)化：
Touchmove和Scroll事件可導(dǎo)致多次渲染 - 使用
requestAnimationFrame監(jiān)聽幀變化，使得在正確的時間進行渲染； - 增加響應(yīng)變化的時間間隔，減少重繪次數(shù)
- GPU 加速：CSS中以下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、webGL、Video）來觸發(fā) GPU 渲染，但過度使用會引發(fā)手機耗電增加。
