深入理解前端缓存

前端缓存是所有前端程序员在成长历程中必须要面临的问题，它会让我们的项目得到非常大的优化提升，同样也会带来一些其它方面的困扰。大部分前端程序员也了解一些缓存相关的知识，比如：强缓存、协商缓存、cookie等，但是我相信大部分的前端程序员不了解它们的缓存机制。接下来我将带你们深入理解缓存的机制以及缓存时间的判断公式，如何合理的使用缓存机制来更好的提升优化。我将会把前端缓存分成HTTP缓存和浏览器缓存两个部分来和大家一起聊聊。

HTTP 缓存

HTTP是一种超文本传输协议，它通常运行在TCP之上，从浏览器Network中可以看到，它分为Respnse Headers（响应头）、Request Headers（请求头）两部分组成。

image.png

接下来介绍一下与缓存相关的头部字段：

image.png

expires

我们先来看一下MDN对于expires的介绍

响应标头包含响应应被视为过期的日期/时间。

备注： 如果响应中有指令为 max-age 或 s-maxage 的 Cache-Control 标头，则 Expires 标头会被忽略。

Expires: Wed, 24 Apr 2024 14:27:26 GMT

Cache-Control

Cache-Control是HTTP/1.1中定义的缓存字段，它可以由多种组合使用,分开列如：max-age、s-maxage、public/private、no-cache/no-store等

Cache-Control: max-age=3600, s-maxage=3600, public

max-age是相对当前时间，单位是秒，当设置max-age时则expires就会失效，max-age的优先级更高。

而 s-maxage 与 max-age 不同之处在于，其只适用于公共缓存服务器，比如资源从源服务器发出后又被中间的代理服务器接收并缓存。
public是指该资源可以被任何节点缓存，而private只能提供给客户端缓存。当设置了private之后，s-maxage则会无效
。

强缓存

强缓存的具体流程如下：

image.png

上面我们介绍了expires设置的是绝对的时间，它会根据客户端的时间来判断，所以会造成expires不准确，如果我有一个资源缓存到到期时间是2024年4月31日我将客户端时间修改成过期的时间，则在一次访问该资产会重新请求服务器获取最新的数据。

而max-age则是相对的时间，它的值是以秒为单位的时间，但是max-age也会不准确。

那么到底浏览器是怎么判断该资源的缓存是否有效的呢？这里就来介绍一下资源新鲜度的公式。

我们来用生活中的食品新鲜度来举例：

食品是否新鲜 = (生产日期 + 保质期) > 当前日期

那么缓存是否新鲜也可以借助这个公式来判断

缓存是否新鲜 = (创建时间 + expire || max-age) > 缓存使用期

这里的创建时间可以理解为服务器返回资源的时间，它和expires一样是一个绝对时间。

缓存使用期 = 响应使用期 + 传输延迟时间 + 停留缓存时间

响应使用期

