前面在渲染的各個階段講到了當(dāng)前階段內(nèi)可做的優(yōu)化，本文綜合一下汪榔。
頁面三個階段
加載階段俘闯、交互階段和關(guān)閉階段潭苞，只要關(guān)注點在于前兩個階段。
加載階段
- 從發(fā)起請求到頁面呈現(xiàn)出來真朗。
- 性能因素為網(wǎng)絡(luò)和JS腳本此疹。
交互階段
- 從頁面呈現(xiàn)出來到交互操作的過程。
- 性能因素為JS腳本遮婶。
關(guān)閉階段
包含用戶關(guān)閉頁面后瀏覽器所做的清除操作蝗碎，和用戶體驗關(guān)系不大。
加載階段
- 從渲染流水線得知旗扑，影響首次渲染的主要因素為：外部依賴文件的下載及對其他渲染任務(wù)的阻塞蹦骑。
- 阻塞頁面首次渲染的外部文件稱為關(guān)鍵資源，如：CSS文件臀防、JS文件眠菇。圖片边败、視頻等不在其中。
影響頁面首次渲染的因素
依據(jù)關(guān)鍵資源展開捎废。
- 關(guān)鍵資源的數(shù)量放闺。
- 關(guān)鍵資源的大小。
- 請求關(guān)鍵資源所需的RTT（TCP傳輸中一個數(shù)據(jù)報發(fā)出到收到接收確認(rèn)缕坎，所經(jīng)歷的時間），請求資源在時間上是重疊的篡悟，計算最大資源所需RTT即可谜叹。
優(yōu)化方案
依據(jù)上述因素，總的優(yōu)化原則為減小關(guān)鍵資源數(shù)量搬葬、壓縮關(guān)鍵資源大小和降低關(guān)鍵資源請求RTT次數(shù)荷腊。
減小關(guān)鍵資源數(shù)量
- 將小的外聯(lián)文件改為內(nèi)嵌式。
- 引入CSS文件時加入媒體查詢急凰。
- 引入JS文件時采用異步加載（關(guān)鍵字：defer女仰、async）。
壓縮關(guān)鍵資源大小
- 使用打包工具插件對文件進(jìn)行壓縮抡锈。
- 去掉文件注釋疾忍。
降低關(guān)鍵資源請求RTT次數(shù)
- 通過減小關(guān)鍵資源數(shù)量和減小關(guān)鍵資源大小相配合實現(xiàn)。
- 通過CDN加速降低RTT時長床三。
交互階段
- 交互階段不需加載外部資源一罩。
- 會有JS觸發(fā)的DOM、樣式變化以及CSS變換撇簿，需要渲染新的幀聂渊。
- 交互階段優(yōu)化即為渲染幀速度的優(yōu)化。
優(yōu)化方案
減少JS執(zhí)行時間
js執(zhí)行時間過長時會阻塞主線程四瘫，導(dǎo)致其他渲染任務(wù)不能盡快執(zhí)行汉嗽。
- 將大的JS任務(wù)劃分為多個小任務(wù)。
- 使用web worker執(zhí)行耗時的無DOM操作的任務(wù)找蜜。
避免強(qiáng)制同步布局
正常的布局
- 通過DOM接口添加或刪除元素后會重新進(jìn)行樣式的計算饼暑、布局。
- 正常情況下锹杈，為不阻塞主線程撵孤，所需的樣式計算、布局竭望、節(jié)點的增刪會在另外的任務(wù)中異步完成邪码。
強(qiáng)制同步布局
JS將上述的樣式計算、布局強(qiáng)制加入當(dāng)前任務(wù)中執(zhí)行咬清。
觸發(fā)條件
在對DOM進(jìn)行增刪后闭专，操作DOM相關(guān)值奴潘，為保證值的準(zhǔn)確性，會立刻執(zhí)行更新任務(wù)影钉。
所以須避免在DOM增刪后操作DOM相關(guān)值画髓。
避免布局抖動
避免在一次JS執(zhí)行中頻繁的觸發(fā)強(qiáng)制同步布局和抖動。
善用CSS動畫
- CSS動畫性能更好且不受主線程影響平委，盡量使用CSS動畫奈虾。
- 使用CSS動畫時善用
will-change字段。
避免頻繁的垃圾回收
- 頻繁創(chuàng)建局部對象會引發(fā)頻繁的垃圾回收廉赔。
- 垃圾回收任務(wù)在主線程執(zhí)行肉微，可能會阻塞其他任務(wù)。
