前端开发中的资源缓存详解

资源缓存用于缓存静态资源,良好的缓存策略可以减少资源重复加载进而提高网页的整体加载速度。

通常浏览器缓存策略分为两种:强缓存和协商缓存,当然还包括 service worker。

  • 浏览器在资源加载时,根据请求头中的 expires 和 cache-control 值来判断是否命中强缓存,命中则直接从本地缓存中读取资源,这一过程不需请求服务器。

  • 如果未命中强缓存,浏览器则会发送请求到服务器,服务器通过 last-modified 和 etag 值来验证资源是否命中协商缓存,若命中,则服务器会将这个请求返回,但是不会返回这个资源的数据,浏览器接收到该请求响应后依然从本地缓存中读取资源。

  • 若强缓存和策略缓存都未命中,那么浏览器将请求服务器获得资源并加载。

强缓存和策略缓存如果命中,都是直接从客户端缓存加载对应资源。但不同点是:强缓存自比较开始至缓存命中不会请求服务端,而策略缓存的是否使用本地缓存这一决定是需要服务端参与的,换言之策略缓存需要请求服务端来完成的。

1. 强缓存

强缓存通过 Expires 和 Cache-Control 响应头实现。两者详细说明如下:

1.1. Expires

中文释义为:到期,表示缓存的过期时间。expire 是 HTTP 1.0 提出的,它描述的是一个绝对时间,该时间由服务端返回。因为 expire 值是一个固定时间,因此会受本地时间的影响,如果在缓存期间我们修改了本地时间,可能会导致缓存失效。

通常表示如下:

Expires: Wed, 11 May 2018 07:20:00 GMT

1.2. Cache-Control

中文释义为:缓存控制。cache-control 是 HTTP 1.1 提出的,它描述的是一个相对时间,该相对时间由服务端返回。

通常表示如下:

Cache-Control: max-age=315360000

该属性还包括访问性及缓存方式设置,列举如下:

  • no-cache 存储在本地缓存取中,只是在与服务器进行新鲜度再验证之前,缓存无法使用。

  • no-store 不缓存资源到本地。

  • public 可被所有用户缓存,多用户进行共享,包括终端或 CDN 等中间代理服务器。

  • private 仅能被浏览器客户端缓存,属于私有缓存,不允许中间代理服务器缓存相关资源。

缓存与使用缓存流程说明如下:

2. 协商缓存

浏览器加载资源时,若强缓存未命中,将发送资源请求至服务器。若协商缓存命中,请求响应返回304状态码。

协商缓存主要使用到两对请求响应头字段,分别是:

  • Last-Modified 和 If-Modified-Since

  • Etag 和 If-None-Match

2.1. Last-Modified 与 If-Modified-Since

Last-Modified 由上一次请求的响应头返回,且该值会在本次请求中,通过请求头If-Modified-Since传递给服务端,服务端通过 If-Modified-Since与资源的修改时间进行对比,若在此日期后资源有更新,则将新的资源发送给客户端。

不过,通过文件的修改时间来判断资源是否更新是不明智的,因为很多时候文件更新时间变了,但文件内容未发生更改。

这样一来,就出现了 ETag 与 If-None-Match。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/914261.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/914261.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

零基础入门指南:华为数通认证体系详解

一、华为数通认证的定位与行业价值华为数通认证(Datacom)是ICT领域核心方向,覆盖路由器、交换机等网络基础设备技术,被誉为“网络行业的骨骼”。2020年升级为Datacom认证体系,新增SDN、VXLAN、网络自动化等前沿技术&am…

超低功耗CC2340R SimpleLink™ 系列 2.4GHz 无线 MCU支持BLE5.3/Zigbee/Thread/专有协议

CC2340R SimpleLink™ 系列 2.4GHz 无线 MCU支持BLE5.3/Zigbee/Thread/专有协议优势简介性能介绍应用场景优势简介 CC2340R SimpleLink™ 系列器件为 2.4GHz 无线微控制器 (MCU),面向低功耗 Bluetooth5.3、Zigbee、Thread 和专有 2.4GHz 应用。这些器件针对低功耗无…

若依前后端分离Vue3版本接入阿里云OSS

一、引入依赖首先在commom 模块的pom 下面引入 阿里云OSS 的 依赖<!-- 阿里云oss --><dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.17.4</version></depende…

2025年微软mos备考攻略-穷鬼版

说实话&#xff0c;微软MOS认证是微软官芳推出的办公软件方面的认证&#xff0c;考试难度真的不大&#xff0c;完全没必要报班&#xff0c;自学完全OK&#xff01;一、25 年报考MOS认证详情报名时间&#xff1a;随时可以在官网或ji构报名&#xff08;ji构报名会送备考资料&…

数据库版本自动管理

FlywayDB 是一款 开源数据库版本管理工具&#xff0c;开发中将表结构的变更或数据初始化脚本维护好&#xff0c;更新到测试环境或线上发版启动服务的时候&#xff0c;会检测版本号自动执行数据库变更&#xff0c;可以减少每次发版到其他环境的人工执行操作。 工作流程初始化阶段…

解决Linux绑定失败地址已使用(端口被占用)的问题

文章目录解决 bind failed: Address already in use 问题一、问题原因1. **端口已经被其他程序占用**2. **端口处于 TIME_WAIT 状态**3. **未正确关闭套接字**二、如何排查和解决问题1. **确认端口是否被占用**2. **查找并杀掉占用端口的进程**3. **等待端口释放&#xff08;TI…

