【前端自学之路】JS之浏览器缓存

js 浏览器缓存 304 last-modified

什么是浏览器缓存

浏览器缓存 是指为了提升页面访问的速度,浏览器对一些已经访问过的网络资源(JS、css、image等等)会先存储在本地磁盘,当浏览器需要再次引用这些资源的时候,只需要从本地加载,不再从网络请求

有点难理解,对吧? 我们逐步来说

缓存的目的

提升页面访问的速度,提升用户访问网站的体验

缓存如何提升页面访问的速度?

首先,已经访问过的网站,会根据网站的需求配置[这个很重要],把JS CSS IMAGE等静态资源存在本地磁盘

其次,假设网站有30个静态资源,并且浏览器并发量为6,每次请求静态资源的网络时间为 1S,
这样下来,访问一次网站,需要 1S * 30 / 6 = 5S (s是秒, second),用户需要等待5S才能看到网页内容

有了浏览器缓存后,第二次之后访问网站的时候,因为都是从本地缓存加载这30个静态资源,因此需要的时间是
0.2S * 30 / 6 = 1S, 也就是用户在极短时间内就可以看到网页内容

相比较以下,是不是网站访问速度极大提升了!!

说明下,假设的内容符合逻辑,数据有点偏差而已

浏览器缓存机制

浏览器第一次访问网站的时候,会请求所有的静态资源,并根据HTTP协议头存储

浏览器第二次访问网站开始,后面的请求,都会考虑到缓存机制了

缓存有四种情况

  • 1、不使用缓存,直接从远程网站请求静态资源
  • 2、使用缓存,缓存期内,必须强制肯定使用缓存,这叫强缓存
  • 3、使用缓存,但是缓冲期外,通过etag等判断,发现缓存内容没有变化,则使用缓存
  • 4、使用缓存,但是缓冲期外,通过etag等判断,发现缓存内容发送变化,则请求新的资源,并缓存下来

先说明下 Expire 和 cache-control 的区别

1、两者都表示 是否需要缓存
2、expire 是HTTP1.O产物; cache-control 是HTTP1.1产物
3、expire 是标识过期的绝对时间,比如 2019年9月8日 17:55:30:234 过期
4、cache-control 是标识过期的相对时间,单位是秒,比如 3600 过期,标识1个小时后过期

1、不使用缓存

1
cache-control: max-age=0;

标识不使用缓存

2、使用缓存

如果当前时间 还在 expire 和 cache-control 所指示的范围内,则使用缓存

3、使用缓存,并且再次验证后,仍使用缓存


浏览器缓存

Last-Modified 和 If-Modified-Since
ETag 和 If-None-Match

当超过缓存时间的时候,浏览器会通过 Last-Modified 或者 Etag 跟服务器验证下,判断缓存内容是否最近有更新过,
发现虽然过了缓存时间,但是缓存内容没有发生过变化,于是通知浏览器 304,内容没有变化,继续使用缓存

4、使用缓存,并且再次验证后,重新拉去新的资源,并再次缓存


浏览器缓存

当超过缓存时间的时候,浏览器会通过 Last-Modified 或者 Etag 跟服务器验证下,判断缓存内容是否最近有更新过,
发现缓存内容发生了变化,于是通知浏览器 200,并发送新的缓存内容,浏览器收到后使用最新缓存,并且把新的内容缓存下来

坚持原创技术分享,谢谢鼓励我继续创作!