前言
無論是前端還是后端，性能優(yōu)化其實是每一個開發(fā)都無法避開的大山行嗤。另一方面已日，這種開放式的提問深受面試官的青睞，能夠快速的區(qū)分求職者的水平栅屏。
網(wǎng)上的答案層出不窮飘千，似乎都只是簡單羅列了幾個具體的方案，卻沒有系統(tǒng)的歸納栈雳。為了能夠系統(tǒng)的歸納這個問題护奈，我問了幾個前端大佬，反復(fù)斟酌了一下他們的答案哥纫。
總的來說逆济，我認為web性能優(yōu)化的方向可以歸納為兩個：1、優(yōu)化資源加載的時間；2奖慌、優(yōu)化代碼層級的性能抛虫。
資源加載優(yōu)化
我們都知道在瀏覽器打開一個頁面的時候，需要加載各種不同的靜態(tài)資源简僧，這個時候如果加載的時間太長建椰，就會給用戶帶來極差的沖浪體驗。
既然要提高資源加載的效率岛马，那解決的方案自然就是優(yōu)化資源體積棉姐、減少對資源的請求數(shù)和提高響應(yīng)速度。
1啦逆、優(yōu)化資源體積
1）壓縮
我們可以通過webpack的插件壓縮代碼文件大小伞矩，比如CssMinimizerWebpackPlugin、HtmlMinimizerWebpackPlugin等夏志。
圖片也可以通過降低圖片質(zhì)量乃坤、iconfont圖標(biāo)取代圖片圖標(biāo)和采用更小體積的文件格式來達到減小體積的目標(biāo)。
另外沟蔑，服務(wù)配置中開啟Gzip湿诊，壓縮傳輸時的資源大小。
2）按需引入
除了壓縮文件瘦材，還可以通過webpack地Tree shaking厅须，按需引入代碼，也能夠有效的減少代碼包的大小食棕。
方法肯定不止上面這些朗和，這里就不一一列舉。
2簿晓、減少請求頻率
1）合并CSS眶拉、JS文件，減少連接數(shù)抢蚀。
2）合理的使用緩存，有些資源更新的頻率比較低镰禾，可以通過緩存有效緩解請求壓力皿曲。
3）使用懶加載，避免一次性加載所有的資源吴侦。
3屋休、提高請求效率
1）使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）
簡單來說就是在多個地方部署服務(wù)器，讓用戶從最近的服務(wù)器獲取資源备韧。
2）使用HTTP2劫樟。
相較于HTTP1,HTTP2的解析速度更快，多路復(fù)用的特性使得它僅僅用一個TCP連接就可以傳輸所有的數(shù)據(jù)，使得請求的效率大大提升叠艳。
代碼層級的優(yōu)化
代碼層級的優(yōu)化奶陈，也可以叫做運行時性能優(yōu)化，這更多的是在我們寫代碼時要注意的點附较。
1）盡量規(guī)避不必要的重排和重繪
因為JS引擎線程和GUI渲染線程兩者只能有一個在工作吃粒，所以重排和重繪是極其消耗性能的，所以盡可能地要避免這兩個操作拒课。
常見的例子就是Vue和React的虛擬dom徐勃。
還有個比較容易忽略的場景，就是當(dāng)父組件更新時早像，子組件也會跟著更新僻肖，這樣就導(dǎo)致了多余的渲染，在React中卢鹦，useMemo和useCallback搭配使用臀脏，能有效解決該問題。
2）防抖和節(jié)流
這就很基本了法挨，舉個例子吧谁榜，比如一般搜索框都會有模糊搜索的功能，大量的change事件會導(dǎo)致超高頻率的http請求凡纳。
方法肯定還有很多窃植，我一時也想不起來了。畢竟能力和見識都還很有限荐糜，大家可以在評論區(qū)補充一下巷怜。
寫在最后
突然想著這樣去歸納，是因為覺得每次被問起這個問題的時候暴氏，腦子里都是一片渾濁延塑，想到什么說什么。但是分成兩個方向去思考后答渔，覺得清晰了不少关带，相信這么說也能夠令面試官信服。
