浏览器缓存(http缓存)

浏览器缓存是指用户在访问web页面时,将一些静态资源(js,css,图片)缓存到本地硬盘(大:1T)或内存(8G,16G)中,当下次访问页面时,不用向服务端发送请求请求资源,直接从本地加载资源,可以提高用户体验

缓存

分类:根据是否需要向服务器重新发起HTTP请求----将缓存过程分为两个部分，分别是强缓存和协商缓存。强缓存和协商缓存—也称之为HTTP缓存

一、强缓存:是指用户第一次请求资源成功后,会将响应头字段中的cache-control和expires字段缓存到本地内存中,以便下次直接加载而不是重新向服务端发送请求,在chrome控制台的Network选项中可以看到该请求返回200的状态码，并且Size显示from disk cache或from memory cache。

强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。

(1)expries表示资源的过期时间，即在该时间前，浏览器可以使用缓存的资源(需要注意expries有一个弊端,就是expries返回的是服务端时间,所有服务端时间和客户端时间有可能不一致,所以会影响命中缓存的结果)

Expires 是一个日期/时间字符串   Expires: Wed, 13 Jan 2024 14:00:00 GMT  

(2)cache-control是一个控制http的字头段包含多个属性

max-age：指定资源被缓存的最长时间，单位为秒。例如：Cache-Control: max-age=3600 
         表示资源可以被缓存 1 小时。
no-cache:表示缓存需要先和服务端确认资源是否发生了变化(协商缓存来验证)，而不是不经过验证直接使用缓存。
       即:no-cache没有强缓存,但会有协商缓存
no-store：表示禁止缓存该资源。每次获取资源都是存服务端获取.

如果浏览器访问的资源处于强缓存期内，就不会向服务器发送请求，而是直接从本地加载。

注意:当 Expires 字段和 Cache-Control 字段同时存在时，Cache-Control 字段优先级更高，即 max-age 指令的值会覆盖 Expires 的设置。如果服务器返回的响应头中既没有 Expires 字段也没有 Cache-Control 字段，那么缓存时间由浏览器自己决定，默认情况下可能会使用一些启发式算法来估计缓存时间

二、协商缓存:当我们命中强制缓存时,不需要协商缓存(未过期或者no-store都不需要协商缓存);

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程:(1)协商缓存生效，返回304和Not Modified(2)协商缓存失效，返回200和请求结果

使用协商缓存需要有两个条件:max-age过期了&&no-cache;使用协商缓存时,会向服务端发送一个请求,如果结果没有变化返回304,变化了则返回新的响应,新的响应包含两个字段:

(1)last-modified(最后修改时间);当再次向服务端发送请求时会将字段last-modified的值带过去与服务端最后一次的修改时间对比,如果相等说明没有修改,返回304,如果不相等返回新的响应;(有一个弊端,last-modified最后修改时间只能精确到秒,但1s内被修改了a-b-c3次时,有可能第一次拿回去的结果a,第二次发起请求将last-modified带过去后,时间一致都是同1s,所以不会拿到新的响应结果c)

(2)ETag(是一个字符串表示唯一标识),每修改一次ETag便会变化,所以ETag更加精确;

同时ETag优先级比last-modified高

总结:强缓存和协商缓存在缓存命中时都是使用本地缓存副本,只不过强缓存和协商缓存命中的条件不同,(强缓存是Expries未过期或者cache-control:max-age未过期),(协商缓存是cache-control:max-age过期&&no-cache时需要向服务端发送请求,根据服务端的响应结果来判断是否命中缓存,304则命中,否则返回新的响应,响应中带有ETag标识和last-modified最后修改时间);强缓存和协商缓存没命中时都会向服务端发送请求;一般情况下需要二者配合使用;

从浏览器缓存从缓存位置上来说分为四种： Memory Cache Disk Cache Push Cache Service Worker

(1) Memory Cache 也就是内存中的缓存,

优点：读取速度快 ;

缺点：一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。

如何触发：当我们访问过页面以后，再次刷新页面，可以发现很多数据都来自于内存缓存

(2) disk cache: 也就是存储在硬盘中的缓存

优点：缓存再硬盘中，容量大

缺点：读取速度满

如何触发：根据浏览器请求头