网博开发者社区

 找回密码
 立即注册
搜索
查看: 676|回复: 0

前端面试浏览器系列:浏览器缓存

[复制链接]

7

主题

10

帖子

34

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
34
发表于 2019-4-25 09:29:52 | 显示全部楼层 |阅读模式
在最近的面试中,发现多次被问到关于浏览器缓存的知识。毕竟缓存是前端性能优化中一个蛮重要的点
什么是浏览器缓存我们知道,访问网页的时候,需要从服务器下载一些页面渲染所需的资源,比如html文档,css,js,图片等,有的资源是很少变动的,比如代表公司的logo图。如果把这些资源缓存下来,很自然减少了服务器的负载,而且页面加载时间也会缩短。但是,要不要使用缓存,这个资源浏览器又要缓存多久,这些浏览器怎么知道?别急,这都是服务器控制的,http的返回头( http response header )中会有一些字段来控制,下面我们来具体聊聊这些字段。

浏览器缓存分类1、强缓存强缓存是利用 Expires 和 Cache-Control 这2个字段来控制的,控制资源缓存的时间,在有效期内不会去向服务器请求了。
  • ExpiresExpires 的值为一个绝对时间,是GMT格式(GMT时间就是英国格林威治时间,GMT时间 = 北京时间 - 8小时)的时间字符串,指的是缓存的具体过期时间,它描述的是时刻,是一个时间点。
Expires: Wed, 25 Jul 2028 19:19:42 GMT复制代码表示资源会在2028-07-25 19:19:42后过期,到时候需要再次请求资源了。由于 Expires 是依赖于客户端系统时间,当修改了本地时间后,缓存可能会失效,所以一般情况,我们认为使用 Cache-Control 是更好的选择。
  • 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 优先级更高

2、协商缓存协商缓存是由服务器来确定缓存资源是否可用,当然了,需要服务器和客户端一起配合。服务器可在 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-ControlLast-Modified/Etag
地址栏回车☑️☑️
页面链接跳转☑️☑️
新开窗口☑️☑️
前进回退☑️☑️
F5刷新✖️☑️
Ctrl+F5强制刷新✖️✖️

作者:okfine17
链接:https://juejin.im/post/5cbfe16be51d456e500f7d35
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|网博开发者社区 ( 苏ICP备05021715号 )

GMT+8, 2018-9-21 01:36 , Processed in 0.071104 second(s), 27 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表