加載渲染鏈路優(yōu)化之道

靜態(tài)資源鏈路

加載

解析渲染

為了讓瀏覽器更快的解析渲染，我們需要考慮這幾點(diǎn)：

1. CSS 嵌套層級(jí)不要太深，不超過3級(jí)，避免在最內(nèi)層使用通配選擇器。

2. JS 腳本不要太復(fù)雜，考慮輕量化架構(gòu)，降低 JS 復(fù)雜性，減少解析時(shí)間，盡量不要引用復(fù)雜的第三方腳本。

3. 按需加載模塊，按需打包，首頁(yè)僅僅加載和執(zhí)行和首屏相關(guān)的腳本。其他腳本延遲加載執(zhí)行。

4. 考慮依賴的第三方模塊是不是必須，需不需要精簡(jiǎn)。

5. 打包優(yōu)化，code split 和 tree shaken。常用webpack和rollup的優(yōu)化。

6. 用戶交互相關(guān)事件綁定（比如頁(yè)面scroll，用戶左右滑動(dòng)等），添加參數(shù){passive:true}，減少瀏覽器事件等待。因?yàn)檫@些事件屬于可阻止事件，瀏覽器不知道用戶會(huì)不會(huì)阻止，所以需要等待js執(zhí)行，然后再做響應(yīng)。添加passive參數(shù)，就告訴瀏覽器不用等待了。

7. iOS8 以后的 iOS 支持wkwebview，但是很多 App 之前用的還是 uiwebview，建議轉(zhuǎn)換成wkwebview，獲得性能的提升（UIwebview在執(zhí)行 JS 時(shí)會(huì)阻塞 UI渲染進(jìn)程，WKwebview不會(huì)）。

數(shù)據(jù)埋點(diǎn)

上面我們梳理了加載到解析渲染過程應(yīng)該做的事情，那么如果你這些都做好了，發(fā)現(xiàn)網(wǎng)頁(yè)表現(xiàn)依然不盡人意，那么你就要考慮做一下數(shù)據(jù)埋點(diǎn)。其實(shí)數(shù)據(jù)埋點(diǎn)在企業(yè)項(xiàng)目中也是必不可少的，和性能體驗(yàn)優(yōu)化構(gòu)成閉環(huán)。通過數(shù)據(jù)來發(fā)現(xiàn)頁(yè)面性能和體驗(yàn)的問題，更有針對(duì)的進(jìn)行解決。

事實(shí)上數(shù)據(jù)埋點(diǎn)分為三類：

1. 業(yè)務(wù)埋點(diǎn)，統(tǒng)計(jì)諸如 PV、UV、點(diǎn)擊率、流失率、轉(zhuǎn)化率等

2. 大數(shù)據(jù)埋點(diǎn)，統(tǒng)計(jì)與用戶行為相關(guān)信息，比如那個(gè)用戶點(diǎn)擊了那個(gè)商品，上報(bào)用戶 ID 和商品 ID，方便后臺(tái)分析用戶和商品的關(guān)系，可以用做大數(shù)據(jù)分析，推薦算法來為用戶推薦商品。

3. 工程埋點(diǎn)，統(tǒng)計(jì)工程上的數(shù)據(jù)信息，比如頁(yè)面秒開率，DNS 時(shí)間等。