本文參考
以下是針對目前公司項(xiàng)目(我參與的項(xiàng)目)的具體情況，整理出來的優(yōu)化點(diǎn)
一、目前的spa單頁面應(yīng)用的性能瓶頸主要有哪些？
1、首屏渲染慢
...
(歡迎補(bǔ)充)
二、 原因分析
1、 首屏渲染慢, 主要有以下原因
- 文件過大, 加載、解析占用了過多時間
- 加載了無用的資源(其他頁面的資源)
三、如何優(yōu)化
1. 啟用 Gzip ☆☆☆☆☆
Gzip 壓縮通?？梢詼p少 70% 的響應(yīng)大小，對某些文件更可能高達(dá) 90%。主流 Web 服務(wù)器都有相應(yīng)模塊，而且絕大多數(shù)瀏覽器支持 gzip 解碼。所以，應(yīng)該對 HTML、CSS、JS、XML、JSON 等文本類型的內(nèi)容啟用壓縮。
注意，圖片和 PDF 文件不要使用 gzip。它們本身已經(jīng)壓縮過，再使用 gzip 壓縮不僅浪費(fèi) CPU 資源，而且還可能增加文件體積。
目前我們的服務(wù)器都默認(rèn)開啟了gzip。
2. code-splitting 代碼分割 ☆☆☆☆☆
作用：避免加載不必要的資源。
使用：
# webpack3 使用import() , webpack2使用require.ensure
const riskManage = ()=> import(/* webpackChunkName: 'hfq-****' */ 'pages/****/index')
效果:
- 頁面加載的資源大小從2.3M減少為1.2M, 減少了50%。
-
頁面加載時間從11.04s縮短為8.37s. 頁面加載時間縮短了25%。
優(yōu)化前后對比.jpeg
部分項(xiàng)目未做代碼切割,如boss系統(tǒng)
3. 利用service workers實(shí)現(xiàn)緩存。 ☆☆☆☆
需要在https協(xié)議下運(yùn)行, 可大幅提高用戶體驗(yàn),目前沒有項(xiàng)目用到。
4. 圖片優(yōu)化 ☆☆☆
- 響應(yīng)式圖片
- 圖片懶加載, 推薦一款插件lazyload
- 優(yōu)化圖片格式
適用于圖片比較多的應(yīng)用。
5. 資源加載優(yōu)化(提前加載、延遲加載、異步加載) ☆☆☆
defer 異步加載腳本,所有元素加載完成之后, DOMContentLoaded事件觸發(fā)之前執(zhí)行。
-
async 異步加載腳本，加載完即執(zhí)行。
image.png prefecth 加載下一個頁面可能用到的資源
preload 提前加載當(dāng)前頁面的資源
對于當(dāng)前頁面很有必要的資源使用
preload，對于可能在將來的頁面中使用的資源使用prefetch。
- dns-prefetch DNS預(yù)解析
適用于大多數(shù)項(xiàng)目
6. 優(yōu)先加載關(guān)鍵的css ☆☆
- 優(yōu)化首屏渲染
7. Intersection Observer 判斷元素是否出現(xiàn)在視圖中 ☆☆
- 資源(如圖片)懶加載
- 列表滾動加載
8. 字體優(yōu)化 ☆☆
9. 合理使用CDN ☆☆☆☆
...
歡迎補(bǔ)充
附上幾篇好文:
