如何優(yōu)化前端性能（一）：減少請(qǐng)求數(shù)量

【合并】

如果不進(jìn)行文件合并，有如下3個(gè)隱患

1、文件與文件之間有插入的上行請(qǐng)求，增加了N-1個(gè)網(wǎng)絡(luò)延遲

2、受丟包問(wèn)題影響更嚴(yán)重

3、經(jīng)過(guò)代理服務(wù)器時(shí)可能會(huì)被斷開

但是，文件合并本身也有自己的問(wèn)題

1、首屏渲染問(wèn)題

2、緩存失效問(wèn)題

所以，對(duì)于文件合并，有如下改進(jìn)建議

1、公共庫(kù)合并

2、不同頁(yè)面單獨(dú)合并

【圖片處理】

1、雪碧圖

CSS雪碧圖是以前非常流行的技術(shù)，把網(wǎng)站上的一些圖片整合到一張單獨(dú)的圖片中，可以減少網(wǎng)站的HTTP請(qǐng)求數(shù)量，但是當(dāng)整合圖片比較大時(shí)，一次加載比較慢。隨著字體圖片、SVG圖片的流行，該技術(shù)漸漸退出了歷史舞臺(tái)

2、Base64

將圖片的內(nèi)容以Base64格式內(nèi)嵌到HTML中，可以減少HTTP請(qǐng)求數(shù)量。但是，由于Base64編碼用8位字符表示信息中的6個(gè)位，所以編碼后大小大約比原始值擴(kuò)大了 33%

3、使用字體圖標(biāo)來(lái)代替圖片

【減少重定向】

盡量避免使用重定向，當(dāng)頁(yè)面發(fā)生了重定向，就會(huì)延遲整個(gè)HTML文檔的傳輸。在HTML文檔到達(dá)之前，頁(yè)面中不會(huì)呈現(xiàn)任何東西，也沒(méi)有任何組件會(huì)被下載，降低了用戶體驗(yàn)

如果一定要使用重定向，如http重定向到https，要使用301**重定向，而不是302臨時(shí)重定向。因?yàn)?，如果使?02，則每一次訪問(wèn)http，都會(huì)被重定向到https的頁(yè)面。而**重定向，在第1次從http重定向到https之后 ，每次訪問(wèn)http，會(huì)直接返回https的頁(yè)面

【使用緩存】

使用cach-control或expires這類強(qiáng)緩存時(shí)，緩存不過(guò)期的情況下，不向服務(wù)器發(fā)送請(qǐng)求。強(qiáng)緩存過(guò)期時(shí)，會(huì)使用last-modified或etag這類協(xié)商緩存，向服務(wù)器發(fā)送請(qǐng)求，如果資源沒(méi)有變化，則服務(wù)器返回304響應(yīng)，瀏覽器繼續(xù)從本地緩存加載資源；如果資源更新了，則服務(wù)器將更新后的資源發(fā)送到瀏覽器，并返回200響應(yīng)

【不使用CSS @import】

CSS的@import會(huì)造成額外的請(qǐng)求

【避免使用空的src和href】

a標(biāo)簽設(shè)置空的href，會(huì)重定向到當(dāng)前的頁(yè)面地址

form設(shè)置空的method，會(huì)提交表單到當(dāng)前的頁(yè)面地址