前端缓存 ​

浏览器缓存 ​

浏览器会对网络资源进行本地磁盘的存储，当用户再次访问同一资源时，浏览器将会直接从本地加载该资源。

流程：

• 浏览器请求->无缓存->向服务器请求->返回请求结果与缓存信息->页面呈现
• 浏览器请求->有缓存->缓存过期(Expire/Cache-Control)->携带标识(If-Modified-Since/If-None-Match)向服务器请求->从缓存读取->页面

HTTP 缓存 ​

浏览器缓存一般会在本地内存中开辟一块内存区域（memory cache），同时也会在本地磁盘中开辟一块区域（disk cache）

几个缓存字段概念（可以在浏览器请求的 Response Headers 中查看）：

expires ​

HTTP1.0 实现的控制缓存到期时间的字段，值为格林尼治时间戳；由于会受本地时间影响，该值不准确。

Cache-Control ​

HTTP1.1实现，解决expire不准确问题。它的优先级高于expire，常用值如下：

• no-cache 客户端缓存资源需要与服务器协商;
• no-store 不使用缓存;
• max-age 缓存最大周期，单位/秒，它是相对请求发起时间作为原点进行计算;
• public 允许被中间者（如CDN，代理服务器）缓存;

Last Modified ​

服务器告诉浏览器当前资源的最后修改时间

If-Modified-Since ​

如果浏览器第一次请求时响应的 Last Modified 不为空，则在第二次请求同一资源时将 Last Modified 值发送给服务器

ETag ​

服务器告诉浏览器当前资源的hash值，该字段是为了解决 Cache-Control 的 max-age 最小时间1秒内文件被修改问题

If-None-Match ​

如果浏览器第一次请求时响应的 ETag 不为空，则在第二次请求同一资源时将 ETag 值发送给服务器

强缓存 ​

当用户访问页面时候，页面不会向服务器发送资源请求，而是直接从浏览器缓存中读取资源，并返回200状态码。

协商缓存 ​

协商缓存时在强缓存失效后，浏览器会携带缓存标识 ETag 向服务器发送请求，由服务器根据缓存标识来决定是否使用缓存。

概述：浏览器查看本地缓存文件是否失效，未失效则携带标识(Etag)询问服务器资源是否变更，若未变更，则返回304，若已变更，则返回新资源，并返回200状态，浏览器将资源存入本地缓存。

• 协商缓存成功： 流程：浏览器发起HTTP请求询问本地缓存->请求缓存结果失败，返回缓存标识->携带缓存标识发起服务器请求->资源无更新，返回304->浏览器从本地缓存中获取结果->返回缓存结果
• 协商缓存失败 流程：浏览器发起HTTP请求询问本地缓存->请求缓存结果失败，返回缓存标识->携带缓存标识发起服务器请求->资源已更新，返回200与新资源->浏览器将新资源与缓存标识存入缓存中

项目缓存方案 ​

一般我们会将 HTML 文件使用协商缓存，对于 JS、Css、图片等资源使用强缓存。

题目 ​

1. 说说浏览器的缓存策略？ ​

2. 页面刷新对缓存的影响？ ​

• 用户按 F5 刷新页面，会跳过强缓存，发起协商缓存请求；
• 用户按 ctrl+F5 刷新页面，会跳过浏览器缓存，直接从服务器请求资源；
• 用户地址栏 url 回车，直接从缓存获取

3. 缓存的优点有哪些？ ​

• 减轻服务器压力
• 减少带宽消耗
• 加快页面呈现，提升用户体验