响应使用期有两种获取方式：

  • max(0, responseTime - dateTime）
  • age

responseTime: 是指客户端收到响应的时间
dateTime: 是指服务器创建资源的时间
age：是响应头部的字段，通常是秒为单位

传输延迟时间

传输延迟的时间 = 客户端收到响应的时间 - 请求时间

停留时间

停留时间 = 当前客户端时间 - 客户端收到响应的时间

所以max-age也会失效的问题就是它也使用到了客户端的时间。

协商缓存

协商缓存的具体流程如下：

image.png

从上文可以知道，协商缓存就是通过Etag和Last-Modified这两个字段来判断。那么这个Etag的标识是如何生成的呢？

我们可以看node中etag第三方库。

该库会通过isState方法来判断文件的类型，如果是文件形式的话就会使用第一种方法：通过文件内容和修改时间来生成Etag。

image.png

第二种方法：通过文件内容和hash值和内容长度来生成Etag。

image.png

浏览器缓存

我们访问掘金的网站，查看Network可以看到有Size列有些没有大小的，而是disk cache、memory cache这样的标识。

image.png

memory cache翻译就是内存缓存，顾名思义，它是存储在内存中的，优点就是速度非常快，可以看到Time列是0ms，缺点就是当网页关闭则缓存也就清空了，而且内存大小是非常有限的，如果要存储大量的资源的话还是使用磁盘缓存。

disk cache翻译就是磁盘缓存，它是存储在计算机磁盘中的一种缓存，它的优缺点和memory cache相反，它的读取是需要时间的，可以看到上方的图片Time列用了1ms的时间。

缓存获取顺序

  1. 浏览器会先查找内存缓存，如果存在则直接获取内存缓存中的资源
  2. 内存缓存没有，就回去磁盘缓存中查找，如果存在就返回磁盘缓存中的资源
  3. 磁盘缓存没有，那么就会进行网络请求，获取最新的资源然后存入到内存缓存或磁盘缓存

缓存存储优先级

浏览器是如何判断该资源要存储在内存缓存还是磁盘缓存的呢？

打开掘金网站可以看到，发现除了base64图片会从内存中获取，其它大部分资源会从磁盘中获取。

image.png

js文件是一个需要注意的地方，可以看到下面的有些js文件会被磁盘缓存有些则会被内存缓存，这是为什么呢？

image.png

Initiator列表示资源加载的位置，我们点击从内存获取资源的该列发现资源在HTML渲染阶段就被加载了，列入一下代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DocumentÏ</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="root">这样加载的js资源大概率会存储到内存中</div>
  </body>
</html>

而被内存抛弃的可以发现就是异步资源，这些资源不会被缓存到内存中。

上图我们可以看到有一个Initiator列的值是(index):50但是它还是被内存缓存了，我们可以点击进去看到他的代码如下：

image.png

这个js文件还是通过动态创建script标签来动态引入的。

Preload 与 Prefetch

Preload和Prefetch也会影响浏览器缓存的资源加载。

Preload称为预加载，用在link标签中，是指哪些资源需要页面加载完成后立刻需要的，浏览器会在渲染机制介入前加载这些资源。

<link rel="preload" href="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/0358ea0.js" as="script">

当使用preload预加载资源时，这些资源一直会从磁盘缓存中读取。

prefetch表示预提取，告诉浏览器下一个页面可能会用到该资源，浏览器会利用空闲时间进行下载并存储到缓存中。

<link rel="prefretch" href="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/0358ea0.js"Ï>

使用 prefetch 加载的资源，刷新页面时大概率会从磁盘缓存中读取，如果跳转到使用它的页面，则直接会从磁盘中加载该资源。

使用no-store表示不进行资源缓存。使用no-cache表示告知（代理）服务器不直接使用缓存，要求向源服务器发起请求，而当在响应首部中被返回时，表示客户端可以缓存资源，但每次使用缓存资源前都必须先向服务器确认其有效性，这对每次访问都需要确认身份的应用来说很有用。

当然，我们也可以在代码里加入 meta 标签的方式来修改资源的请求首部：

<meta http-equiv="Cache-Control" content="no-cache" />

示例

这里我起了一个nestjs的服务，该getdata接口缓存10s的时间，Ï代码如下：

  @Get('/getdata')
  getData(@Response() res: Res) {
    return res.set({ 'Expires': new Date(Date.now() + 10).toUTCString() }).json({
      list: new Array(1000000).fill(1).map((item, index) => ({ index, item: 'index' + index }))
    });Ï
  }

第一次请求，花费了334ms的时间。

image.png

第二次请求花费了163ms的时间，走的是磁盘缓存，快了近50%的速度

image.png

接下来我们来验证使用Cache-Control是否可以覆盖Exprie，我们将getdata接口修改如下,Cache-Control设置了1s。Ï我们刷新页面可以看到getdata接口并没有缓存，每次都会想服务器发送请求。

  @Get('/getdata')
  getData(@Response() res: Res) {
    return res.set({ 'Expires': new Date(Date.now() + 10).toUTCString(), 'Cache-Control': 1 }).json({
      list: new Array(1000000).fill(1).map((item, index) => ({ index, item: 'index' + index }))
    });
  }

仔细的同学应该会发现一个问题，清除缓存后的第一次请求和第二次请求Size的大小不一样，这是为什么呢？

打开f12右键刷新按钮，点击清空缓存并硬性重新加载。

image.png

我们开启Big request rows更方便查看Size的大小，开启时Size显示两行，第一行就是请求内容的大小，第二行则是实际的大小。

image.png

刷新一下，可以看到Size变成了283B大小了。

image.png

带着这个问题我们来深入研究一下浏览器的压缩。HTTP2和HTTP3的压缩算法是大致相同，我们就拿HTTP2的压缩算法（HPACK）来了解一下。

HTTP2 HPACK压缩算法

HPACK压缩算法大致分为：静态Huffman(哈夫曼)压缩和动态Huffman哈夫曼压缩，所谓静态压缩是指根据HTTP提供的静态字典表来查找对应的请求头字段从而存储对应的index值，可以极大的减少内催空间。

动态压缩它是在同一个会话级的，第一个请求的响应里包含了一个比如 {list: [1, 2, 3]}，那么就会把它存进表里面，后续的其它请求的响应，就可以只返回这个 header 在动态表里的索引，实现压缩的目的

需要详细了解哈夫曼算法原理的可以去这个博客看一看。

Last-Modified 与 If-Modified-Since

Last-Modified代表资源的最后修改时间，其属于响应首部字段。当浏览器第一次接收到服务器返回资源的 Last-Modified 值后，其会把这个值存储起来，并下次访问该资源时通过携带If-Modified-Since请求首部发送给服务器验证该资源是否过期。

yaml
复制代码
Last-Modified: Fri , 14 May 2021 17:23:13 GMT 
If-Modified-Since: Fri , 14 May 2021 17:23:13 GMT

如果在If-Modified-Since字段指定的时间之后资源都没有发生更新，那么服务器会返回状态码 304 Not Modified 的响应。

Etag 与 If-None-Match

Etag代码该资源的唯一标识，它会根据资源的变化而变化着，同样浏览器第一次收到服务器返回的Etag值后，会把它存储起来，并下次访问该资源通过携带If-None-Match请求首部发送给服务器验证资源是否过期

Etag: "29322-09SpAhH3nXWd8KIVqB10hSSz66" 
If-None-Match: "29322-09SpAhH3nXWd8KIVqB10hSSz66"

如果两者不相同则代表服务器资源已经更新，服务器会返回该资源最新的Etag值。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/731355.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

后端程序员的Linux命令指南

后端程序员的Linux命令指南

后端程序员的终极命令指南&#xff1a;考考自己是不是真正掌握Linux的使用 欢迎各位穿着格子衬衫&#xff0c;常年抱着键盘睡觉的后端小伙伴们&#x1f44b;&#x1f44b;&#x1f44b;&#xff01;今天&#xff0c;考考你们是不是掌握以下让你们在日后在服务器上叱咤风云的命令…
阅读更多...
vscode颜色没有显示出来颜色预览效果，安装插件解决

vscode颜色没有显示出来颜色预览效果，安装插件解决

1、先上一张图&#xff0c;看看之前没有安装插件的Html颜色的色块 2、安装插件Color Highlight 这样颜色对应的效果就出来了。
阅读更多...
O2OA的数据库数据库配置-使用不同用户访问Oracle时报错-表或视图不存在

O2OA的数据库数据库配置-使用不同用户访问Oracle时报错-表或视图不存在

在使用Oracle数据库时&#xff0c;多个O2OA服务器同一个Oracle实例中使用不同的用户启动时&#xff0c;可能会遇到数据库访问的错误。本篇阐述此类问题以及解决方案。 一、先决条件&#xff1a; 1、O2OA已经下载并且解压到指定的目录&#xff1b; 2、Oracle数据库已经完成安…
阅读更多...
同时使用磁吸充电器和Lightning时，iPhone充电速度会变快吗？

同时使用磁吸充电器和Lightning时，iPhone充电速度会变快吗？

在智能手机的世界里&#xff0c;续航能力一直是用户关注的焦点。苹果公司以其创新的MagSafe技术和传统的Lightning接口&#xff0c;为iPhone用户提供了多样化的充电解决方案。 然而&#xff0c;当这两种技术同时使用时&#xff0c;它们能否带来更快的充电速度&#xff1f;本文…
阅读更多...
“用友审批+民生付款”，YonSuite让企业发薪更准时

“用友审批+民生付款”，YonSuite让企业发薪更准时

随着现代企业经营模式的不断创新和市场竞争的加剧&#xff0c;企业薪资管理和发放的效率、准确性和及时性已成为企业管理的重要一环。然而&#xff0c;在实际操作中&#xff0c;许多企业面临着薪资管理复杂、发放流程繁琐、数据不准确等难点和痛点。为了解决这些问题&#xff0…
阅读更多...
【Java】已解决java.net.UnknownHostException异常

【Java】已解决java.net.UnknownHostException异常

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决java.net.UnknownHostException异常 在Java的网络编程中&#xff0c;java.net.UnknownHostException是一个常见的异常&#xff0c;它通常表明在尝试解析主机名时出现了问题。…
阅读更多...
全网首测！文生软件平台码上飞CodeFlying，效果炸裂！

全网首测！文生软件平台码上飞CodeFlying，效果炸裂！

前言&#xff1a; 提到AIGC&#xff0c;在大家的印象中应该就是让AI自己生成文字&#xff0c;图片等内容吧。随着今年Sora&#xff0c;Suno的爆火&#xff0c;将AIGC的应用场景又拉到了一个新的高度&#xff0c;为人们带来了更多的遐想。在未来&#xff0c;或许可以用AI来生成…
阅读更多...
人声分离的5个方法分享，从入门到精通，伴奏提取手拿把捏！

人声分离的5个方法分享，从入门到精通，伴奏提取手拿把捏！

人声分离通常是音乐制作、混音和卡拉OK中常用的重要技术之一。它的核心是将乐器伴奏从原始音轨中分离出来&#xff0c;使得用户可以单独处理或重混音频&#xff0c;创造出清晰干净的伴奏轨道。若缺乏强大的音频剪辑软件或专业人声分离工具&#xff0c;这一过程往往会比较困难。…
阅读更多...
车辆轨迹预测系列 (二)：常见数据集介绍

车辆轨迹预测系列 (二)：常见数据集介绍

车辆轨迹预测系列 (二)&#xff1a;常见数据集介绍 文章目录 车辆轨迹预测系列 (二)&#xff1a;常见数据集介绍1、NuScenes (2020)&#xff1a;1、下载2、说明 2、Waymo Open Dataset (2020)&#xff1a;1、介绍2、概述3、下载4、教程5、参考 3、Lyft Level 5 (2020)&#xff…
阅读更多...
智慧办公新篇章：可视化技术引领园区管理革命

智慧办公新篇章：可视化技术引领园区管理革命

随着科技的飞速发展&#xff0c;办公方式也在经历着前所未有的变革。在这个信息爆炸的时代&#xff0c;如何高效、智能地管理办公空间&#xff0c;成为了每个企业和园区管理者面临的重要课题。 智慧办公园区作为未来办公的新趋势&#xff0c;以其高效、便捷、智能的特点&#x…
阅读更多...
鸿蒙NEXT实战开发： 依据前端对http请求进行二次简单封装

鸿蒙NEXT实战开发： 依据前端对http请求进行二次简单封装

一、为什么要对http请求进行封装&#xff1f; 在我看来二次封装有一下几点好处 代码封装之后&#xff0c;开发人员只用关注业务层面的东西&#xff0c;不用去过多浪费时间在接口请求数据处理上。封装之后代码更加简洁&#xff0c;通俗易懂&#xff0c;方便后期维护&#xff0…
阅读更多...
数据库讲解---(数据库保护)【上】

数据库讲解---(数据库保护)【上】

目录 一.事务 1.1事务的概念【重要】 1.2事务的特性【重要】 1.2.1原子性(Atomicity) 1.2.2一致性(Consistency) 1.2.3隔离性(Isolation) 1.2.4持久性(Durability) 二.数据库恢复 2.1数据库系统的故障 2.1.1事务内部故障 2.1.2系统故障 2.1.3介质故障 2.1.4计算机…
阅读更多...
甘肃的千层烤馍：传统面点的魅力绽放

甘肃的千层烤馍：传统面点的魅力绽放

千层烤馍&#xff0c;作为甘肃美食文化的重要象征&#xff0c;以其独特的外形和丰富的口感&#xff0c;吸引着众多食客。它的外观犹如一件精美的艺术品&#xff0c;层层叠叠&#xff0c;金黄酥脆&#xff0c;散发着诱人的香气。 在甘肃平凉地区制作千层烤馍&#xff0c…
阅读更多...
详解｜什么样的SSL证书能助力企业通过等保与密评？

详解｜什么样的SSL证书能助力企业通过等保与密评？

企业在过等级保护&#xff08;简称“等保”&#xff09;与密码评测&#xff08;简称“密评”&#xff09;的时候&#xff0c;SSL证书作为网络安全的基础组件之一&#xff0c;其选择与部署对于企业顺利通过等保测评与密评至关重要。那什么样的SSL证书能够有效助力企业达成这一目…
阅读更多...
gbase8s之Encoding or code set not supported

gbase8s之Encoding or code set not supported

如图发生以下错误&#xff1a; 解决办法&#xff1a;在url里加上ifx_use_strenctrue 就可以了 参数解释&#xff1a;
阅读更多...
镜像发布至dockerHub

镜像发布至dockerHub

1、login 没有账号的话去注册一个 https://hub.docker.com docker login 输入账号密码和账号2、修改镜像名格式 可以直接招我的修改 格式为你的 hub名/镜像名 3、推送
阅读更多...
与大模型交手近 1500 天，智源仍在坚持原始创新

与大模型交手近 1500 天，智源仍在坚持原始创新

前言 2024 上半年&#xff0c; OpenAI 的成果从世界模拟器 Sora&#xff0c;到首个实现多模态 in 到多模态 out 的 GPT-4o &#xff0c;仍在强势推进着迈向 AGI 的节奏。面对技术上的差距&#xff0c;追赶 OpenAI ——是这场人工智能革命浪潮发展至今&#xff0c; AI 界仍在追…
阅读更多...
密码CTF（5）

密码CTF（5）

一、[安洵杯 2020]密码学&#xff1f;爆破就行了——sha256掩码爆破 1.题目&#xff1a; #!/usr/bin/python2 import hashlib from secret import SECRET from broken_flag import BROKEN_FLAGflag d0g3{ hashlib.md5(SECRET).hexdigest() } broken_flag d0g3{71b2b5616…
阅读更多...
解决virtualbox虚拟机与主机之间复制粘贴

解决virtualbox虚拟机与主机之间复制粘贴

1、在VirtualBox管理器中设置共享粘贴板和拖放方向为双向 2、在存储中设置使用主机输入输出&#xff08;I/O&#xff09;缓存。 3、在存储→控制器&#xff1a;SATA→***.vdi下勾选固态驱动器 4、在虚拟机→设备→安装增强功能 如果上述操作重启虚拟机后&#xff0c;还不行&am…
阅读更多...
揭秘Xinstall如何助力App推广，提升用户量与转化率双指标！

揭秘Xinstall如何助力App推广，提升用户量与转化率双指标！

在移动互联网时代&#xff0c;App的推广与运营成为了每个开发者必须面对的重要课题。然而&#xff0c;推广效果的评估和优化往往令众多开发者头疼不已。今天&#xff0c;我们将为您揭秘一款能够解决这一痛点的利器——Xinstall&#xff0c;带您一起探讨它如何助力App推广&#…
阅读更多...
最新文章

Copyright @ 2022~2023