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