【每日十分钟前端】浏览器1，浏览器缓存。

解释：

当第一次访问网站X后，电脑会把网站上的资源下载到电脑上，当我们再次访问网站X的时候，网站会直接从电脑中加载出来，就是缓存。

就是指在本地使用的计算机中开辟一个内存区，同时也开辟一个硬盘区作为数据传输的缓冲区，然后用这个缓冲区来暂时保存用户以前访问过的信息。

好处：

1、缓解服务器压力，不用每次都去请求某些数据；
2、提升性能，本地读取比请求服务器快；
3、减少带宽消耗，当我们使用缓存时，只会产生很小的网络消耗。

强缓存

不会发送请求，直接从缓存中读取资源。
响应头中有：expires、cache-control、pragma为强缓存，浏览器会把资源缓存在memory cache和disk cache中。

cache-control的优先级高于expires。

1、Expires

缓存过期时间，于服务端返回的响应头中，告诉浏览器在这个过期时间之前可以直接从缓存里面获取数据，无需再次请求。

Expires: Fri, 08 Apr 2022 08:30:40 GMT
过期了就得向服务端发请求。

缺点：服务器时间和浏览器时间可能并不一致。

2、Cache-Control

它并没有采取具体的过期时间，用的是使用了max-age过期时长，解决了expires的缺点。

属性：

private：只有浏览器能缓存，中间的代理服务器不能缓存。
no-cache：跳过当前的强缓存，发送http请求，即直接进入协商缓存阶段。
no-store：粗暴地不进行任何形式的缓存。
max-age：缓存保存时长。
s-maxage：正对代理服务器的缓存时间。

Cache-Control:max-age=3600
在一小时内可以使用缓存。

3、Pragm

早期（HTTP1.0）中禁用网页缓存的字段。

协商缓存

服务器根据缓存标识tag来决定是否使用缓存的过程。
优先级在强缓存后，强缓存失效后浏览器才会携带缓存表示发起请求。

协商缓存生效返回304，失效返回200和请求结果。

这样的缓存tag有两种，各有优劣。

1、Last-Modified / If-Modified-Since

（1）、Last-Modified
最后修改时间。服务器响应请求时，在响应头中返回该资源文件在服务器最后被修改的时间。
（2）、If-Modified-Since
浏览器端再次发送请求时，携带的上一次请求返回的last-modified值，告诉服务器，上次请求返回的最后被修改时间。服务器通过对比Last-Modified``If-Modified-Since来判断是否可以继续使用缓存文件。

2、Etag / If-None-Match

（1）、Etag是服务器根据当前文件的内容，给文件生成唯一标识，只要里面的内容有改动，这个值就会变。
（2）、if-none-match是浏览器再次请求时，携带的上一次服务端给的Etag值。

服务器通过对比与服务器上的Etag确定是否更新：
不一样：返回新的资源，即进入http请求阶段。
否则返回304，告诉浏览器直接使用缓存。

3、区别：

（1）、精确度上，Etag大于Last-Modified。
etag是根据内容生成的标识，能准确感知到内容的变化。
而last-modified在有些情况中没法感知到内容的变化，主要有两点：
(a)、编辑了资源文件，但文件内容并没有更改，这样会造成缓存失效。
(b)、last-modified能感知的单位时间是秒，如果文件在1s内改变了多次，那么last-modified并没有体现出修改了。

（2）、性能上，Last-Modified优于Etag。
last-modified只记录时间点，而Etag需要根据文件的具体内容生成哈希值。

缓存位置

浏览器中的缓存位置一共有四种，优先级由高到低排序为：
Server Worker
Memory Cache
Disk Cache
Push Cache

Server Worker：

借鉴web workder的思路，在浏览器主线程外运行，是其背后的独立线程。
它脱离了浏览器的窗体，无法直接访问DOM，不过它可以实现很多功能，比如：离线缓存、消息推送、网络代理等。
其中离线缓存就是server worker cache。
Service Worker的缓存与浏览器别的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存、并且缓存是持续性的。

Memory Cache：

内存中的缓存，效率上来讲它最快，从存活时间上来讲它最短，渲染进程结束后，内存缓存就不存在了，会随着进程的释放而释放。

Disk Cache：

存储在磁盘中的缓存，从存取效率上讲，比内存缓存慢，但他的存储容量更大，存储时间更长。

上面两个区别：

内存比较大的js、css会直接丢进磁盘，否则会放入内存。
内存使用率比较高的时候，文件优先进入磁盘。

push cache：

推送缓存。
他是HTTP/2中的内容

总结：

浏览器缓存机制简要的流程:
首先通过Cache-Control验证强缓存是否可用，
如果强缓存可用，则直接使用，
否则进入协商缓存，即发送HTTP请求，
服务器通过请求头中的If-Modified-Since或者If-None-Match字段检查资源是否更新

若资源更新，返回资源和200状态码；
否则，返回304，告诉浏览器直接从缓存获取资源

普遍分缓存方案：
HTML: 协商缓存；
css、js、图片：强缓存，文件名带上hash。

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

强缓存不发送请求到服务器，所以会存在浏览器展示的页面不是最新的的情况，但是协商缓存发送请求到服务器，服务器能知道页面展示的是否为最新页面。
大部分web服务器都默认开启协商缓存。

刷新操作的影响：

强制刷新：直接从服务器加载，跳过强缓存和协商缓存。
普通刷新：跳过强缓存，但是会检查协商缓存
浏览器输入url：先执行强缓存。