浏览器的缓存机制

背景

从输入URL地址到看到页面，第一步：URL解析；第二步：缓存检查；第三步：DNS解析；第四步：TCP三次握手；第五步：数据传输；第六步：TCP四次挥手；第七步：页面渲染；
以下总结缓存检查这一模块

缓存位置

Memory Cache : 内存缓存
Disk Cache：硬盘缓存

可以从开发者工具看到

缓存分类

强缓存 Expires / Cache-Control
浏览器对于强缓存的处理：根据第一次请求资源时返回的响应头来确定的
Expires：缓存过期时间，用来指定资源到期的时间（HTTP/1.0）
Cache-Control：cache-control: max-age=2592000第一次拿到资源后的2592000秒内（30天），再次发送请求，读取缓存中的信息（HTTP/1.1）
两者同时存在的话，Cache-Control优先级高于Expires

image.png

协商缓存 Last-Modified / ETag
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程

image.png

查找缓存过程

打开网页：查找 disk cache 中是否有匹配，如有则使用，如没有则发送网络请求
普通刷新 (F5)：因TAB没关闭，因此memory cache是可用的，会被优先使用，其次才是disk cache
强制刷新 (Ctrl + F5)：浏览器不使用缓存，因此发送的请求头部均带有 Cache-control: no-cache，服务器直接返回 200 和最新内容
详见下图