摘要：浏览器读取资源的流程浏览器在加载资源时，根据请求头的和判断是否命中强缓存，是则直接从缓存读取资源，不会发请求到服务器。实际上是会被缓存的，只不过每次在向客户端浏览器提供响应数据时，缓存都要向服务器评估缓存响应的有效性。
浏览器读取资源的流程
浏览器在加载资源时，根据请求头的expires和cache-control判断是否命中强缓存，是则直接从缓存读取资源，不会发请求到服务器。
如果没有命中强缓存，浏览器一定会发送一个请求到服务器，通过last-modified或者etag验证资源是否命中协商缓存，如果命中，服务器会将这个请求返回，但是不会返回这个资源的数据，依然是从缓存中读取资源
如果前面两者都没有命中，直接从服务器加载资源
强制缓存（不发送请求）
如何设置
通常我们会同时设置expires和cache-control两种，保证无论在http1还是1.1的情况下都有效
expires
过期时间，如果设置了时间，则浏览器会在设置的时间内直接读取缓存，不再请求
cache-control
http1.1新标准，包括这些属性：
（1）max-age：用来设置资源（representations）可以被缓存多长时间，单位为秒； （2）s-maxage：和max-age是一样的，不过它只针对代理服务器缓存而言； （3）public：指示响应可被任何缓存区缓存； （4）private：只能针对个人用户，而不能被代理服务器缓存； （5）no-cache：强制客户端直接向服务器发送请求,也就是说每次请求都必须向服务器发送。服务器接收到请求，然后判断资源是否变更，是则返回新内容，否则返回304，未变更。这个很容易让人产生误解，使人误以为是响应不被缓存。实际上Cache-Control:no-cache是会被缓存的，只不过每次在向客户端（浏览器）提供响应数据时，缓存都要向服务器评估缓存响应的有效性。 （6）no-store：禁止一切缓存（这个才是响应不被缓存的意思）。
缓存的两种表现形式
memory cache
来自于内存的数据，会随着进程的结束而清除，读取速度相对快(0ms)
一般存放脚本，图片，字体等文件
disk cache
来自于硬盘的数据，不会随着进程的结束而清除，读取速度慢于memory cache(2-10ms 硬盘读写的IO操作)
一般存放css文件
根据经验情况来看：浏览器的实际处理逻辑是这样的
首次加载资源 -> 200 -> 关闭标签页
再次进入 -> 200 from disk cache -> 刷新 -> 200 from memory cache
（不过好像css都是from disk cache, base64都是from memory cache）
客户端向服务端发送请求时候（没有命中强制缓存），服务端会检查是否有对应的标识，没有则返回200并生成一个新的标识带到header，下次在请求的时候服务端检查到对应的这个标识并做相应的校验，通过则返回304，读取缓存。
Last-modify / If-modify-since
浏览器首次请求资源的时候，服务器会返回一个last-Modify到header中. Last-Modify 含义是最后的修改时间。
当浏览器再次请求的时候，request header会带上 if-Modify-Since，该值为之前返回的 Last-Modify。服务器收到if-Modify-Since后，根据资源的最后修改时间(last-Modify)和该值(if-Modify-Since)进行比较，如果相等的话，则命中缓存，返回304，否则, 则会给出200响应，并且更新Last-Modify为新的值
Etag / If-none-match（http1.1规范）
ETag的原理和上面的last-modified是类似的。ETag对当前请求的资源做一个唯一的标识。该标识可以是一个字符串，文件的size,hash等。只要能够合理标识资源的唯一性并能验证是否修改过就可以了。ETag在服务器响应请求的时候，返回当前资源的唯一标识(它是由服务器生成的)。但是只要资源有变化，ETag会重新生成的。浏览器再下一次加载的时候会向服务器发送请求，会将上一次返回的ETag值放到request header 里的 if-None-Match里面去，服务器端只要比较客户端传来的if-None-Match值是否和自己服务器上的ETag是否一致，如果一致说明资源未修改过，因此返回304，如果不一致，说明修改过，因此返回200。并且把新的Etag赋值给if-None-Match来更新该值。
在精度上，ETag要优先于 last-modified。
last-modified这种方式精度差在哪里：
a. 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了
b. 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)；
在性能上，Etag要逊于Last-Modified，Last-Modified需要记录时间，而Etag需要服务器通过算法来计算出一个hash值。
在优先级上，服务器校验优先考虑Etag。
如何设置index.html不被缓存文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/62101.html
阅读 2331·2021-09-23 11:21
阅读 1689·2021-09-22 15:15
阅读 757·2021-09-10 11:27
阅读 3268·2019-08-30 15:54
阅读 524·2019-08-30 15:52
阅读 1222·2019-08-30 15:44
阅读 2191·2019-08-29 15:06
阅读 2853·2019-08-28 18:21
