前言

無論是前端還是后端，性能優化其實是每一個開發都無法避開的大山。另一方面，這種開放式的提問深受面試官的青睞，能夠快速地區分求職者的水平。

網上的答案層出不窮，似乎都只是簡單羅列了幾個具體的方案，卻沒有系統的歸納。為了能夠系統地歸納這個問題，我問了幾個前端大佬，反復斟酌了一下他們的答案。

總的來說，我認為web性能優化的方向可以歸納為兩個：1、優化資源加載的時間；2、優化代碼層級的性能。

資源加載優化

我們都知道在瀏覽器打開一個頁面的時候，需要加載各種不同的靜態資源，這個時候如果加載的時間太長，就會給用戶帶來極差的沖浪體驗。

既然要提高資源加載的效率，那解決的方案自然就是優化資源體積、減少對資源的請求數和提高響應速度。

1、優化資源體積

1）壓縮

我們可以通過webpack的插件壓縮代碼文件大小，比如CssMinimizerWebpackPlugin、HtmlMinimizerWebpackPlugin等。

圖片也可以通過降低圖片質量、iconfont圖標取代圖片圖標和采用更小體積的文件格式來達到減小體積的目標。

另外，服務配置中開啟Gzip，壓縮傳輸時的資源大小。

2）按需引入

除了壓縮文件，還可以通過webpack地Tree shaking，按需引入代碼，也能夠有效地減少代碼包的大小。

方法肯定不止上面這些，這里就不一一列舉。

2、減少請求頻率

1）合并CSS、JS文件，減少連接數。

2）合理地使用緩存，有些資源更新的頻率比較低，可以通過緩存有效緩解請求壓力。

3）使用懶加載，避免一次性加載所有的資源。

3、提高請求效率

1）使用CDN（內容分發網絡）

簡單來說就是在多個地方部署服務器，讓用戶從最近的服務器獲取資源。

2）使用HTTP2

相較于HTTP1,HTTP2的解析速度更快，多路復用的特性使得它僅僅用一個TCP連接就可以傳輸所有的數據，使得請求的效率大大提升。

代碼層級的優化

代碼層級的優化，也可以叫做運行時性能優化，這更多的是在我們寫代碼時要注意的點。

1）盡量規避不必要的重排和重繪

因為JS引擎線程和GUI渲染線程兩者只能有一個在工作，所以重排和重繪是極其消耗性能的，所以盡可能地要避免這兩個操作。

常見的例子就是Vue和React的虛擬dom。

還有個比較容易忽略的場景，就是當父組件更新時，子組件也會跟著更新，這樣就導致了多余的渲染，在React中，useMemo和useCallback搭配使用，能有效解決該問題。

2）防抖和節流

這就很基本了，舉個例子吧，比如一般搜索框都會有模糊搜索的功能，大量的change事件會導致超高頻率的http請求。

方法肯定還有很多，我一時也想不起來了。畢竟能力和見識都還很有限，大家可以在評論區補充一下。

寫在最后

突然想著這樣去歸納，是因為覺得每次被問起這個問題的時候，腦子里都是一片渾濁，想到什么說什么。但是分成兩個方向去思考后，覺得清晰了不少，相信這么說也能夠令面試官信服。