前端性能該如何做優化

前端性能該如何做優化

“學與思，琢與磨，知與行，相交錯”

01 前言

---

當我們打開一個網頁的時候，要是運行流暢，體驗良好，我們很大程度會經常訪問，這就有了用戶。相反，如果網站卡頓，內容遲遲沒有加載出來，即使你的網站質量很好，也有可能失去用戶。前端如今越來越偏向於用戶體驗方面來，正如winter所說，前端仍然是一個比較新的崗位，有很多可以開發的地方。

那麼我們如何讓用戶覺得這是一個運行流暢的網站呢？你想像淘寶那樣航母級的移動應用，性能首先是放在很重要的位置，如果每一次打開都是卡頓，我想人們會變得急躁，也不願意去用這個軟件，當然有替代品的情況下。接下來我會總結一下前端到底可以在哪些方面可以做優化，其中有一些我也沒有實踐過。

02 首屏與白屏

---

我從用戶體驗上面，我講一下如何讓別人覺得你的網站性能不錯，即使是一個假象。有兩個方面，一個是首屏，一個是白屏。

• 首屏：首屏其實是頁面從開始到完全顯示出來所花費的時間，這個時間越短越好，會讓人覺得你的網站性能不錯，短時間就加載出來。因爲用戶想要他所需要的信息，一秒都不願意多等。

• 白屏：白屏就是網站從一個空白頁面，到第一張圖片或者某一部分內容開始顯示的時間，這個時間也是越短越好，基本上要做到一下子就可以顯示出所有內容最好。

那麼有哪些因素會影響這個時間呢？

• 網絡速度
• 首屏的內容比較複雜
• 瀏覽器沒有做緩存
• 初始化加載網站所有資源

首先第一個網絡速度是我們的問題，假如網絡速度很慢難免會出現這個問題，所以這一部分也需要網站的配合，把數據返回儘量減少，這樣即使網絡很慢也可以較快顯示出來。

第二是頁面內容不應該很複雜，一般打開某個官網都是介紹頁面，儘量做得簡潔明瞭，如果有圖片儘量無損壓縮一下或者使用svg格式的。頁面也無需過於複雜，有三屏長度即可。比如Ant Design的官網就是比較簡潔的，沒有冗餘部分，圖片也是大多數是使用svg的格式。

關於瀏覽器緩存部分一定要做好，因爲一般首屏都會固定的頁面，沒有過多的交互，一般也是靜態的頁面，瀏覽器可以直接緩存下來，用戶再次打開就不用重新請求資源。

初始化加載一部分資源即可，從用戶的角度來說，一般用戶不會上來就把每一個按鈕的點擊一遍或者每條信息都打開。所以我們只需要加載首屏信息即可，後面點擊後再加載，不要佔用首屏的帶寬。

03 優化方法

---

優化方法是多方面的內容，主要有以下幾個方面：

• 加載優化
• CSS優化
• 圖片優化
• 腳本優化
• 渲染優化

加載優化

加載無非也是發送HTTP請求，那麼我們減少請求的發送或者壓縮請求的大小即可達到效果。常見的做法有：

1. 合併CSS、JavaScript內容、圖片（雪碧圖）
2. 啓用Gzip、壓縮HTML、JavaScript和CSS資源
3. 異步加載第三方資源
4. 使用緩存
5. 避免重定向
   

CSS優化

常見優化做法：

1. 正確使用CSS選擇符，避免嵌套
2. 減少使用display屬性，可用visibility代替
3. 不要聲明過多的font-size
4. 儘量避免寫內部樣式
5. 減少設置圖片的大小

圖片優化

圖片是佔用比較多的帶寬資源，圖片到了今天也依舊是比較大的，所以建議大家使用CSS3或者svg格式來代替傳統圖片，使用Webp和png類型的圖片。HTTP-Archive這個網站會定期分析網絡上的圖片資源請求情況，我們可以看到圖片的依舊是比較大的。

腳本優化

我們知道DOM的操作是昂貴的，因爲這涉及到瀏覽器的解析線程和渲染線程的通信，頻繁操作很產生比較大的線程通信消耗。我們常有以下方法：

1. 減少使用DOM操作
2. 使用事件代理，減少事件的批量綁定
3. 減少重繪和迴流

渲染優化

1. 減少DOM節點的使用
2. 使用css3來製作動畫
3. HTML使用Viewport

04 小結

---

優化做好之後，我們就可以提升用戶體驗，留住用戶。其實優化的方案遠不及以上的策略，還有很多可以使用的，比如現在前端離不開的webpack打包方案，也是可以優化的，只要配置好規則即可，剩下的交給webpack來做。

以上只是一些原理性的建議，還要好好實踐一下纔可以知道哪種方法適合我們的網站，利用谷歌瀏覽器F12調試可以查看到底是哪一個請求消耗的時間比較多，我們就可以具體優化。