1、强缓存
强缓存是利用 Expires 和 Cache-Control 这2个字段来控制的,控制资源缓存的时间,在有效期内
- Cache-Control 给 Cache-Control 设置 max-age ,表示缓存的最长时间是多少秒,定义的是时间的长短,它描述的是时间,表示的是一段时间间距,是一个相对时间。比如我想设置这个资源有效时间是3天,那么 max-age 的值就是259200(3 * 24 * 60 * 60 = 259200)。
Cache-control: max-age=259200
表示资源3天后过期,需要向服务器再次请求资源了。
Cache-Control 与 Expires 可以在服务端配置同时启用,也就是说在 response header 中,Expires 和Cache-Control 是可以同时存在,当它们同时启用的时候Cache-Control 优先级更高。
(前端无法控制)
协商缓存
协商缓存是由服务器来确定缓存资源是否可用,当然了,需要服务器和客户端一起配合。服务器可在 response header 中包含Last-Modified字段或者ETag字段。
- Last-Modified / If-Modified-Since
Last-Modified 表示被请求资源在服务器端的最后一次修改时间,当再次请求该资源的时候,浏览器的request header中会带上If-Modified-Since,向服务器询问该资源是否有更新。
- ETag/If-None-Match
每次文件修改后服务端那边会生成一个新的 ETag ,是一个唯一文件标识符,当再次请求该资源时候,浏览器的request header中会带上If-None-Match ,这值就是之前返回的ETag ,把这个值发送到服务器,询问该资源 ETag 是否变动,有变动的话,说明该资源版本需要更新啦,客户端不能继续用缓存里的数据了。
总结:
浏览器会根据 http response header 中的 Expires 和cahe-control 字段判断是否命中强缓存,如若命中,则直接从缓存中取资源,不会再去向服务器请求了。否则(没有命中强缓存),浏览器会发出一个条件请求,浏览器会在请求头中包含 If-Modified-Since 或 If-None-Match 字段,If-Modified-Since 即浏览器当初得到的 Last-Modified;If-None-Match即浏览器当初得到的 ETag。当服务器发现资源的更新时间晚于 If-Modified-Since 所提供的时间,或者资源在服务器端当前的 ETag 和 If-None-Match 提供的不符时,说明该资源需要向服务器重新请求了。否则,浏览器将不需要重新下载整个资源,只需要从缓存中去加载这个资源,这时响应的http code 为 304(304 Not Modified)。
用户行为对缓存的影响
用户操作 | Expires/Cache-Control | Last-Modified/Etag |
---|---|---|
地址栏回车 | ☑️ | ☑️ |
页面链接跳转 | ☑️ | ☑️ |
新开窗口 | ☑️ | ☑️ |
前进回退 | ☑️ | ☑️ |
F5刷新 | ✖️ | ☑️ |
Ctrl+F5强制刷新 | ✖️ | ✖️ |
x 代表无效 √ 有效
浏览器缓存的优点有:
- 减少了冗余的数据传输,节省了网费
- 减少了服务器的负担,大大提升了网站的性能
- 加快了客户端加载网页的速度
在前端开发面试中,浏览器缓存是web性能优化面试题中很重要的一个知识点,从而说明浏览器缓存是提升web性能的一大利器,但是浏览器缓存如果使用不当,也会产生很多问题,正所谓是,想说爱你,并不是很容易的事。
站在巨人的肩膀上看的更远 原文链接:https://www.cnblogs.com/depsi/p/5579648.html