缓存

http缓存机制

(优化代码)

Posted by YC on December 13, 2018

http 缓存机制

##web缓存描述

  • Web 缓存是可以自动保存常见文档副本的 HTTP 设备。当 Web 请求抵达缓存时， 如果本地有“已缓存的”副本，就可以从本地存储设备而不是原始服务器中提取这 个文档。

  • web缓存能减少不必要的数据传输，能加载网页的速度，能避免服务器过载的情况出现。但是存在客户端直接读取本地缓存，而服务器的资源已经更改，导致用户没有使用到最新的修改内容。以下讲解web缓存的机制，是通过什么样的条件判断去读取本地缓存的。

缓存分为强缓存和协商缓存

  • 强缓存：不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码。
  • 协商缓存：向服务器发送请求，服务器会根据这个请求的request header 的一些信息来判断是否命中协商缓存，如果命中，则返回304状态码，并且带上新的response header 通知浏览器从缓存中读取资源，
  • 共同点： 都是从客户端缓存中读取资源
  • 区别：协商缓存会发送请求，而强缓存不会发送请求

HTTP 缓存体系 （是否读取本地缓存的机制）

缓存储存策略

  • 强制缓存

用来确定http响应是否可以被客户端缓存，以及可以被哪些客户端缓存

  • Cache-Control 缓存控制 来表示请求的资源的缓存状态
    • public 所有内容都将被缓存(客户端和代理服务器都可缓存)
    • private 内容只缓存到私有缓存中(仅客户端可以缓存，代理服务器不可缓存)
    • no-cache 先与服务器确认响应是否被更改，然后才能使用该响应来满足后续对同一网址的请求。因此，如果存在合适的ETag、no-cache 会发起往返的通信，如果资源未被更改，可以避免下载。
    • no-store 所有内容都不会被缓存到缓存或Internet临时文件中
    • must-revalidation/proxy-revalidation 如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证

    • max-age=xxx 缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

      Image text

  • Expires: response header里的过期时间，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存。
  • 协商缓存

Last-Modify/If-Modify-Since：浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间；当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存

Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。

If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定是否命中协商缓存；

ETag和Last-Modified的作用和用法，他们的区别：1.Etag要优于Last-Modified。Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度；2.在性能上，Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间，而Etag需要服务器通过算法来计算出一个hash值；3.在优先级上，服务器校验优先考虑Etag。

总结缓存过程

Image text

- 浏览器第一次加载资源，服务器返回200，浏览器将资源文件从服务器上请求下载下来，并把response header及该请求的返回时间一并缓存；
- 下一次加载资源时，先比较当前时间和上一次返回200时的时间差，如果没有超过cache-control设置的max-age，则没有过期，命中强缓存，不发请求直接从本地缓存读取该文件（如果浏览器不支持HTTP1.1，则用expires判断是否过期）；如果时间过期，则向服务器发送header带有If-None-Match和If-Modified-Since的请求
- 服务器收到请求后，优先根据Etag的值判断被请求的文件有没有做修改，Etag值一致则没有修改，命中协商缓存，返回304；如果不一致则有改动，直接返回新的资源文件带上新的Etag值并返回200；
- 如果服务器收到的请求没有Etag值，则将If-Modified-Since和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回304；不一致则返回新的last-modified和文件并返回200；
CATALOG