【合并】
如果不進行文件合并,有如下3個隱患
1、文件與文件之間有插入的上行請求,增加了N-1個網絡延遲
2、受丟包問題影響更嚴重
3、經過代理服務器時可能會被斷開
但是,文件合并本身也有自己的問題
1、首屏渲染問題
2、緩存失效問題
所以,對于文件合并,有如下改進建議
1、公共庫合并
2、不同頁面單獨合并
【圖片處理】
1、雪碧圖
CSS雪碧圖是以前非常流行的技術,把網站上的一些圖片整合到一張單獨的圖片中,可以減少網站的HTTP請求數量,但是當整合圖片比較大時,一次加載比較慢。隨著字體圖片、SVG圖片的流行,該技術漸漸退出了歷史舞臺
2、Base64
將圖片的內容以Base64格式內嵌到HTML中,可以減少HTTP請求數量。但是,由于Base64編碼用8位字符表示信息中的6個位,所以編碼后大小大約比原始值擴大了 33%
3、使用字體圖標來代替圖片
【減少重定向】
盡量避免使用重定向,當頁面發生了重定向,就會延遲整個HTML文檔的傳輸。在HTML文檔到達之前,頁面中不會呈現任何東西,也沒有任何組件會被下載,降低了用戶體驗
如果一定要使用重定向,如http重定向到https,要使用301永久重定向,而不是302臨時重定向。因為,如果使用302,則每一次訪問http,都會被重定向到https的頁面。而永久重定向,在第1次從http重定向到https之后 ,每次訪問http,會直接返回https的頁面
【使用緩存】
使用cach-control或expires這類強緩存時,緩存不過期的情況下,不向服務器發送請求。強緩存過期時,會使用last-modified或etag這類協商緩存,向服務器發送請求,如果資源沒有變化,則服務器返回304響應,瀏覽器繼續從本地緩存加載資源;如果資源更新了,則服務器將更新后的資源發送到瀏覽器,并返回200響應
【不使用CSS @import】
CSS的@import會造成額外的請求
【避免使用空的src和href】
a標簽設置空的href,會重定向到當前的頁面地址
form設置空的method,會提交表單到當前的頁面地址