前端常用缓存技术深度剖析

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。

一、引言

在前端开发中,缓存技术对于提升应用性能、减少网络请求、优化用户体验具有至关重要的作用。随着互联网应用的复杂性和规模不断增加,合理使用缓存成为前端开发人员必须掌握的技能。本文将详细分析前端常用的缓存技术。

二、浏览器缓存

(一)内存缓存

  1. 原理与机制
    内存缓存是将资源临时存储在浏览器的内存中。当浏览器请求资源时,会首先检查内存中是否存在该资源的缓存。如果存在且缓存未过期,就直接从内存中获取。这种缓存方式利用了内存的快速读写特性,能够实现极快的资源获取速度。
  2. 适用场景与优势
    适用于频繁访问且体积较小的资源,如 JavaScript 代码片段、CSS 样式表的部分内容等。其优势在于读取速度快,可在短时间内为页面渲染提供所需资源,提升页面加载的初始速度。例如,在单页应用(SPA)的多次页面切换中,如果相关脚本和样式已经在内存缓存中,就能迅速渲染新页面。
  3. 局限性
    内存缓存的空间有限,且其生命周期与浏览器会话相关。当浏览器关闭时,内存中的缓存资源会被清空,无法长期保存资源。

(二)磁盘缓存

  1. 原理与机制
    磁盘缓存将资源存储在用户计算机的磁盘上。浏览器在请求资源时,会先检查磁盘缓存。磁盘缓存通过文件系统来存储资源,其存储容量相对较大。与内存缓存类似,磁盘缓存也依据缓存控制头信息(如 Cache - Control、Expires 等)来判断资源是否有效。
  2. 适用场景与优势
    对于各种类型的资源,尤其是体积较大的图像、音频、视频以及一些不常变化的大型脚本库等,磁盘缓存非常适用。它能够在浏览器多次启动过程中持续发挥作用,减少重复网络请求。例如,网站的 logo 图片、常用的 JavaScript 框架文件等可以长期存储在磁盘缓存中,提高后续访问的速度。
  3. 缓存更新问题
    磁盘缓存可能存在缓存更新不及时的问题。如果服务器上的资源已经更新,但磁盘缓存中的旧版本未过期,浏览器可能仍然使用旧资源。这需要合理的缓存控制策略来解决,如通过版本号更新或服务器端推送缓存更新通知等方式。

(三)浏览器缓存控制策略

  1. 基于时间的控制(Expires 和 Cache - Control)
    • Expires:这是 HTTP 1.0 中用于指定缓存过期时间的头信息。服务器在响应资源请求时,会在响应头中设置 Expires 值,格式为一个具体的日期和时间(如 Expires: Thu, 01 Jan 2025 12:00:00 GMT)。浏览器根据本地时间与 Expires 指定的时间对比来判断缓存是否有效。然而,这种方式存在一定缺陷,因为如果用户修改了本地时间,可能会导致缓存判断错误。
    • Cache - Control:在 HTTP 1.1 中广泛使用,它提供了更灵活的缓存控制指令。常见的指令包括“public”(表示资源可被任何中间缓存和用户浏览器缓存)、“private”(资源只能被用户浏览器缓存)、“max - age”(指定缓存的最长有效时间,以秒为单位,如 Cache - Control: public, max - age = 3600,表示资源可被公共缓存且 1 小时内有效)等。Cache - Control 的优先级高于 Expires。
  2. 基于验证的控制(Last - Modified 和 ETag)
    • Last - Modified:服务器在响应资源时,会在响应头中包含该资源最后一次修改的时间。当浏览器再次请求该资源时,会在请求头中带上 If - Modified - Since 头信息,其值为上次缓存的 Last - Modified 时间。服务器收到请求后,若资源在该时间之后未修改,则返回 304(Not Modified)状态码,浏览器继续使用缓存资源;若资源已修改,则返回新资源和更新后的 Last - Modified 值。
    • ETag(Entity Tag):这是服务器为资源生成的一个唯一标识符。当浏览器再次请求资源时,会在请求头中带上 If - None - Match 头信息,其值为上次缓存的 ETag。服务器根据 ETag 判断资源是否变化,若未变化,返回 304 状态码,浏览器继续使用缓存;若变化,则返回新资源和新的 ETag。ETag 比 Last - Modified 更精确,因为它可以检测到资源内容在文件修改时间未变情况下的变化。

