image.png

浏览器缓存原理

image.png

简介&术语

image.png

浏览器缓存分类 & 加载页面流程

第三点新请求不做缓存
image.png

强缓存

cache译=缓存
image.png

Expires

Expires译=过期
image.png
image.png

Cache-Control

image.png
image.png
image.png

代码示例

服务端设置是否强缓存和过期时间
#为注释内容
image.png

强缓存的意义

服务器的配置是有限的，比如只能同时服务5000并发（强缓存不会向服务器发送请求），设置了强缓存的话可能服务50000并发，十台服务器只需要买一台就行。

协商缓存

image.png

原理

浏览器问服务器，我缓存的文件是否有更新？

  1. 没有更新 浏览器库用缓存 状态码304
  2. 更新了 浏览器不能用缓存 服务器发送新的给浏览器 状态码200

    Last-Modify/If-Modify-since

    image.png
    image.png

    Etag/If-None-Match

    image.png