浏览器缓存原理

名词解释

• expires: Thu, 24 Nov 2022 07:59:16 GMT响应头，代表该资源的过期时间。
• last-modified: Mon, 08 Nov 2021 11:58:00 GMT响应头，资源最近修改时间，由服务器告诉  浏览器。
• cache-control: public, max-age=31536000请求/响应头，缓存控制字段，精确控制缓存策略
• etag: W/"61974470-10c4"响应头，资源标识，由服务器告诉浏览器。

缓存过程

• 第一次请求数据时，无缓存，直接向服务器发出数据请求，服务器返回：最近数据 ，Expires，Cache-Control: max-age = 10，上次文件修改时间Last-Modified，以及文件的Etag。
• 第二次请求数据时候，有缓存，先优先查看是否超过Cache-Control，如果没有超过，直接用缓存数据，如果超过了，携带If-Modified-Since,If-None-Cache(Tag值),直接向服务器发送请求。如果没有Cache-Control才会检查Expires。
• 服务器收到浏览器请求，优先比较If-None-Cache和服务器端文件的Etag值是否一致，如果不一致则返回新数据，如果一致则通知浏览器继续使用本地缓存（状态码：304）。如果没有If-None-Cache，才会比较If-Modified-Since。

关于刷新

• 当ctrl+f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存。
• 当f5刷新网页时(等同于刷新按钮)，跳过强缓存，但是会检查协商缓存。
• 浏览器地址栏中写入URL，回车 浏览器发现缓存中有这个文件了，不用继续请求了，直接去缓存拿。（最快）