理解浏览器缓存机制

解析：

• 浏览器的缓存机制也就是HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行。

为什么需要浏览器缓存

• HTTP协议在客户端和浏览器建立连接时需要消耗时间，而大的响应需要在客户端和服务端之间多次往返通信才能获得完整的响应，这样就拖延了浏览器可以使用和处理的时间，增加了访问服务端数据和资源的成本，因此利用浏览器的缓存机制重用以前获取的数据就变成了性能优化时需要考虑的事情。

缓存过程

• 浏览器每次发起请求都会向浏览器缓存中查找该请求的结果以及缓存标识。
• 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中。

缓存分类

• 强制缓存：
• 强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的工程。
• 强制缓存规则：
• 当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。
• Expires：Expires是HTTP1.0的产物，用来控制网页缓存的字段，其值为服务器返回该请求结果的 ’ 缓存到期时间 '，即再次发起该请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果。
• Expires缺陷：原因是Expires控制缓存的原理是使用客户端的时间与返回的时间做对比。如遇时区不同，客户端和服务端有一方的时间不准确，产生误差，那么强制缓存则失效，这样Expires的存在毫无意义。
• Cache-Control：Cache-Control是HTTP1.1的产物，是缓存中最重要的规则，主要用于控制网页缓存。
• Cache-Control主要取值：
• 1、public：所有内容都将被缓存（客户端和代理服务器都可缓存）
• 2、private：所有内容只有客户端可以缓存，Cache-Control的默认值
• 3、no-cache：客户端缓存内容，但是，是否使用缓存则需要经过协商缓存来验证决定
• 4、no-store：所有内容都不会缓存，即不使用强制缓存，也不使用协商缓存
• 5、max-age：缓存内容将在XXX秒后失效
• 协商缓存：协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。控制协商缓存的字段分别有：Last-Modified / If-Modified-Since和 Etag / If-None-Match，其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since 高
• 1、Last-Modified：是服务器响应请求时，返回该资源文件在服务器最后被修改的时间。
• 2、If-Modified-Since：客户端再次发起该请求时，携带上次请求返回的Last-Modified值，通过此字段告诉服务器该资源上次请求返回的最后被修改的时间。服务器收到该请求，发现请求头含有If-Modified-Since字段，则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比，小于则返回状态码304，代表资源无更新，可继续使用缓存，大于则重新返回资源，状态码200。
• 3、Etag ：是服务器响应请求时，返回当前资源文件的一个唯一标识（由服务器生成）。
• 4、If-None-Match：客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，服务器发现请求头有If-None-Match字段时，则会根据If-None-Match的字段与该资源在服务器的Etag值是否一致，一致则说明服务器资源未修改，服务器返回状态码304，不一致则重新返回资源，状态码200。

缓存存放位置

• 内存缓存（memory cache）：内存缓存具有两个特点，分别为快速读取和时效性。
• 快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以便下次运行使用时的快速读取。
• 时效性：因为是存在内存中，进程关闭，该进程中的内存则被清空。
• 硬盘缓存（disk cache）：硬盘缓存则是直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I / O操作，重新解析该缓存内容，读取复杂，速度比内存缓存慢。
• 在浏览器中，浏览器会在JS和图片等文件解析执行后直接存入内存缓存中，刷新页面时只需直接从内存缓存中读取。CSS文件则会存入硬盘文件中，每次渲染页面都需要从硬盘缓存中读取。