关于缓存———你了解多少？

slience_y
158 阅读4分钟

1.什么是缓存？

缓存，原始意义是指访问速度比一般随机存取存储器(RAM)快的一种高速存储器（Cache）。
我们平时所说的的缓存，更多的是指把数据或者是我们需要取到的内容，放到能更快访问的地方。

2.web缓存体系

WEB各层缓存技术体系

3.什么是HTTP缓存？

HTTP缓存是用于临时存储（缓存）Web文档（如HTML页面和图像），以减少服务器延迟的一种信息技术。Web缓存系统会保存下通过这套系统的文档的副本；如果满足某些条件，则可以由缓存满足后续请求。 Web缓存系统既可以指设备，也可以指计算机程序。

4. 为什么要使用缓存？

（1）减少页面加载时间，使页面加载和呈现速度更快。

（2）减少网络流量和带宽

（3）减少服务器负载；

5.缓存分类

按缓存位置：

（1）service worker
（2）内存缓存（memory cache）
（3）硬盘缓存（disk cache
（4）push cache 

优先级：Service Worker  > Memory Cache > Disk Cache > Push Cache

  1. Service Worker
    Service Worker 是运行在浏览器背后的独立线程。 使用Service Worker的话，传输协议必须为 HTTPS。

    特点:
    （1）由开发者控制缓存哪些文件、如何匹配缓存、如何读取缓存。
    （2）持续性。

  2. Memory Cache
    内存中的缓存。\

    特点：
    (1) 快速读取.
    (2) 时效性：一旦该进程关闭，则该进程的内存则会清空

  3. Disk Cache
    存储在硬盘中的缓存。\

    特点：
    （1）容量大 
    （2）持久性  
    (3) 速度比内存缓存慢。读取需要对硬盘上文件进行I/O操作，然后重新解析该缓存内容，读取复杂。
    （4）允许跨session甚至是跨站点地重用

  4. Push Cache
    Push Cache 是 HTTP2 协议新增的内容。
    当以上三种缓存都没有命中时，它才会被使用。

    特点：
    （1）所有的资源都能被推送，但有一定的兼容性问题。
    （2）可以推送 no-cache 和 no-store 的资源
    （3）一旦连接被关闭，Push Cache 就被释放
    （4）多个页面可以使用相同的 HTTP/2 连接，即可以使用同一份缓存
    （5）Push Cache 中的缓存只能被使用一次。

缓存策略：

1. 强制缓存。2. 协商缓存。

(1)强制缓存

在缓存数据未失效的情况下，直接使用浏览器的缓存数据，不会再向服务器发送任何请求。

HTTP/1.0：

headers属性值优缺点
Pragmano-cache1.仅用于请求头2.优先级最高
ExpiresGMT时间1.适用于HTTP/1.0和1.12.服务器和客户端时间不一致会有问题

HTTP/1.1： 

headers属性： Cache-Control

请求头取值：

image.png

响应头取值： image.png

（2）协商缓存

协商缓存就是强缓存失效后，浏览器携带资源的缓存标识向服务器发起请求，由服务器根据缓存标识决定是否继续使用缓存的过程。

即：

  1. 当第一次请求时服务器返回的响应头中没有Cache-Control和Expires
  2. Cache-Control和Expires超时
  3. Cache-Control取值为no-cache

协商缓存相关header是成对存在的

HTTP/1.0: 

If-Modified-Since(浏览器端) / Last-Modified（服务器端）

特点： 1. 值为GMT时间。只要资源修改，无论内容是否改变，都会重新返回资源 2. 精确到秒，无法获取1秒内的变化。

HTTP1.1: 

If-None-Match（浏览器端）/ E-tag（服务器端）

特点： 1. 默认使用hash算法。 2. 精确判断。不存在1s内的误差。 3. 在分布式环境中可能存在不同服务器计算的etag值不一致。

协商缓存流程：

协商缓存的执行流程是这样的：当浏览器第一次向服务器发送请求时，会在响应头中返回协商缓存的头属性：ETag和Last-Modified,其中ETag返回的是一个hash值，Last-Modified返回的是GMT格式的最后修改时间。然后浏览器在第二次发送请求的时候，会在请求头中带上与ETag对应的If-Not-Match，其值就是响应头中返回的ETag的值，Last-Modified对应的If-Modified-Since。服务器在接收到这两个参数后会做比较，如果返回的是304状态码，则说明请求的资源没有修改，浏览器可以直接在缓存中取数据，否则，服务器会直接返回数据。

6.整体流程：

image.png

7.最佳实践：

  1. 大型且不易修改的资源文件。如三方的css、js文件和图片等，适合使用强制缓存。可以通过给文件名添加hash标识进行版本区分。

  2. 对于数据的缓存，可以使用协商缓存。

8.缓存与浏览器操作：

用户操作Expires/Cache-ControlLast-Modified/Etag
用户操作Expires/Cache-ControlLast-Modified/Etag
地址栏回车有效有效
页面链接跳转有效有效
新开窗口有效有效
前进、后退有效有效
F5刷新无效有效
Ctrl+F5刷新无效无效

参考：
cloud.tencent.com/developer/a… www.jianshu.com/p/227cee9c8… juejin.cn/post/684490… copyfuture.com/blogs-detai… www.cnblogs.com/vajoy/p/534… juejin.cn/post/684490… blog.csdn.net/four_lemmo/… github.com/advanced-fr… github.com/Adamwu1992/…

avatar
文章
阅读
粉丝