当前位置： 首页 > news >正文

前端性能优化 ｜ CDN缓存

news 2026/2/7 10:34:55

前言

CDN（Content Delivery Network）是一种分布式的网络架构，通过在全球各地部署节点服务器来快速传输和分发网络内容。CDN的主要目标是提供快速、可靠的内容传输，以提升用户体验。

本文主要从以下方面讲解CDN

  • 什么是CDN
  • CDN的作用
  • CDN的原理
  • CDN的使用场景

一、什么是 CDN

1. CDN 的概念

CDN是内容分发网络（Content Delivery Network）的缩写，是一种通过在全球各地分布的服务器上存储和传输网络资源（如 HTML 页面、图片、视频、应用程序等）的技术架构。

image.png

2. CDN 系统的构成

  1. 原始服务器（Origin Server）：也称为源服务器，是存储网站内容（如HTML、CSS、JavaScript、图片、视频等）的主要服务器。

  2. 节点服务器（Edge Servers）：也称为边缘服务器或CDN节点，分布在全球各个地理位置。

  3. 节点选择器/调度器（Node Selector/Load Balancer）：是CDN系统的核心组件之一，用于选择与用户最接近的节点服务器。

  4. 缓存（Cache）：CDN节点服务器上的缓存用于存储网站内容的副本。当用户请求访问网站的内容时，CDN节点会先检查自己的缓存中是否存在所需内容的副本。

  5. 内容传输网络（Content Delivery Network）：CDN网络是由一系列节点服务器组成的分布式网络，这些节点服务器相互连接，以实现内容的快速传输和访问。

  6. 内容管理系统（Content Management System）：部分CDN系统还提供内容管理系统，用于帮助网站管理员管理和控制网站内容的分发、缓存和更新等操作。

这些组件共同协作，构成了一个完整的CDN系统，以提供快速、高效和可靠的内容分发服务。

二、CDN 的作用