三、本地存储(Local Storage 和 Session Storage)

(一)Local Storage

  1. 原理与特点
    Local Storage 是一种以键值对形式将数据持久存储在用户浏览器中的机制。它允许前端应用在用户本地存储大量数据(一般每个域名下可存储 5MB 左右),数据不会随着浏览器会话结束而丢失,除非用户手动清除或通过代码删除。
  2. 适用场景
    常用于存储用户的个性化设置、登录凭证(在安全措施到位的情况下)、应用的状态信息等。例如,一个新闻阅读应用可以使用 Local Storage 存储用户选择的新闻类别偏好、字体大小设置等,下次用户打开应用时能自动恢复这些设置。
  3. 与浏览器缓存的区别
    与浏览器缓存不同,Local Storage 中的数据不会自动参与到 HTTP 请求和响应的缓存机制中。它主要是为前端应用提供一种持久化数据存储的方式,由前端代码主动进行读写操作。

(二)Session Storage

  1. 原理与特点
    Session Storage 同样是以键值对形式存储数据,但它的生命周期与浏览器会话相关。当用户关闭浏览器窗口或标签页时,Session Storage 中的数据会被自动清除。它的存储容量一般也在 5MB 左右。
  2. 适用场景
    适用于存储当前会话相关的数据,如购物车中的临时商品信息(在未登录的情况下)、多步骤表单填写过程中的中间数据等。例如,在一个在线购物流程中,用户在添加商品到购物车但未完成购买的过程中,购物车数据可以临时存储在 Session Storage 中。

四、应用缓存(Application Cache)

(一)原理与机制

应用缓存是一种允许网页在离线状态下仍然可以访问的缓存技术。通过在网页的 HTML 文件中使用 manifest 文件来指定需要缓存的资源列表。当用户首次访问页面时,浏览器会根据 manifest 文件下载并缓存指定的资源。此后,即使用户处于离线状态,浏览器也可以从缓存中加载页面和相关资源。

(二)适用场景与优势

对于一些需要在离线环境下使用的 Web 应用,如文档编辑应用、地图应用等,应用缓存非常有用。它可以提高应用的可用性和用户体验,使用户在网络连接不稳定或离线时仍能继续使用部分功能。例如,用户在飞机上可以继续查看之前在在线地图应用中缓存的地图信息。

(三)局限性与问题

应用缓存的更新机制相对复杂。如果 manifest 文件更新,浏览器可能需要重新下载整个缓存资源,这可能会导致较长的加载时间。而且,如果缓存管理不当,可能会出现用户一直使用旧版本应用的问题,需要开发者谨慎处理缓存更新策略。

五、CDN 缓存

(一)原理与机制

内容分发网络(CDN)缓存是在 CDN 服务器上存储用户经常访问的静态资源。CDN 服务器分布在全球各地,当用户请求资源时,会从距离用户最近的 CDN 服务器获取资源。这些 CDN 服务器会缓存经常被请求的资源,从而减少了对源服务器的请求压力,加快了资源的获取速度。

(二)适用场景与优势

适用于各种类型的静态资源,如图片、CSS 文件、JavaScript 文件等。对于流量较大的网站或应用,CDN 缓存可以显著提高资源的分发速度,改善全球范围内用户的访问体验。例如,一个国际知名的电商网站可以利用 CDN 缓存来确保不同地区的用户都能快速加载商品图片和页面样式。

(三)缓存更新与同步问题

CDN 缓存的更新需要一定的时间来在各个 CDN 节点之间同步。当源服务器上的资源更新时,需要采取适当的策略(如缓存清除指令、版本控制等)来确保 CDN 缓存也能及时更新,以避免用户获取到旧版本的资源。

六、总结

前端常用的缓存技术在提升性能、优化用户体验方面各有其独特的作用。浏览器缓存通过在用户本地存储资源减少网络请求;本地存储为前端应用提供持久化或会话相关的数据存储;应用缓存支持离线应用;CDN 缓存则在全球范围内加速资源分发。开发人员需要深入理解这些缓存技术的原理、适用场景和局限性,根据应用的特点合理选择和组合使用缓存技术,并制定有效的缓存更新策略,以充分发挥缓存的优势,同时避免因缓存问题导致的用户体验下降或数据不一致等问题。在不断发展的前端技术环境中,缓存技术的合理应用将持续是优化前端应用的关键环节之一。

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

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

