建站
咨詢
售后
建站咨詢
新聞中心
前言
無(wú)論是前端還是后端，性能優(yōu)化其實(shí)是每一個(gè)開(kāi)發(fā)都無(wú)法避開(kāi)的大山。另一方面，這種開(kāi)放式的提問(wèn)深受面試官的青睞，能夠快速地區(qū)分求職者的水平。
10年積累的網(wǎng)站建設(shè)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有臨猗免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
網(wǎng)上的答案層出不窮，似乎都只是簡(jiǎn)單羅列了幾個(gè)具體的方案，卻沒(méi)有系統(tǒng)的歸納。為了能夠系統(tǒng)地歸納這個(gè)問(wèn)題，我問(wèn)了幾個(gè)前端大佬，反復(fù)斟酌了一下他們的答案。
總的來(lái)說(shuō)，我認(rèn)為web性能優(yōu)化的方向可以歸納為兩個(gè)：1、優(yōu)化資源加載的時(shí)間；2、優(yōu)化代碼層級(jí)的性能。
資源加載優(yōu)化
我們都知道在瀏覽器打開(kāi)一個(gè)頁(yè)面的時(shí)候，需要加載各種不同的靜態(tài)資源，這個(gè)時(shí)候如果加載的時(shí)間太長(zhǎng)，就會(huì)給用戶帶來(lái)極差的沖浪體驗(yàn)。
既然要提高資源加載的效率，那解決的方案自然就是優(yōu)化資源體積、減少對(duì)資源的請(qǐng)求數(shù)和提高響應(yīng)速度。
1、優(yōu)化資源體積
1）壓縮
我們可以通過(guò)webpack的插件壓縮代碼文件大小，比如CssMinimizerWebpackPlugin、HtmlMinimizerWebpackPlugin等。
圖片也可以通過(guò)降低圖片質(zhì)量、iconfont圖標(biāo)取代圖片圖標(biāo)和采用更小體積的文件格式來(lái)達(dá)到減小體積的目標(biāo)。
另外，服務(wù)配置中開(kāi)啟Gzip，壓縮傳輸時(shí)的資源大小。
2）按需引入
除了壓縮文件，還可以通過(guò)webpack地Tree shaking，按需引入代碼，也能夠有效地減少代碼包的大小。
方法肯定不止上面這些，這里就不一一列舉。
2、減少請(qǐng)求頻率
1）合并CSS、JS文件，減少連接數(shù)。
2）合理地使用緩存，有些資源更新的頻率比較低，可以通過(guò)緩存有效緩解請(qǐng)求壓力。
3）使用懶加載，避免一次性加載所有的資源。
3、提高請(qǐng)求效率
1）使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）
簡(jiǎn)單來(lái)說(shuō)就是在多個(gè)地方部署服務(wù)器，讓用戶從最近的服務(wù)器獲取資源。
2）使用HTTP2
相較于HTTP1,HTTP2的解析速度更快，多路復(fù)用的特性使得它僅僅用一個(gè)TCP連接就可以傳輸所有的數(shù)據(jù)，使得請(qǐng)求的效率大大提升。
代碼層級(jí)的優(yōu)化
代碼層級(jí)的優(yōu)化，也可以叫做運(yùn)行時(shí)性能優(yōu)化，這更多的是在我們寫(xiě)代碼時(shí)要注意的點(diǎn)。
1）盡量規(guī)避不必要的重排和重繪
因?yàn)镴S引擎線程和GUI渲染線程兩者只能有一個(gè)在工作，所以重排和重繪是極其消耗性能的，所以盡可能地要避免這兩個(gè)操作。
常見(jiàn)的例子就是Vue和React的虛擬dom。
還有個(gè)比較容易忽略的場(chǎng)景，就是當(dāng)父組件更新時(shí)，子組件也會(huì)跟著更新，這樣就導(dǎo)致了多余的渲染，在React中，useMemo和useCallback搭配使用，能有效解決該問(wèn)題。
2）防抖和節(jié)流
這就很基本了，舉個(gè)例子吧，比如一般搜索框都會(huì)有模糊搜索的功能，大量的change事件會(huì)導(dǎo)致超高頻率的http請(qǐng)求。
方法肯定還有很多，我一時(shí)也想不起來(lái)了。畢竟能力和見(jiàn)識(shí)都還很有限，大家可以在評(píng)論區(qū)補(bǔ)充一下。
寫(xiě)在最后
突然想著這樣去歸納，是因?yàn)橛X(jué)得每次被問(wèn)起這個(gè)問(wèn)題的時(shí)候，腦子里都是一片渾濁，想到什么說(shuō)什么。但是分成兩個(gè)方向去思考后，覺(jué)得清晰了不少，相信這么說(shuō)也能夠令面試官信服。
本文名稱(chēng)：一文解答Web性能優(yōu)化
本文鏈接：http://www.5511xx.com/article/ccodepo.html
