前端性能優(yōu)化
1.網(wǎng)絡(luò)請求
DNS 查詢優(yōu)化
- 減少請求域名數(shù)量
減少請求數(shù)
- 合并文件 css
- 合并 js
-
Sprites（精靈圖）
spirits.png
spirit.png
- 小圖標(biāo)進(jìn)行 base64轉(zhuǎn)換
減小請求體積
壓縮 HTML CSS JS
瀏覽器同域并發(fā)限制（增加請求域名量）
-
Cookie 隔離
本域.png非本域.png
非本域圖片請求頭中默認(rèn)攜帶的無用信息數(shù)量明顯少了很多
- 開啟gzip
- 使用更小體積的圖片（svg, webp）
- 減少cookie大小
2.靜態(tài)資源
懶加載
- vue 路由懶加載
- 圖片懶加載
預(yù)加載
- 預(yù)加載相關(guān)資源
- 公共數(shù)據(jù)抽離缘揪，緩存
3.首頁渲染
減少等待時間
- 頁面占位符
- 預(yù)覽圖片
減少使用拖慢頁面的元素
- iframe標(biāo)簽
- eval
- @import
非當(dāng)前頁面元素在渲染完頁面后加載
- 埋點
- 圖片預(yù)渲染
- 相關(guān)頁面預(yù)渲染
4.頁面交互
減少操作頁面的次數(shù)
- 合并修改頁面的操作
- 合并css修改
- 采用更合適的事件綁定模式
減少重繪回流范圍
- 避免頁面跳轉(zhuǎn)
- 只更新相關(guān)元素
