前端浏览器缓存机制 -尊龙游戏旗舰厅官网

目录

• 1 缓存定义及其优点
• 2 强缓存
• • 2.1 expires 和 cache-control
• 3 协商缓存
• 4 浏览器缓存位置

什么是缓存？

当我们第一次访问网站的时候，电脑会把网站上的图片和数据下载到电脑上，当我们再次访问的时候，网站就会从电脑中直接加载出来，这就是缓存。比如我们访问网页点击后退功能的时候，加载的非常快，这就是缓存的优势。

缓存优点：

1 缓存服务器压力，不用每次都去请求某些数据了

2 提升性能，打开本地资源肯定会比请求服务器更快

3 减少带宽消耗，当我们使用缓存时，只会产生很小的网络消耗。

浏览器缓存过程：

强缓存

协商缓存

强缓存与协商缓存的区别：

强缓存不发请求到服务器，所以有时候资源更新了浏览器还不知道，但是协商缓存会发请求到服务器，所以资源是否更新，服务器肯定知道。

大部分web服务器都默认开启协商缓存

浏览器缓存位置

service worker

memory cache

disk cache

push cache

       强缓存是当我们访问url的时候，不会向服务器发送请求，直接从缓存中读取资源，但是会返回200的状态码。

如何设置强缓存？

       我们第一次进入页面，请求服务器，服务器会进行应答，浏览器根据服务器的应答respon header来判断是否对资源进行缓存，如果响应头中有expires、pragma或cache-control字段，代表是强缓存，浏览器就会把资源缓存在memory cache 或 disk cache中。

       第二次请求时，浏览器判断请求参数，如果符合强缓存条件就直接返回状态码200，从本地缓存中拿数据。否则把响应参数存在request header请求中，看是否符合协商缓存，符合则返回状态码304，不符合则服务器返回全新资源。

2.1 expires 和 cache-control

cache-control 是http1.1 中新增的响应头

expires 是http1.0 中的响应头

cache-control 使用的是相对时间

expires 指定的是具体的过期时间而不是秒数。

cache-control 和 expires同时使用的话，cache-control 会覆盖expires

       expires：设置浏览器缓存时间，时间是绝对时间，从设置的值上可以看出是个日期，浏览器收到response时看看有没有expires字段有的话缓存头信息和资源，再次请求时查看缓存时间过没过，没过在缓存拿出来，过了重新请求。

cache-control都可以设置哪些属性

max-age（单位为s）：指定设置缓存最大的有效时间，定义的是时间长短。当浏览器向服务器发送请求后，在max-age这段时间里浏览器就不会再向服务器发送请求了。

public : 指定响应可以在代理缓存中被缓存，于是可以被多用户共享。如果没有明确指定private，则默认为public。

private : 响应只能在私有缓存中被缓存，不能放在代理缓存上。对一些用户信息敏感的资源，通常需要设置为private。

no-cache : 表示必须先与服务器确认资源是否被更改过（依靠if-none-match和etag），然后再决定是否使用本地缓存。

no-store : 绝对禁止缓存任何资源，也就是说每次用户请求资源时，都会向服务器发送一个请求，每次都会下载完整的资源。通常用于机密性资源。

服务端如何判断缓存已失效？

浏览器或代理缓存中缓存的资源过期了，并不意味着它和原始服务器上的资源有实际的差异，仅仅意味着到了要进行核对的时间了。这种情况被称为服务器再验证。

如果资源发生变化，则需要取得新的资源，并在缓存中替换旧资源。

如果资源没有发生变化，缓存只需要获取新的响应头，和一个新的过期时间，对缓存中的资源过期时间进行更新即可

http1.1推荐使用的验证方式是if-none-match/etag，在http1.0中则使用if-modified-since/last-modified。

触发条件：

cache-control 的值为 no-cache （不强缓存） 或者 max-age 过期了 （强缓存，但总有过期的时候）

当浏览器判断不是强缓存，就会向服务器发请求，判断是否是协商缓存。如果是，服务器会返回304 not modified，浏览器从缓存中加载。

last-modified和if-modified-since字段：

1、浏览器第一次向服务器发请求，服务器返回资源并在response header加上last-modified字段，表示资源最后修改的时间。
2、浏览器再次请求这个资源时，请求头会加上if-modified-since字段。若这两个字段一样，说明资源没有修改过，返回304not modified，浏览器从缓存中获取资源。若这两个字段不一样，说明资源修改过，服务器正常返回资源。

etag、if-none-match：

但有时候服务器上资源有变化，单最后修改时间没更新，则引出下面两个字段。
1、浏览器第一次向服务器请求，服务器返回资源并在response header上加etag字段。表示资源本身，资源有变化，则该字段有变化。
2、浏览器再次向服务器请求这个资源时，请求头携带if-none-match字段。若这两个字段相同，则代表资源没有变化，服务器返回304not modified，浏览器从缓存中加载。若两个字段不同，证明资源有变动，服务器正常返回资源。

        查找浏览器缓存时会按顺序查找: service worker–>memory cache–>disk cache–>push cache。

1 service worker

是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 service worker的话，传输协议必须为 https。因为 service worker 中涉及到请求拦截，所以必须使用 https 协议来保障安全。service worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的

2 memory cache

内存中的缓存，主要包含的是当前中页面中已经抓取到的资源，例如页面上已经下载的样式、脚本、图片等。读取内存中的数据肯定比磁盘快，内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。一旦我们关闭 tab 页面，内存中的缓存也就被释放了。

3 disk cache

存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 memory cache 胜在容量和存储时效性上。
       在所有浏览器缓存中，disk cache 覆盖面基本是最大的。它会根据 http herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。绝大部分的缓存都来自 disk cache。

4 push cache

push cache（推送缓存）是 http/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。它只在会话（session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂，在chrome浏览器中只有5分钟左右，同时它也并非严格执行http头中的缓存指令。

5 cpu、内存、硬盘

这里提到了硬盘，内存，可能有些小伙伴对硬盘，内存没什么直观的概念。
       cpu、内存、硬盘都是计算机的主要组成部分。
       cpu：中央处理单元(cntralpocessinguit)的缩写，也叫处理器，是计算机的运算核心和控制核心。电脑靠cpu来运算、控制。让电脑的各个部件顺利工作，起到协调和控制作用。
       硬盘：存储资料和软件等数据的设备，有容量大，断电数据不丢失的特点。
       内存：负责硬盘等硬件上的数据与cpu之间数据交换处理。特点是体积小，速度快，有电可存，无电清空，即电脑在开机状态时内存中可存储数据，关机后将自动清空其中的所有数据。

参考链接

总结

以上是尊龙游戏旗舰厅官网为你收集整理的前端浏览器缓存机制的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。