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

前端性能优化 ｜ CDN缓存

news 2026/2/11 0:49:56

前言

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

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2026/2/4 23:47:47

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/11/12 21:44:33

Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

编程新知 2025/11/4 22:48:45

文件上传漏洞防御全攻略

要全面防范文件上传漏洞&#xff0c;需构建多层防御体系&#xff0c;结合技术验证、存储隔离与权限控制&#xff1a; &#x1f512; 一、基础防护层 前端校验&#xff08;仅辅助&#xff09; 通过JavaScript限制文件后缀名&#xff08;白名单&#xff09;和大小&#xff0c;提…...

编程新知 2025/8/18 19:05:00

数据结构：泰勒展开式：霍纳法则（Horner‘s Rule）

目录 &#x1f50d; 若用递归计算每一项&#xff0c;会发生什么&#xff1f; Horners Rule&#xff08;霍纳法则&#xff09; 第一步&#xff1a;我们从最原始的泰勒公式出发 第二步&#xff1a;从形式上重新观察展开式 &#x1f31f; 第三步&#xff1a;引出霍纳法则&…...

编程新知 2026/2/4 23:58:11

边缘计算网关提升水产养殖尾水处理的远程运维效率

一、项目背景 随着水产养殖行业的快速发展&#xff0c;养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下&#xff0c;而且难以实现精准监控和管理。为了提升尾水处理的效果和效率&#xff0c;同时降低人力成本&#xff0c;某大型水产养殖企业决定…...

编程新知 2026/2/1 16:16:37

高效的后台管理系统——可进行二次开发

随着互联网技术的迅猛发展&#xff0c;企业的数字化管理变得愈加重要。后台管理系统作为数据存储与业务管理的核心&#xff0c;成为了现代企业不可或缺的一部分。今天我们要介绍的是一款名为 若依后台管理框架 的系统&#xff0c;它不仅支持跨平台应用&#xff0c;还能提供丰富…...

编程新知 2026/2/4 15:23:03

C++中vector类型的介绍和使用

文章目录 一、vector 类型的简介1.1 基本介绍1.2 常见用法示例1.3 常见成员函数简表 二、vector 数据的插入2.1 push_back() —— 在尾部插入一个元素2.2 emplace_back() —— 在尾部“就地”构造对象2.3 insert() —— 在任意位置插入一个或多个元素2.4 emplace() —— 在任意…...

编程新知 2026/2/8 6:54:24

宠物车载安全座椅市场报告：解读行业趋势与投资前景

一、什么是宠物车载安全座椅&#xff1f; 宠物车载安全座椅是一种专为宠物设计的车内固定装置&#xff0c;旨在保障宠物在乘车过程中的安全性与舒适性。它通常由高强度材料制成&#xff0c;具备良好的缓冲性能&#xff0c;并可通过安全带或ISOFIX接口固定于车内。 近年来&…...

编程新知 2026/1/8 16:11:22