WebApp首屏優化

背景

在進行webapp開發時，如果使用vue或者react類似的框架，並且採用的單頁應用的模式，那首屏加載肯定會遇到白屏時間過長的問題。

如果我們只是自己寫個demo，那麼等待一會沒有任何關係。但是如果是一個商業應用，那你可能會因此流失一批客戶。

一般來說如果3秒鐘，網頁沒有打開，20%的新用戶會直接離開。剩下的會進行刷新操作，如果還是沒有打開，60%的新用戶會離開。其實這個時候你的應用曝光的機會已經很渺茫了。

因素

影響首屏加載快慢的因素有很多。我們主要有以下幾個方面：

1. 內容
2. 服務器
3. Cookie
4. CSS
5. JavaScript
6. Image

解決

其實總的來說，最爲根本的就是加快http請求速度，減小http請求數量。

減少http請求數量

我們先從減少http請求開始：

1. 使用緩存。如強緩存和協商緩存
2. 圖片精靈技術。將一些小的圖標合成在一張大圖上，使用CSS中的background-position屬性去定位到想要的圖標
3. 可以將一些複用度比較高的圖片轉爲base64。跟隨CSS或者JS文件一起返回
4. 合併CSS或JS文件。可以將多個體積較小的CSS或JS文件合併後返回

加快http請求速度

再說加快http請求速度：

1. 使用CDN服務。CDN服務可以對網絡線路進行優化，就近原則
2. 使用獨立的圖片域名服務器。瀏覽器默認同一域名同時只能進行一定數量的請求（每個瀏覽器廠商有所差異），所以使用不同的域名能提高http請求的併發數
3. 使用gzip對傳輸內容進行壓縮
4. 壓縮CSS和JS體積
5. 去掉無用的CSS和JS代碼
6. 可以使用webp格式的圖片。webp格式在相同的畫質下，比png和jpg的體積40%左右
7. 減少cookie體積。瀏覽器發送請求時，會默認攜帶cookie

首屏渲染

1. 將CSS放在head中，將JS放在底部。減少阻塞渲染的CSS和JS
2. 將首屏非必須的CSS或者JS文件延遲加載
3. 對於圖片可以進行懶加載
4. 預加載關鍵請求。比如hybrid app中，可以在原生中發送數據請求，打開h5頁面時，直接從原生拿到數據，而不用在h5頁面中發送
5. 服務端渲染。服務端直接返回解析好的頁面，這樣可以減少文件體積和瀏覽器解析js渲染頁面的時間

體驗優化

1. loading旋轉動畫
2. 進度條
3. 骨架屏。餓了麼團隊開源了一個自動生成骨架屏的工具

參考：https://web.dev/fcp