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

【合并】

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

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

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

3、經(jīng)過代理服務(wù)器時可能會被斷開

但是，文件合并本身也有自己的問題

1、首屏渲染問題

2、緩存失效問題

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

1、公共庫合并

2、不同頁面單獨合并

【圖片處理】

1、雪碧圖

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

2、Base64

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

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

【減少重定向】

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

如果一定要使用重定向，如http重定向到https，要使用301**重定向，而不是302臨時重定向。因為，如果使用302，則每一次訪問http，都會被重定向到https的頁面。而**重定向，在第1次從http重定向到https之后 ，每次訪問http，會直接返回https的頁面

【使用緩存】

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

【不使用CSS @import】

CSS的@import會造成額外的請求

【避免使用空的src和href】

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

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