參考：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步驟
