讀書(shū)筆記如何進(jìn)行web前端性能優(yōu)化？

提起Web前端性能優(yōu)化的問(wèn)題，前端開(kāi)發(fā)人員非常熟悉，對(duì)于一個(gè)網(wǎng)站而言，即使內(nèi)容和功能再優(yōu)秀，如果用戶需要花費(fèi)很久的時(shí)間才能打開(kāi)，這樣遲早會(huì)消耗用戶的耐心，并最終失去用戶。

那如何才能優(yōu)化前端性能？歸納為三步

一、關(guān)鍵資源字節(jié)數(shù)

字節(jié)數(shù)也就是通常說(shuō)的減少資源文件（js、css、image、video...）的大小。

1、壓縮

前端使用uglify混淆壓縮

后端開(kāi)啟gzip

對(duì)圖片進(jìn)行壓縮，使用壓縮比例更高的格式（WebP）

2、緩存

強(qiáng)緩存（http狀態(tài)碼：200），不用請(qǐng)求服務(wù)器直接使用本地緩存，協(xié)商緩存（http狀態(tài)碼：304），使用時(shí)先請(qǐng)求服務(wù)器若被告知緩存沒(méi)過(guò)期則使用本地緩存，不用下載資源，使用localstorage對(duì)數(shù)據(jù)進(jìn)行存儲(chǔ)。

3、針對(duì)首屏優(yōu)化

對(duì)非關(guān)鍵資源延遲加載、異步加載，減少首屏資源大小

二、關(guān)鍵資源連接數(shù)

1、合并請(qǐng)求

使用http2.0的多路復(fù)用合并請(qǐng)求配置combo，在無(wú)法使用http2.0的情況下作為一種合并資源請(qǐng)求的手段。

2、減少圖片請(qǐng)求數(shù)

使用spite圖，使用svg-symbol。

3、針對(duì)一些場(chǎng)景采用css、js內(nèi)聯(lián)的方式。

4、使用強(qiáng)緩存減少了一次服務(wù)器請(qǐng)求。

5、非關(guān)鍵資源延遲、異步加載，減少了首屏資源連接數(shù)。

三、關(guān)鍵渲染路徑

1、bigpipe分塊輸出

這里主要是因?yàn)橐瓿梢徽麄€(gè)頁(yè)面的輸出后端需要處理很多個(gè)任務(wù)，我們可以將這些多個(gè)任務(wù)進(jìn)行分塊，誰(shuí)先完成誰(shuí)就先輸出，最終通過(guò)JS回填的方式輸出DOM節(jié)點(diǎn)，這種方式主要解決了直出頁(yè)面阻塞的問(wèn)題。

2、bigrender分塊渲染

常規(guī)的手段就是采用前端模板渲染頁(yè)面，針對(duì)首屏?xí)r間主要減少了首次構(gòu)建DOM樹(shù)時(shí)的節(jié)點(diǎn)數(shù)

3、針對(duì)reflow，repaint，composit路徑處理。

4、涉及到動(dòng)畫(huà)時(shí)關(guān)于layer的概念render layer、graphics layer。

5、css放在頭部、js放底部避免阻塞DOM樹(shù)的構(gòu)建，關(guān)于css、js的位置對(duì)于頁(yè)面渲染的影響大家可以關(guān)注下相關(guān)的文章。核心：css資源不會(huì)阻塞DOM樹(shù)的構(gòu)建但會(huì)阻塞DOM的渲染，JS會(huì)阻塞DOM樹(shù)的構(gòu)建，CSS會(huì)阻塞JS的執(zhí)行。

以上就是針對(duì)Web前端性能優(yōu)化歸納出的解決方案。更多Web前端學(xué)習(xí)資料，關(guān)注“武漢千鋒”微信公眾號(hào)領(lǐng)取。