參考:Web 前端面試指南與高頻考題解析 瀏覽器相關(guān)
優(yōu)化原則和方向
性能優(yōu)化的原則是以更好的用戶體驗為標(biāo)準(zhǔn),具體就是兩個目標(biāo):
- 多使用內(nèi)存栋猖、緩存或者其他方法忌卤;
- 減少CPU和GPU計算妖异,更快展現(xiàn)喻括。
優(yōu)化的兩個方向:
- 減少頁面體積邀杏、提升網(wǎng)絡(luò)加載
- 靜態(tài)資源的壓縮合并(JS代碼合并、CSS代碼壓縮合并唬血、雪碧圖)
- 靜態(tài)資源緩存
- 使用CDN讓資源加載更快
- 優(yōu)化頁面渲染
- CSS放前面望蜡,JS放后面
- 懶加載(圖片懶加載、下拉加載更多)
- 減少DOM查詢拷恨,對DOM查詢做緩存
- 減少DOM操作脖律,多個操作盡量合并到一起執(zhí)行(DocumentFragment)
- 事件節(jié)流
- 盡早執(zhí)行操作(DOMContenLoaded)
- 使用SSR后端渲染,數(shù)據(jù)直接輸出到HTML中腕侄,減少瀏覽器使用JS模板渲染頁面HTML的時間
上面提到的都是性能優(yōu)化的單個點小泉,性能優(yōu)化項目具體實施起來勒叠,應(yīng)該按下面步驟推進(jìn):
1.建立性能數(shù)據(jù)收集平臺,摸底當(dāng)前性能數(shù)據(jù)膏孟,通過性能打點,將上述整個頁面打開過程消耗時間記錄下來拌汇。
2.分析耗時較長時間段原因柒桑,尋找優(yōu)化點,確定優(yōu)化目標(biāo)
3.開始優(yōu)化
4.通過數(shù)據(jù)收集平臺記錄優(yōu)化效果
5.不斷調(diào)整優(yōu)化點和預(yù)期目標(biāo)噪舀,循環(huán)2-4步驟