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

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过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 缓存则在全球范围内加速资源分发。开发人员需要深入理解这些缓存技术的原理、适用场景和局限性,根据应用的特点合理选择和组合使用缓存技术,并制定有效的缓存更新策略,以充分发挥缓存的优势,同时避免因缓存问题导致的用户体验下降或数据不一致等问题。在不断发展的前端技术环境中,缓存技术的合理应用将持续是优化前端应用的关键环节之一。

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

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

相关文章

A3026 Java+jsp+servlet+mysql高校学生请假管理系统

高校学生请假管理系统 1.摘要2. 绪论3.功能结构4.界面展示5.源码获取 1.摘要 高校学生请假管理系统 摘要:随着计算机的发展与不断进步,各个领域都出现了新的技术,曾经各种规模之间的竞争已经发展成为技术之间的竞争,管理和人才之…

机器学习周报(12.2-12.8)

文章目录 摘要Abstract Vision Transformer1 原理2 代码 摘要 本周学习了Vision Transformer (ViT) 的基本原理及其实现,并完成了基于PyTorch的模型训练、验证和预测任务。深入理解了ViT如何将图像分割成patch作为输入序列,并结合Transformer Encoder处…

Jmeter Address already in use: connect 解决

做压测接口时,并发一段时间后,会报java.net.BindException: Address already in use: connect 原因: windows提供给TCP/IP链接的端口为 1024-5000,并且要四分钟来循环回收它们,就导致在短时间内跑大量的请求时将端口占…

深入解析 HTML Input 元素:构建交互性表单的核心

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

力扣打卡10:K个一组翻转链表

链接:25. K 个一组翻转链表 - 力扣(LeetCode) 这道题需要在链表上,每k个为一组,翻转,链接。 乍一看好像比较容易,其实有很多细节。比如每一组反转后怎么找到上一组的新尾,怎么找到…

【银河麒麟操作系统真实案例分享】内存黑洞导致服务器卡死分析全过程

了解更多银河麒麟操作系统全新产品,请点击访问 麒麟软件产品专区:https://product.kylinos.cn 开发者专区:https://developer.kylinos.cn 文档中心:https://documentkylinos.cn 现象描述 机房显示器连接服务器后黑屏&#xff…

Android显示系统(04)- OpenGL ES - Shader绘制三角形

Android显示系统(02)- OpenGL ES - 概述 Android显示系统(03)- OpenGL ES - GLSurfaceView的使用 Android显示系统(04)- OpenGL ES - Shader绘制三角形 Android显示系统(05)- OpenGL…

Ubuntu 22.04安装Nessus(离线激活模式)

Ubuntu 22.04安装Nessus 一、 Nessus 简介二、Nessus下载安装三、激活Nessus四、创建一个基础扫描五、 破解Nessus只能扫描16个地址的限制六、更新插件 一、 Nessus 简介 Nessus 官网: https://www.tenable.com/ Nessus号称世界上最流行的扫描程序,Nessu…

OpenAI 发布 o1 LLM,推出 ChatGPT Pro

OpenAI正式发布了专为复杂推理而构建的 OpenAI o1大型语言模型(LLM)。 该公司还推出了 ChatGPT Pro,这是一项每月 200 美元的套餐,包括无限制访问 OpenAI o1、o1-mini、GPT-4o 和高级语音对话。 OpenAI o1 从 9 月 12 日起在 ChatGPT 中推出预览版&…

上海理工大学《2024年867自动控制原理真题》 (完整版)

本文内容,全部选自自动化考研联盟的:《上海理工大学867自控考研资料》的真题篇。后续会持续更新更多学校,更多年份的真题,记得关注哦~ 目录 2024年真题 Part1:2024年完整版真题 2024年真题

汽配行业数字化解决方案(一)

汽配行业数字化解决方案,是通过整合云计算、大数据、人工智能、物联网等先进技术,构建一个全面、高效、智能的数字化生态系统,以实现汽配供应链的全程可视化与智能化管理。该解决方案涵盖了从供应商管理、库存优化、订单处理、物流跟踪到客户…

华为开源自研AI框架昇思MindSpore应用案例:基于MindSpore框架的SGD优化器案例实现

SGD优化器基本原理讲解 随机梯度下降(SGD)是一种迭代方法,其背后基本思想最早可以追溯到1950年代的Robbins-Monro算法,用于优化可微分目标函数。 它可以被视为梯度下降优化的随机近似,因为它用实际梯度(从…

集成学习综合教程

一、前置知识 一个分类器的分类准确率在60%-80%,即:比随机预测略好,但准确率却不太高,我们可以称之为 “弱分类器”,比如CART(classification and regression tree 分类与回归树)。 反之&#x…

大语言模型技术相关知识-笔记整理

系列文章目录 这个系列攒了很久。主要是前段之间面试大语言模型方面的实习(被拷打太多次了),然后每天根据面试官的问题进行扩展和补充的这个笔记。内容来源主要来自视频、个人理解以及官方文档中的记录。方便后面的回顾。 2024-12-7: 对公式…

【开源免费】基于SpringBoot+Vue.JS中小型医院网站(JAVA毕业设计)

博主说明:本文项目编号 T 078 ,文末自助获取源码 \color{red}{T078,文末自助获取源码} T078,文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…

哈希知识详解

一、哈希 以前,在面对海量数据的查找时,最快就是红黑树 logN,无法满足需求。 于是探索出了另一种用关键字 key 值与其存储位置建立映射的思想,让查找效率提升到 O(1) ,这个就是哈希。 二、哈希函数 1、直接定值法 ①…

红日靶场vulnstark 4靶机的测试报告[细节](一)

目录 一、测试环境 1、系统环境 2、注意事项 3、使用工具/软件 二、测试目的 三、操作过程 1、信息搜集 2、漏洞利用Getshell ①Struts 2 s2-045漏洞 手工利用s2-45漏洞 Msf综合利用 ②Tomcat框架(CVE-2017-12615) ③phpMyAdmin(CVE-2018-12613) 构造语句写入冰蝎木…

D92【python 接口自动化学习】- pytest基础用法

day92 pytest的skip和skipif用法 学习日期:20241208 学习目标:pytest基础用法 -- pytest的skip和skipif用法 学习笔记: 测试用例跳过 skip和skipif用法,测试用例跳过 pytest.mark.skip 跳过标记的用例 pytest.mark.skipif(1 …

【Java】类似王者荣耀游戏

r77683962/WangZheYouDianRongYao 运行效果图: 类似王者荣耀游戏运行效果图_哔哩哔哩_bilibili

【数字电路与逻辑设计】实验二 数值比较器

文章总览:YuanDaiMa2048博客文章总览 【数字电路与逻辑设计】实验二 数值比较器 一、实验内容二、设计过程(一)真值表(二)设计思路 三、源代码(一)代码说明:(二&#xff…