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

前端性能优化 | CDN缓存

前言

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的作…...

【C#语言入门】17. 事件详解(上)

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

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…...

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

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

【项目笔记】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…...

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

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

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

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

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

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

Git版本工具学习

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

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…...

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

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

微信小程序修改placeholder样式

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

爬虫案例1

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

修改表结构

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

Rust 语言中的 into() 方法

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

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

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

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

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

JS ATM练习案例(复习循环知识)

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

Android 二维码相关(一)

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

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

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

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)

在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...