相关文章

任务管理法宝:甘特图详解

在项目管理中,如何清晰、直观地展示项目的进度和任务分配? 甘特图作为一种经典的项目管理工具,提供了有效的解决方案。无论是团队合作还是个人项目管理,甘特图都能帮助你轻松追踪各项任务的进展。今天,我们将详细介绍…

leetcode 62.不同路径

1.题目要求: 2.解题思路: 利用动态规划去解此题 3.题目代码: class Solution { public:int uniquePaths(int m, int n) {//创建dp数组vector<vector<int>> dp;dp.resize(m);for(int i 0;i < dp.size();i){dp[i].resize(n);}//确定dp数组的含义//初始化for(i…

电子应用设计方案-38:智能语音系统方案设计

智能语音系统方案设计 一、引言 智能语音系统作为一种便捷、自然的人机交互方式&#xff0c;正逐渐在各个领域得到广泛应用。本方案旨在设计一个高效、准确、功能丰富的智能语音系统。 二、系统概述 1. 系统目标 - 实现高准确率的语音识别和自然流畅的语音合成。 - 支持多种语…

UE5 C++ 不规则按钮识别,复选框不规则识别 UPIrregularWidgets

插件名称&#xff1a;UPIrregularWidgets 插件包含以下功能 你可以点击任何图片&#xff0c;而不仅限于矩形图片。 UPButton、UPCheckbox 基于原始的 Button、Checkbox 扩展。 复选框增加了不规则图像识别功能&#xff0c;复选框增加了悬停事件。 欢迎来到我的博客 记录学习过…

计算机中各部件的选购

目录 1.主板的选购 2.CPU的选购 3.CPU散热器的选购 4.内存的选购 5.硬盘的选购 6.光驱的选购 7.光盘的选购 8.键盘的选购 9.鼠标的选购 10.扫描仪的选购 11.摄像头的选购 12.显卡的选购 13.显示器的选购 14.打印机的选购 15.声卡的选购 16.网卡的选购 17.交换…

第32天:安全开发-JavaEE应用Servlet路由技术JDBCMybatis数据库生命周期

时间轴&#xff1a; 32天主要学习内容&#xff1a; 1、JavaEE-HTTP-Servlet技术 2、JavaEE-数据库-JDBC&Mybatis java技术使用历史&#xff08;2023 &#xff09;&#xff1a; JavaEE-HTTP-Servlet&路由&周期: java学习范围&#xff1a; 3、Java: 功能:数据…

基于ZYNQ-7000系列的FPGA学习笔记7——按键控制蜂鸣器(模块化编写)

基于ZYNQ-7000系列的FPGA学习笔记7——按键控制蜂鸣器&#xff08;模块化编写&#xff09; 1. 实验要求2. 功能分析3. 模块设计4. 波形图4.1 按键消抖模块4.2 按键控制蜂鸣器模块 5.代码编写5.1 rtl代码5.2 测试代码 6. 代码仿真7. 添加约束文件并分析综合 在上期的内容中&…

k8s,声明式API对象理解

命令式API 比如&#xff1a; 先kubectl create&#xff0c;再replace的操作&#xff0c;我们称为命令式配置文件操作 kubectl replace的执行过程&#xff0c;是使用新的YAML文件中的API对象&#xff0c;替换原有的API对象&#xff1b;而kubectl apply&#xff0c;则是执行了一…

了解Xcode在iOS开发中的作用和功能有哪些

Xcode是什么&#xff1f;它在iOS开发中的作用和功能有哪些&#xff1f; 一、Xcode是什么&#xff1f; Xcode是苹果公司针对macOS平台开发的一款集成开发环境&#xff08;Integrated Development Environment&#xff0c;简称IDE&#xff09;。它主要用于开发iOS、iPadOS、mac…

【金猿CIO展】复旦大学附属中山医院计算机网络中心副主任张俊钦:推进数据安全风险评估,防范化解数据安全风险,筑牢医疗数据安全防线...

‍ 张俊钦 本文由复旦大学附属中山医院计算机网络中心副主任张俊钦撰写并投递参与“数据猿年度金猿策划活动——2024大数据产业年度优秀CIO榜单及奖项”评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 数据要素时代&#xff0c;医疗数据已成为医院运营与决策的重要基石…

案例研究|HYPER PaaS低代码工具携手DataEase嵌入式版,服务工业制造企业数智化转型

杭州星瀚智磐科技有限公司&#xff08;以下简称为“星瀚智磐”&#xff09;成立于2021年&#xff0c;是一家专注于低代码平台研发的高科技企业。星瀚智磐的核心产品HYPER PaaS低代码工具主要为制造业用户提供数字化解决方案。HYPER PaaS基于低代码平台简单的拖拉拽操作&#xf…

Python 队列的使用:掌握先进先出的数据结构

Python 队列的使用&#xff1a;掌握先进先出的数据结构 队列是一种先进先出&#xff08;FIFO&#xff09;的数据结构&#xff0c;它在多种编程场景中都非常有用&#xff0c;比如任务调度、事件处理等。在Python中&#xff0c;我们可以通过标准库中的queue模块来实现队列。本文…

2-2-18-13 QNX系统架构之原生网络(Qnet)

阅读前言 本文以QNX系统官方的文档英文原版资料为参考&#xff0c;翻译和逐句校对后&#xff0c;对QNX操作系统的相关概念进行了深度整理&#xff0c;旨在帮助想要了解QNX的读者及开发者可以快速阅读&#xff0c;而不必查看晦涩难懂的英文原文&#xff0c;这些文章将会作为一个…

Ubuntu系统上mysql服务部署

前段时间搞了一个mysql服务端的部署&#xff0c;在Ubuntu系统上&#xff0c;中间也踩了许多坑&#xff0c;特此记录下。 下载 官网&#xff1a;MySQL :: MySQL Community Downloads 这个里面有不同系统的安装包&#xff0c;根据自己的系统选择&#xff0c;我选了 MySQL Com…

gitlab配置调试minio

官方文档 rails console 调试 查看配置Settings.uploads.object_store加载minio clientrequire fog/awsfog_connection Fog::Storage.new(provider: AWS,aws_access_key_id: 你的MINIO_ACCESS_KEY,aws_secret_access_key: 你的MINIO_SECRET_KEY,region: <S3 region>,e…

IIC相关介绍及oled实验(二)

//模块&#xff1a;OLED显示屏 1. 0.96寸OLED屏幕介绍 0.96 寸 4P OLED 屏幕模块是一种显示屏模块&#xff0c;它包括一个 0.96 英寸的 OLED 显示屏和四个引脚。这种 OLED 屏幕模块通常用于嵌入式系统和小型电子设备中&#xff0c;可以显示文本、图像和其他类型的信息。由于其…

window下docker使用一些多媒体应用

首先下载docker之类的就不讲了&#xff0c; 科学下载了三个内容。 1.视频多媒体&#xff1a; 在新建的文件夹创建三个子文件夹&#xff08;cache&#xff0c;config&#xff0c;media&#xff09;,然后启动命令即可。 启动命令&#xff1a; docker run -d --nameJellyfin …

【工具变量】上市公司企业所在地城市等级直辖市、副省级城市、省会城市 计划单列市(2005-2022年)

一、包含指标&#xff1a; 股票代码 股票代码 股票简称 年份 所属城市 直辖市&#xff1a;企业所在地是否属于直辖市。1是&#xff0c;0否。 副省级城市&#xff1a;企业所在地是否属于副省级城市。1是&#xff0c;0否。 省会城市&a…

计算机视觉——相机标定(Camera Calibration)

文章目录 1. 简介2. 原理3. 相机模型3.1 四大坐标系3.2 坐标系间的转换关系3.2.1 世界坐标系到相机坐标系3.2.2 相机坐标系到图像坐标系3.2.3 像素坐标系转换为图像坐标系3.2.4 世界坐标转换为像素坐标 3.3 畸变3.3.1 畸变类型3.3.1.1 径向畸变&#xff08;Radial Distortion&a…

C++面试突破---C/C++基础

1.C特点 1. C在C语言基础上引入了面对对象的机制&#xff0c;同时也兼容C语言。 2. C有三大特性&#xff08;1&#xff09;封装。&#xff08;2&#xff09;继承。&#xff08;3&#xff09;多态&#xff1b; 3. C语言编写出的程序结构清晰、易于扩充&#xff0c;程序可读性好。…