Ragas的Prompt Object

Prompt在Ragas中被用在各种指标、合成数据生成任务中。同时也为提供了替换各种自动以提示词的方式。Ragas提供了如下几种Prompt Objects。 instruction:prompt的基础组成,通过自然语言清晰的描述LLM需要完成的任务。在prompt object中用instruction变量定义。few-shot exampl…

PHP语法高级篇(一):日期时间处理和包含文件

从本篇文章开始&#xff0c;将学习PHP的高级特性内容。本篇文章将记录在PHP中如何进行日期时间处理和包含文件的学习过程。 一、日期和时间 在PHP中&#xff0c;date() 函数用于格式化日期或时间。 说明 date(string $format, ?int $timestamp null): string 使用指定整数…

请求服务端获取broker的机房归属信息异常

该错误表明服务在尝试获取 broker 的 ​机房归属信息​ 时遇到异常。以下是详细分析和解决方案建议&#xff1a;​问题定位与常见原因​​网络问题​客户端无法连接存储机房信息的元数据服务​&#xff08;如配置中心、注册中心&#xff09;。防火墙或安全组阻断了相关端口&…

Android 中的多线程编程全面解析

Android 中的多线程编程全面解析 一、Android 线程模型基础 主线程&#xff08;UI 线程&#xff09;特性 唯一性&#xff1a;每个应用只有一个主线程职责&#xff1a;处理 UI 操作和用户交互限制&#xff1a;禁止在主线程执行耗时操作&#xff08;超过5秒会导致 ANR&#xff09…

golang -gorm 增删改查操作,事务操作

增删改查 1. 插入数据// api func SaveUser(ctx *gin.Context) {result : &common.Result{}user : &dao.User{}err : ctx.ShouldBindJSON(&user)if err ! nil {ctx.JSON(http.StatusOK, result.Fail(400, "请使用json数据格式传值"))return}// 调用验证函…

大数据时代UI前端的智能化服务升级:基于用户情境的主动服务设计

hello宝子们...我们是艾斯视觉擅长ui设计、前端开发、数字孪生、大数据、三维建模、三维动画10年经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩!一、引言&#xff1a;从 “被动响应” 到 “主动预判” 的 UI 服务革命当用户在暴雨天打开外卖…

CUDA性能优化实战:7个步骤让并行归约算法提升10倍效率

本文深入探讨了一个经典的并行计算算法——并行归约&#xff08;Parallel Reduction&#xff09;的性能优化过程&#xff0c;通过七个渐进式的优化步骤&#xff0c;展示了如何将算法性能提升至极致。这项研究基于Mark Harris在NVIDIA网络研讨会中提出的优化方法&#xff0c;在重…

详解梯度消失和梯度爆炸(反向传播)?

什么是梯度消失&#xff1f;梯度消失&#xff08;Gradient Vanishing&#xff09; 是指在训练神经网络时&#xff0c;反向传播过程中计算得到的梯度&#xff08;用于更新参数的重要信息&#xff09;随着网络层数的增加而急剧减小&#xff0c;甚至趋近于零的现象。这会导致深层网…

端到端自动驾驶:挑战与前沿

端到端自动驾驶&#xff1a;挑战与前沿 End-to-End Autonomous Driving: Challenges and Frontiers 自动驾驶研究社区已见证了越来越多采用端到端算法框架的方法的快速增长&#xff0c;这些方法利用原始传感器输入生成车辆的运动规划&#xff0c;而不是专注于诸如检测和运动预测…

rust cargo 编译双架构的库

这个错误表明你的 Rust 工具链没有安装 aarch64-apple-darwin 目标平台。以下是完整的解决方案&#xff1a; 解决方案 ​​安装目标平台​​ (必须步骤) rustup target add aarch64-apple-darwin​​验证安装​​ (可选但推荐) rustup target list --installed # 应该能看到 aa…

Apache Shiro 框架详解

文章目录一、Shiro 核心功能二、Shiro 架构2.1 三层架构2.2 核心组件&#xff08;SecurityManager 内部&#xff09;三、核心流程详解3.1 认证流程&#xff08;登录&#xff09;流程步骤&#xff1a;认证流程序列图&#xff1a;3.2 授权流程&#xff08;权限校验&#xff09;流…

【保姆级喂饭教程】Windows下安装Git Flow

目录前言一、SourceTree二、Git for Windows (previously MSysGit)1. 下载补丁1.1 getopt.exe1.2 libintl3.dll1.3 libiconv2.dll1.4 安装补丁2. 安装Git Flow3. 测试3.1 初始化&#xff08;Initialize&#xff09;3.2 设置远程3.3 创建分支3.4 功能开发3.5 功能提交3.6 推送分…

manifest.json只有源码视图没其他配置

项目场景&#xff1a;提示&#xff1a;这里简述项目相关背景&#xff1a;有时候我们从git上面拉下代码&#xff0c;第一次运行时发现&#xff0c;没运行项&#xff0c;再看manifest.json文件&#xff0c;就只有json文件&#xff0c;没有其他配置项原因分析&#xff1a;提示&…

数据分析-名词

一、网页访问数据指标1.IP &#xff08;Internet Protocol&#xff09;独立IP 通常采用独立IP数&#xff0c; 理论上指00:00-24:00内相同IP地址重复访问只被计算一次。而不同的商业统计工具&#xff0c;缩短去 掉重复统计的时间&#xff0c;也是数据统计放大的一个常用套路。 &…