CDN一般会用来托管Web资源 (包括文本、图片和脚本等)，可供下载的资源(媒体文件、软件、文档等)，应用程序 (门户网站） 等 。

  • 加速网站访问：通过将网站的动态内容缓存在离用户最近的节点服务器上，实现就近访问，减少内容传输的距离和网络延迟。大幅提高网站的访问速度，加快加载，提升用户体验。

  • 节约网络带宽：将网站的静态资源缓存在多个节点服务器上，当用户访网站时，大部分的资源可以从离用户较近的节点服务器上获取，少了对原始服务器的访问。减轻了源服务器的负载压力，节约了网络带宽的使用，提高了整体的网络效率。

  • 提高网站的可用性和稳定性：通过分布在全球各地的节点服务器，在原始服务器发生故障或服务不可用时，可以自动切换到其他可用的节点服务器，确保网站内容的可持续提供。这种容灾备份机制可以提高网站的可用性和稳定性，减少中断的风险。

  • 抵御网络攻击：由于CDN节点分布广泛，网络流量可以在多个节点服务器上进行均衡分散，有效减轻了源服务器的负载和DDoS攻击带来的影响。CDN还可以使用如防火墙、入侵检测系统等一些安全机制和防御措施，保护网站免受恶意攻击。

  • 提供高质量的视频内容传输：通过将视频内容缓存在离用户最近的节点服务器上，CDN可以提供更快速、稳定的视频播放体验，避免视频卡顿、加载缓慢等问题。

综上所述，CDN的作用是提供快速、可靠的内容分发服务，加速网站访问、节省网络带宽、提高可用性和稳定性，抵御网络攻击，提供高质量的视频内容传输，从而改善用户体验，提升网站的性能和效果。

三、CDN 的原理

image.png

以用户访问浏览器某网址（www.example.com） 时为例，CDN的加速流程通常包括以下几个步骤：

  1. 域名解析：当用户在浏览器中输入网址并按下回车键后，浏览器会向本地DNS服务器发送域名解析，本地DNS服务器会返回CDN的负载均衡器的地址。

  2. 负载均衡：浏览器根据负载均衡器的IP地址，向CDN负载均衡器发送请求。载均衡器的作用是选择一个最合适的CDN节点服务器来响应用户的请求。

  3. 缓存判断：CDN节点服务器收到用户的请求后，会先判断请求资源是否缓存在其本地服务器上。如果有，则直接返回缓的资源，这样可以大大提高响应速度和节省带宽消耗。如果没有缓存的资源，则进入下一步。

  4. 源服务器回源：当节点服务器没有缓存所需的资源时，会向源服务器发送请求，获取资源的原始本。源服务器可以是网站的服务器、视频流媒体的视频源服务器等，根据不同的业务需求而定。

  5. 传输加速：源服务器将请求资源发送给节点服务器后，节点服务器会将资源按照缓存策略进行存储，并将资源回传给用户的浏览器。由于CDN节点服务器通常位于离用户更近的一方，因此传输时间较短，用户可以更快地获取请求的资源。

  6. 动态内容回源：对于一些动态生成的内容或需要实时更新的资源（如用户个人信息、实时天气数据等），CDN节点服务器需要及时回源更新这些内容，以保证数据的实时性和准确性。

总的来说，CDN加速流程包括域名解析、负载均衡、缓存判断、源服务器回源、传输加速和动态内容回源等步骤。通过减少访问迟、节省带宽消耗和提供更好的用户体验，CDN可以提供快速、稳定和可靠的内容分发服务。

四、CDN 的使用场景

前端使用CDN可以使网站或应用的静态资源（如样式表、JavaScript文件、字体、图像等）从离用户更近的节点服务器加载，从而提高网页加载速度和用户体验。以下是前端使用CDN的几个常见实例：

1. 加载公共库和框架

许多前端开发者使用公共库和框架来加速开发和提供更好的用户体。常见的如jQuery、React、Vue.js等。通过使用CDN加载这些公库，可以将它们缓存在CDN的节点服务器上，提供更快速的加载和传输，无需在本地部署维护这些库的副本。

例如，使用CDN jQuery库：

<script src="https://cdn.jsdelivr/npm/jquery@3.60/dist/jquery.min.js"></script>

2. 加载图标字体

图标字通常用于网站的图标展示，如Font Awesome、Bootstrap等使用CDN加载这些图标字体，可以减少字体的加载时间和带宽消耗。例如，使用CDN加载Font图标字体：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome5.15.4/css/all.min.css" />

3. 加载样式

使用CDN加载常用的样式表文件，如Normalize.css、Bootstrap等，可以降低式表文件的加载时间和提高页的兼容性。例如，使用CDN加载Normalize样式表：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize@8.0.1/normalize.min.css" />

4. 加载JavaScript库和件

如果网站或应用使用了一些常见的JavaScript库和插件，如Moment.js、Swiper等，可以使用CDN加载它们，避免自行下载和部署这些文件。例如使用CDN加载Moment.js：

<script src="://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>

5. 加载图片CDN

我们打开稀土掘金网站，随便打开一篇文章，我们可以很多图片都是从 CDN 服务器上请求来的，这极大的提高了图片的响应速度。

image.png

五、常用的前端 CDN 库

名称优势官网
jsDelivr基于 MaxCDN 的一个免费开源的 CDN 解决方案 http://www.jsdelivr.com
CDNJS提供非常完整的 JavaScript 库 http://www.cdnjs.com
BootCDN目前前端开源的项目几乎都涵盖了，支持http和https http://www.bootcdn.cn
Staticfile CDN基于 CDN 加速由七牛云提供包括 JS、CSS、image 和 swf 等静态文件的，支持http和https https://www.staticfile.org
jQuery CDN一个只有 jQuery 的 CDN http://code.jquery.com
百度云资源站基于百度云的资源站，各种开发语言的 SDK 均可以免费下载 https://cloud.baidu.com/doc/Developer/index.html

总结

CDN主要用于在全球范围内加速静态内容、动态内容和流媒体的传输。通过在各地部署节点服务器，将内容缓存到离用户更近的服务器上，从而提供更快速、可靠和高效的内容传输。

CDN缓存在前端性能优化中的主要用于加速静态资源加载、减轻服务器负载，以及缓解网络拥塞等方面。合理利用CDN缓存，能够大幅提升网页性能，提高用户体验。

相关文章：

前端性能优化 ｜ CDN缓存

前言 CDN&#xff08;Content Delivery Network&#xff09;是一种分布式的网络架构&#xff0c;通过在全球各地部署节点服务器来快速传输和分发网络内容。CDN的主要目标是提供快速、可靠的内容传输&#xff0c;以提升用户体验。 本文主要从以下方面讲解CDN 什么是CDNCDN的作…...

编程日记 2024/3/14 4:21:34

【C#语言入门】17. 事件详解（上）

【C#语言入门】17. 事件详解&#xff08;上&#xff09; 一、初步了解事件 定义&#xff1a;单词Event&#xff0c;译为“事件” 通顺的解释就是**“能够发生的什么事情”**&#xff0c;例如&#xff0c;“苹果”不能发生&#xff0c;但是“公司上市”这件事能发生。在C#中事…...

编程日记 2024/3/14 4:18:30

Charles无法打开导出的har文件解决方法

打开出错&#xff1a;MalformedJson: Use JsonReader.setLenient(true) to accept malformed JSON at line1 column 1368184 path $.log.entries[41].request.postData.text 一、解决办法 用json.dumps格式化一下里面内容&#xff0c;保存为新文件再打开 import jsondef modify…...

编程日记 2024/3/14 4:15:28

FFmpeg--FlvPaser源码：解析.flv输出.h264

文章目录 程序功能&#xff1a;函数调用流程&#xff1a;部分FlvParse.h部分FlvParse.cpp 程序功能&#xff1a; 解析flv文件&#xff0c;重写一个h264文件&#xff0c;如输入movie.flv , 输出movie.h264 (只有视频&#xff0c;没有声音) 函数调用流程&#xff1a; 1 Proce…...

编程日记 2024/3/14 4:10:23

【项目笔记】java微服务：黑马头条（day02）

文章目录 app端文章查看&#xff0c;静态化freemarker,分布式文件系统minIO1)文章列表加载1.1)需求分析1.2)表结构分析1.3)导入文章数据库1.3.1)导入数据库1.3.2)导入对应的实体类 1.4)实现思路1.5)接口定义1.6)功能实现1.6.1)&#xff1a;导入heima-leadnews-article微服务&am…...

编程日记 2024/3/14 4:07:20

每天五分钟计算机视觉：图像数据不足带来的问题和解决办法

本文重点 在当今的数字时代，图像数据的应用已经渗透到各个领域，包括但不限于计算机视觉、机器学习、自动驾驶、医疗诊断等。然而，当图像数据不足时，会引发一系列问题，对相关应用产生负面影响。 尤其是计算机视觉领域，图像数据尤为珍贵和稀缺，如果计算机视觉的任务中，如…...

编程日记 2024/3/14 4:06:18

手机App防沉迷系统C卷(JavaPythonC++Node.jsC语言)

智能手机方便了我们生活的同时，也侵占了我们不少的时间。"手机App防沉迷系统"能够让我们每天合理的规划手机App使用时间，在正确的时间做正确的事。 它的大概原理是这样的： 1、在一天24小时内，可注册每个App的允许使用时段; 2、一个时段只能使用一个App，举例说明…...

编程日记 2024/3/14 4:04:16

【WEEK2】学习目标及总结【SpringMVC】【中文版】

学习目标&#xff1a; 三周完成SpringMVC入门——第二周 学习内容&#xff1a; 参考视频教程【狂神说Java】SpringMVC最新教程IDEA版通俗易懂使用注释完成MVC程序Controller控制器RestFul风格结果跳转方式数据处理 学习时间及产出&#xff1a; 第二周 MON~FRI 2024.3.4 【W…...

编程日记 2024/3/14 4:03:15

Git版本工具学习

目录 版本控制git配置工作区域文件状态git对象模型基础命令.gitignore忽略文件IDEA集成Git 版本控制 本地版本控制&#xff1a;在本地记录每一次版本更新。 集中版本控制&#xff1a;版本数据都保存在单一服务器&#xff0c;不联网就看不到版本信息。SVN 分布式版本控制&…...

编程日记 2024/3/14 3:59:12

baidu, google和chatgpt -- 翻译对比

原文 That ChatGPT can automatically generate something that reads even superficially like human-written text is remarkable, and unexpected. But how does it do it? And why does it work? My purpose here is to give a rough outline of what’s going on inside…...

编程日记 2024/3/14 3:55:07

高分辨率全球海洋温度和盐度再分析数据Global Ocean Physics Reanalysis（0.083°），并利用matlab读取绘图

1.引言 在研究全球海平面变化的问题中&#xff0c;卫星测高获得总的海平面变化&#xff0c;而海平面变化包含质量变化和比容变化。因此测高数据和海洋物理分析数据对于海平面研究至关重要。 测高数据下载网址&#xff1a; Global Ocean Gridded L 4 Sea Surface Heights And …...

编程日记 2024/3/14 3:51:03

微信小程序修改placeholder样式

微信小程序有既定的修改placeholder的标签 一、placeholder-style直接修改样式 <input type"text" placeholder"请输入" placeholder-style"color:#e2e2e2;"></input>二、placeholder-class设置样式类 <input type"text&…...

编程日记 2024/3/14 3:50:01

爬虫案例1

通过get请求直接获取电影信息 目标页面: https://spa6.scrape.center/在network中可以看到是通过Ajax发送的请求&#xff0c;这个请求在postman中也可以直接请求成功&#xff0c;这只是一个用来练习爬虫的&#xff0c;没有达到js逆向的过程&#xff0c;需要通过分析js 代码来获…...

编程日记 2024/3/14 3:49:00

修改表结构

目录 修改表结构 创建数据表插入数据 修改已有列 修改 member 表的 name 列的定义 为表增加列 增加一个 address 列&#xff0c;这个列上不设置默认值 增加一个 sex 列&#xff0c;这个列上设置默认值 删除表中的列 删除 sex 列 Oracle从入门到总裁:​​​​​​https…...

编程日记 2024/3/14 3:44:56

Rust 语言中的 into() 方法

在 Rust 中&#xff0c;into() 方法通常用于将一个类型的值转换为另一个类型&#xff0c;这通常涉及到资源的所有权转移。into() 方法通常定义在实现了 Into<T> trait 的类型上&#xff0c;该 trait 允许一个类型被“转换”为另一个类型。 into() 方法的一个常见用途是在…...

编程日记 2024/3/14 3:43:55

MinIO权限提升漏洞CVE-2024-24747详细解决办法

漏洞名称&#xff1a; MinIO权限提升漏洞(CVE-2024-24747) 漏洞简介 2024年2月2日&#xff0c;深瞳漏洞实验室监测到一则MinIO 存在权限提升漏洞的信息&#xff0c;漏洞编号&#xff1a;CVE-2024-24747&#xff0c;漏洞威胁等级&#xff1a;高危。 该漏洞是由于用户创建的访…...

编程日记 2024/3/14 3:42:54

“我快无聊死了”用英语怎么说？柯桥英语口语学习，成人零基础学外语

每日一句 Im bored to death. 我快无聊死了。 单词解析&#xff1a; bored / bɔːd / adj.无聊的&#xff0c;厌倦的 bored to d15857575376eath&#xff1a;指非常无聊或厌烦&#xff0c;达到了极点的程度。 "bored" 和 "boring" 都与无聊相关&#…...

编程日记 2024/3/14 3:37:50

JS ATM练习案例（复习循环知识）

需求&#xff1a;用户可以选择存钱、取钱、查看余额和退出功能。 分析&#xff1a;1循环时反复出现提示框&#xff0c;所以提示框写到循环里面。 2.退出的条件是4&#xff0c;所以是4就会结束循环 3.提前准备一个金额预存储 4取钱为减法操作&#xff0c;存钱为加法操作&#xf…...

编程日记 2024/3/14 3:36:48

Android 二维码相关(一)

Android 二维码相关(一) 本篇文章主要记录下android下使用zxing来创建二维码. 1: 导入依赖 api "com.google.zxing:core:3.5.1"2: 创建二维码 创建QRCodeWriter对象 QRCodeWriter qrCodeWriter new QRCodeWriter(); 将文本内容转换成BitMatrix BitMatrix encode …...

编程日记 2024/3/14 3:33:46

利用tree命令自动保存文件层级结构

tree命令的使用 为了将上图左侧的文件目录&#xff0c;生成上图右侧中的文件夹结构列表&#xff0c;保存在txt中&#xff0c;使用了如下cmd命令&#xff1a; C:\armadillo-12.8.0>tree .>list.txt以上tree命令分为3部分&#xff1a; tree 命令. 在当前目录>list.tx…...

编程日记 2024/3/14 3:32:45

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2026/2/3 22:50:06

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2026/1/25 6:16:49

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

编程新知 2025/9/14 12:09:11

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/11/13 2:37:01

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

编程新知 2026/2/4 17:33:27

云安全与网络安全：核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...

编程新知 2026/1/28 22:45:10