前端性能優化之緩存


瀏覽器的緩存策略通常分為兩種:強緩存和協商緩存

強緩存

強緩存表示在緩存期間不需要請求。可以通過設置兩中響應頭來實現 Expires和 Cache-control。

Expires: Thu, 23 May 2030 04:33:16 GMT

Expires出現於HTTP1.0。后面跟的是GMT時間,表示該資源會在該時間之后過期。但是會受到本地時間影響,自行修改時間之后會導致緩存失效。

Cache-Control: max-age=1000

Cache-Control出現於HTTP1.1,優先級高於Expires。表示資源在1000秒 后過期

協商緩存

協商緩存,顧名思義,需要進行協商,也就是需要客戶端發起請求。如果緩存有效返回304

Last-ModifiedIf-Modified-Since

Last-Modified表示本地文件最后修改日期,If-Modified-Since會將 Last-Modified的值發送給服務器,詢問服務器在該日期后資源是否有更新,有更新的話就會將新的資源發送回來。如果本地打開緩存文件,也會造成Last-Modified被修改

ETagIf-None-Match

ETag類似於文件指紋,If-None-Match會將當前ETag發送給服務器,詢問該資源ETag是否有變動,有變動的話就將新的資源發送回來。並且ETag優先級比Last-Modified高

如何選擇緩存策略

一般情況下根據業務 使用強緩存配合協商緩存就足夠了,特殊情況下選擇特殊的策略

  • 如果某些資源不需要緩存,使用Cache-Control: no-store,表示該資源不需要緩存(緩存禁用,客戶端不會發起請求,而no-cache表示的是向服務器驗證是否能使用本地緩存)
  • 對於頻繁變動的資源,可以使用Cache-Control: no-cache 並ETag使用,表示該資源已被緩存,但是每次都會發送請求詢問資源是否更新
  • 對於代碼文件,通常使用 Cache-Control: max-age=31536000 並配合策略緩存使用,然后對文件進行指紋處理,一旦文件名變動就會立即下載新的文件


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM