说说Web缓存的那些事儿~

半糖主义
356 阅读7分钟

Web缓存

Web缓存一般分为 浏览器缓存、代理服务器缓存以及网关缓存

#####优点

  • 减轻服务器压力
  • 减少数据传输，节省网络带宽和流量
  • 缩短页面加载时间，提升用户体验

浏览器缓存(前端缓存)

HTTP 协议缓存、HTML5本地缓存、HTML Meta 标签、离线缓存

cache

HTTP 协议缓存

HTTP 头信息可以让你对浏览器和代理服务器如何处理你的副本进行更多的控制。他们在 HTML 代码中是看不见的，一般由 Web 服务器自动生成。通过 Pragma（强缓存）、Expires（强缓存）、Cache-control（强缓存）、Last-Modified/If-Modified-Since（协商缓存）、Etag/If-None-Match（协商缓存）实现。

强缓存：直接从本地副本比对读取，不去请求服务器，返回的状态码是 200。
协商缓存：会去服务器比对，若没改变才直接读取本地缓存，返回的状态码是 304。

缓存开关

优先级从高到低是 Pragma > Cache-Control > Expires

  • Pragma是旧产物，已经逐步抛弃，有些网站为了向下兼容还保留了这两个字段

    Pragma的值为no-cache时，表示禁用缓存

  • Expires是http1.0提出的一个表示资源过期时间的header，由服务器返回，GMT格式

    读取缓存数据条件：缓存过期时间（服务器的）< 当前时间（客户端的)

  • Cache-Control描述的是一个相对时间，在进行缓存命中的时候，都是利用客户端时间进行判断，所以相比较Expires，Cache-Control的缓存管理更有效，安全一些。

    读取缓存数据条件：上次缓存时间（客户端的）+max-age < 当前时间（客户端的）

Cache-Control 常见指令含义如下：

在Cache-Control 中，这些值可以自由组合，多个值如果冲突时，也是有优先级的，其中 no-store 优先级最高

  Public      指示响应可被任何缓存区缓存。
  Private     指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当前用户的部分响应消息，此响应消息对于其他用户的请求无效。
  no-cache    指示请求或响应消息不能缓存，该选项并不是说可以设置”不缓存“，而是需要和服务器确认
  no-store    在请求消息中发送将使得请求和响应消息都不使用缓存，完全不存下來。
  no-transform 
  must-revalidate
  proxy-revalidate
  max-age     指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。上次缓存时间（客户端的）+max-age（64200s）<客户端当前时间
  min-fresh   指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
  max-stale   指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。
缓存校验

优先级 ETag > Last-Modified

  • Last-Modified/If-Modified-Since

    Last-Modified：标示这个响应资源的最后修改时间。web服务器在响应请求时，告诉浏览器资源的最后修改时间。
    If-Modified-Since：当资源过期时（强缓存失效），发现资源具有Last-Modified声明，则再次向web服务器请求时带上头 If-Modified-Since，表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（写在响应消息包体内），HTTP 200；若最后修改时间较旧，说明资源无新修改，则响应HTTP 304 (无需包体，节省浏览)，告知浏览器继续使用所保存的cache。

  • Etag/If-None-Match：

    Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定 一般默认是对文件的索引节（INode），大小（Size）和最后修改时间（MTime）进行Hash后得到的）
    If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match(Etag的值)。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定返回200或304。
    Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。

状态码解释

延伸

http2.0以下

name

desc

ad

memory cache

内存中的缓存

读取速度快 一旦我们关闭 Tab 页面，内存中的缓存也就被释放了

disk cache

存储在硬盘中的缓存

缓存再硬盘中，容量大 读取速度慢

prefetch cache

预加载缓存

Service Worker

运行在浏览器背后的独立线程，一般可以用来实现缓存功能

Web DB

html5 本地存储

关系型

indexebDB

html5 本地存储

非关系型

本地缓存

SESSIONSTORAGE、LOCALSTORAGE

直接看截图

sessionStorage、localStorage

COOKIE（主要说结构）

部分结构（中括号中的部分是可选的）

  Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure] [; HttpOnly]

name

desc

value

通常是一个 name=value 可叠加

expires

过期时间选项 expires=Sat, 02 Dec 2020 11:38:25 GMT

