高效能建設指南-3.新增Expires頭
阿新 • • 發佈:2018-11-20
1簡介--在伺服器端
1.1新增Expires頭,可以最大化地利用瀏覽器的快取能力來改善頁面的效能。
1.2長久的Expires頭最常用於圖片,但應該將其用在所有元件上,包括指令碼、樣式表和Flash。
1.3瀏覽器(和代理)使用快取來減少HTTP請求的數量,並減小HTTP響應的大小,使Web頁面載入的更快。
1.4Web伺服器使用Expires頭來告訴Web客戶端,它可以使用一個元件的當前副本,知道指定的時間為止。
特別注意:Expires頭的限制:因為Expires頭需要使用一個特定的時間,它要求伺服器和客戶端的時鐘嚴格同步。
1.5另一種形式:Cache-Control,HTTP1.1引入的,max-age指令指定元件被快取多久,以秒為單位。
例:Cache-Control:max-age=315360000 //未來10年重新整理
1.6不支援HTTP1.1的瀏覽器(可能僅佔1%以內),利用Expires。
1.7推薦寫法:Expires和Cache-Control max-age同時指定。
1.8更加完善的寫法:在伺服器端mode_expires的Apache模組設定
https://my.oschina.net/ososchina/blog/866627
1.9跨瀏覽器改善快取的最佳解決方案:使用由ExpiresDefault設定的Expires頭。
2空快取和完整快取
2.1與頁面相關的瀏覽器快取的狀態,如果元件還沒有放在快取中,稱快取為空;頁面中的可快取元件都在快取中,稱快取是完整的。
2.2擁有完整快取的,每天至少訪問一次的唯一使用者數佔40%-60%;帶有完整快取的頁面瀏覽數量為75%-85%。
2.3通過使用長久的Expires頭可以增加被瀏覽器快取的元件的數量,並在後續頁面瀏覽中重用它們,而無需使用者的Internet連線傳送一個位元組。
3
3.1HTML文件不應該使用Expires頭
3.2理論上,頁面中所有元件都應該具有長久的Expires頭。當文件中的元件都是從瀏覽器快取中讀取時,響應時間會減少50%或更多。
3.3如果元件是因為經常變化而不被快取,我們期望看到很近的Last-Modified日期。
3.4 如何設定圖片、js/css等快取--在web伺服器上快取,例如在比如IIS中
1 選中images/目錄,右鍵屬性 - HTTP頭 - 選擇啟用過期- 輸入過期時間或時間段。
2 自定義HTTP頭-新增-名稱是ETag, 值為空 - 確定
3.5 html5支援離線快取 https://www.cnblogs.com/wuzhiquan/p/4844258.html
4.修訂檔名
4.1為確保使用者能獲取元件的最新版本,需要在所有的html頁面中修改元件的檔名。
4.2解決方案:為所有元件的檔名使用變數--例如將版本號嵌入到檔名中(例yahoo_2.0.6.js),而且在全域性對映中修訂過的檔名會自動更新。
5 總結
所以說,頁面中的元件,應設定長久Expires頭,這樣其會被快取,在後續請求時,瀏覽器直接從硬碟上讀取。→為元件新增長久的Expires頭