资讯专栏INFORMATION COLUMN

浏览器缓存那些事

muzhuyu / 1968人阅读

摘要:浏览器读取资源的流程浏览器在加载资源时,根据请求头的和判断是否命中强缓存,是则直接从缓存读取资源,不会发请求到服务器。实际上是会被缓存的,只不过每次在向客户端浏览器提供响应数据时,缓存都要向服务器评估缓存响应的有效性。

浏览器读取资源的流程

浏览器在加载资源时,根据请求头的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

相关文章

  • 览器缓存那些

    摘要:浏览器读取资源的流程浏览器在加载资源时,根据请求头的和判断是否命中强缓存,是则直接从缓存读取资源,不会发请求到服务器。实际上是会被缓存的,只不过每次在向客户端浏览器提供响应数据时,缓存都要向服务器评估缓存响应的有效性。 浏览器读取资源的流程 浏览器在加载资源时,根据请求头的expires和cache-control判断是否命中强缓存,是则直接从缓存读取资源,不会发请求到服务器。 如果...

    高胜山 评论0 收藏0
  • 关于CDN那些

    摘要:对于前端性能优化我们不得不了解的几个知识点信息今天我就来谈谈我对的理解是什么全称是即内容分发网络。将网站内容发布到接近用户的服务器上。用户访问网站时,用户访问就近服务器,然后加载这些资源。 对于前端性能优化我们不得不了解的几个知识点:CDN、HTTP header信息 今天我就来谈谈我对cdn的理解 1、CDN是什么:CDN全称是Content Delivery Network,即内容...

    muddyway 评论0 收藏0
  • 关于CDN那些

    摘要:对于前端性能优化我们不得不了解的几个知识点信息今天我就来谈谈我对的理解是什么全称是即内容分发网络。将网站内容发布到接近用户的服务器上。用户访问网站时,用户访问就近服务器,然后加载这些资源。 对于前端性能优化我们不得不了解的几个知识点:CDN、HTTP header信息 今天我就来谈谈我对cdn的理解 1、CDN是什么:CDN全称是Content Delivery Network,即内容...

    韩冰 评论0 收藏0
  • 关于CDN那些

    摘要:对于前端性能优化我们不得不了解的几个知识点信息今天我就来谈谈我对的理解是什么全称是即内容分发网络。将网站内容发布到接近用户的服务器上。用户访问网站时,用户访问就近服务器,然后加载这些资源。 对于前端性能优化我们不得不了解的几个知识点:CDN、HTTP header信息 今天我就来谈谈我对cdn的理解 1、CDN是什么:CDN全称是Content Delivery Network,即内容...

    Astrian 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<