domain

被发送域名

path

与domain选项类似

secure

只是一个标记而没有值。只有当一个请求通过 SSL 或 HTTPS 创建时，包含 secure 选项的 cookie 才能被发送至服务器

HttpOnly

不能通过document.cookie访问 防止跨站脚本攻击 (XSS) 窃取 cookie 的行为

HTML Meta 标签

使用 HTML Meta 标签，Web 开发者可以在 HTML 页面的 节点中加入 标签，代码如下：

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache,max-age=0, must-revalidate,no-store">
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache" content="no-cache">

上述代码的作用是告诉浏览器当前 HTML 页面不被缓存，每次访问都需要去服务器拉取。

使用上很简单，但只有部分浏览器可以支持，而且所有缓存代理服务器都不支持，因为代理不解析 HTML 内容本身。

HTML5离线存储（已废弃）

该种缓存机制是运用 HTMl5 新推出一些支持离线应用的 API 来进行数据的缓存，需 appcache、nginx、等支持。

离线缓存

离线缓存，就是将指定的网页文件（例如css、js、img）保存到本地，当用户没有网络时，依旧可以通过浏览器使用这些文件

manifest

以nginx为例 通过定义一个描述文件（manifest file）来列出要下载和缓存的资源，manifest file 示例如下：

  • 服务端

    • 登陆服务器

    • 编辑 nginx mime.types 文件

      vim cd /etc/nginx/mime.types

    • 文件新增行(text/cache-manifest类型 manifest文件后缀)

      text/cache-manifest manifest;

    • 重启nginx后生效 配置完成

  • 前端

    • 新建manifest后缀文件

        CACHE MANIFEST // 固定写法 必须 #是注释

  # 需要缓存的资源 可选
  CACHE: 
  #js
  js/app.5e3a0e42.js
  js/chunk-vendors.18e84e2d.js
  #css
  css/app.ca936927.css 
  #html
  index.html
  #img
  img/b1a87bbf-7fe6-4cec-a236-92134be1c146.a7810894.png

  # 不缓存 可选
  NETWORK:

  # 注释：获取不到资源时的备选路径，如index.html访问失败，则返回404页面 可选
  FALLBACK:
  # index.html 404.html

    • 用法

        <html manifest="./xxx.manifest">
优点

① 离线浏览：用户可在应用离线时使用它们
② 速度：已缓存资源加载速度块
③ 减少服务器负载：浏览器只从服务器下载更新过的资源

缺点

① 兼容性差 目前 ie9以上 safari 支持(谷歌2020/8月不支持)
② 更新的资源，需要二次刷新才会被页面采用
③ 不支持增量更新，只有manifest发生变化，所有资源全部重新下载一次

代理服务器缓存

代理是一种带有转发功能的应用程序，它扮演了位于服务器和客户端中间人的角色，接受由客户端发送的请求并转发给服务器，同时也接收服务器返回的响应并转发给客户端。

代理不改变请求URI，会直接发送给前方持有资源的目标服务器。

在HTTP通信过程中，可以级联多台代理服务器。

使用代理服务器的理由有：

  • 利用缓存技术减少网络带宽的流量
  • 组织内部针对特定网站的访问控制 充当防火墙或 Web 过滤器
  • 以获取访问日志为主要目的
    ……

按是否使用缓存、是否修改报文，可以把代理进行分类：

  • 缓存代理：
    代理转发响应时，缓存代理会预先将资源的副本保存在代理服务器上。
    当代理再次接受到对相同资源的请求时，就可以不从源服务器那里获取资源，而是将之前缓存的资源作为响应返回。

  • 透明代理
    转发请求或者响应时，不对报文作任何加工。

网关缓存

网关是转发其他服务器通信数据的服务器。网关可以使通信线路上的服务器提供非HTTP协议服务

接受从客户端发送来的请求时，它就像自己是拥有资源的源服务器一样对请求进行处理。有时客户端可能都不会察觉自己的通信目标是一个网关。

利用网管可以提高通信的安全性。

总结：本期涵盖大部分缓存内容，但随着前端技术的发展，未来缓存的实现方式、种类也会更多，欢迎指正或新增

avatar
文章
阅读
粉丝