前端性能优化 ｜ 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缓存，能够大幅提升网页性能，提高用户体验。

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

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

相关文章

外贸常用的出口认证 | 全球外贸数据服务平台 | 箱讯科技

外贸常用的出口认证 | 全球外贸数据服务平台 | 箱讯科技

出口认证是一种贸易信任背书&#xff0c;对许多外贸从业者而言,产品的出口认证和当前的国际贸易环境一样复杂多变&#xff0c;不同的目标市场、不同的产品类别,所需要的认证及标准也不同。 国际认证 01 IECEE-CB IECEE-CB体系的中文含义是“关于电工产品测试证书的相互认可体…
阅读更多...
数据库-第六/七章 关系数据理论和数据库设计【期末复习|考研复习】

数据库-第六/七章 关系数据理论和数据库设计【期末复习|考研复习】

前言 总结整理不易&#xff0c;希望大家点赞收藏。 给大家整理了一下数据库系统概论中的重点概念&#xff0c;以供大家期末复习和考研复习的时候使用。 参考资料是王珊老师和萨师煊老师的数据库系统概论(第五版)。 文章目录 前言第六章 关系数据理论6.1 规范化6.2 范式6.3 规范…
阅读更多...
C#，入门教程(26)——数据的基本概念与使用方法

C#，入门教程(26)——数据的基本概念与使用方法

上一篇&#xff1a; C#&#xff0c;入门教程(25)——注释&#xff08;Comments&#xff09;你会吗&#xff1f;看多图演示&#xff0c;学真正注释。https://blog.csdn.net/beijinghorn/article/details/124681888 本文所述的知识基本上适用于C/C&#xff0c;java等其他语言。 …
阅读更多...
LVS集群 ----------------（直接路由 ）DR模式部署

LVS集群 ----------------（直接路由 ）DR模式部署

一、LVS集群的三种工作模式 lvs-nat&#xff1a;修改请求报文的目标IP,多目标IP的DNAT lvs-dr&#xff1a;操纵封装新的MAC地址&#xff08;直接路由&#xff09; lvs-tun&#xff1a;隧道模式 lvs-dr 是 LVS集群的 默认工作模式 NAT通过网络地址转换实现的虚拟服务器&…
阅读更多...
在分布式环境中使用状态机支持数据的一致性

在分布式环境中使用状态机支持数据的一致性

简介 在本文中&#xff0c;我们将介绍如何在分布式系统中使用transaction以及分布式系统中transaction的局限性。然后我们通过一个具体的例子&#xff0c;介绍了一种通过设计状态机来避免使用transaction的方法。 什么是数据库transaction Transaction是关系型数据普遍支持的…
阅读更多...
java SSM流浪宠物救助与领养myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

java SSM流浪宠物救助与领养myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM流浪宠物救助与领养管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系…
阅读更多...
Fragment

Fragment

1.网格视图(随便插进来一条) 2.Fragment
阅读更多...
谷歌开源的LLM大模型 Gemma 简介

谷歌开源的LLM大模型 Gemma 简介

相关链接&#xff1a; Hugging face模型下载地址&#xff1a;https://huggingface.co/google/gemma-7bGithub地址&#xff1a;https://github.com/google/gemma_pytorch论文地址&#xff1a;https://storage.googleapis.com/deepmind-media/gemma/gemma-report.pdf官方博客&…
阅读更多...
Linux——文件标识符

Linux——文件标识符

目录 一、文件基础 二、常见的C语言文件接口 三、系统文件接口 四、理解语言与系统文件操作的关系 五、如何理解一切皆文件 六、文件标识符再理解 一、文件基础 一个空文件&#xff0c;也会占用磁盘空间&#xff0c;这是因为文件不仅仅有存放在里面的内容&#xff0c;还…
阅读更多...
Chapter20-Ideal gases-CIE课本要点摘录、总结(编辑中)

Chapter20-Ideal gases-CIE课本要点摘录、总结(编辑中)

20.1 Particles of a gas Brownian motion Fast modules 速率的数值大概了解下&#xff1a; average speed of the molecules:400m/s speed of sound:approximately 330m/s at STP&#xff08;standard temperature and pressure&#xff09; Standard Temperature and Pres…
阅读更多...
ROS 2基础概念#5：执行器（Executor）| ROS 2学习笔记

ROS 2基础概念#5：执行器（Executor）| ROS 2学习笔记

在ROS 2中&#xff0c;Executor是一个核心概念&#xff0c;负责管理节点&#xff08;Node&#xff09;中的回调函数&#xff0c;如订阅消息的回调、服务请求的回调、定时器回调等。Executor决定了何时以及如何执行这些回调&#xff0c;从而在ROS 2系统中实现异步编程。 ROS 2 …
阅读更多...
七彩虹八渐变 外贸建站公司wordpress模板

七彩虹八渐变 外贸建站公司wordpress模板

进出口水果wordpress外贸模板 漂亮水果wordpress外贸模板&#xff0c;做水果进出品生意的外贸公司自建站官网模板。 https://www.jianzhanpress.com/?p3516 玩具wordpress外贸模板 简洁玩具wordpress外贸模板&#xff0c;适合做跨境电商外贸公司使用的wordpres外贸s网站主题…
阅读更多...
FPGA 按键控制串口发送

FPGA 按键控制串口发送

按键消抖 消抖时间一般为10ms&#xff0c;我使用的板子是ACX720&#xff0c;晶振为50MHZ&#xff0c;20ns为一周期。 状态机 模块设计 设计文件 timescale 1ns / 1ps // // Company: // Engineer: // // Create Date: 2023/01/11 12:18:36 // Design Name: // Module Name…
阅读更多...
（学习总结）如何使用ChatGPT API训练自定义知识库

（学习总结）如何使用ChatGPT API训练自定义知识库

第一步&#xff1a; 安装OpenAI、GPT Index、PyPDF2和Gradio库 pip install openai pip install gpt_index pip install PyPDF2 pip install gradio 第二步&#xff1a;用VScode代码编辑器写app.py代码 记得替换api密钥 from llama_index import SimpleDirectoryReader, …
阅读更多...
纯css实现太极八卦图

纯css实现太极八卦图

感觉最近好像闯鬼了&#xff0c;赶紧写个八卦图避避邪&#xff0c;开玩笑了&#xff0c;不废话&#xff0c;上菜&#xff0c;看效果上代码。 效果 代码&#xff0c;你们都是大佬&#xff0c;这里就不解释代码了 &#xff08;hover会转动喔&#xff09;。 <!DOCTYPE html&g…
阅读更多...
LabVIEW智能Modbus监控系统

LabVIEW智能Modbus监控系统

LabVIEW智能Modbus监控系统 在自动化和信息化迅速发展下&#xff0c;传统的监控系统已无法满足现代工业对于数据通讯和处理的高效率和高可靠性要求。为了解决这一问题&#xff0c;设计了一套基于LabVIEW的智能Modbus监控系统。该系统利用LabVIEW的图形化编程环境和Modbus协议的…
阅读更多...
数字孪生10个技术栈：数据处理的六步骤，以获得可靠数据。

数字孪生10个技术栈：数据处理的六步骤，以获得可靠数据。

一、什么是数据处理 在数字孪生中&#xff0c;数据处理是指对采集到的实时或历史数据进行整理、清洗、分析和转化的过程。数据处理是数字孪生的基础&#xff0c;它将原始数据转化为有意义的信息&#xff0c;用于模型构建、仿真和决策支持。 数据处理是为了提高数据质量、整合数…
阅读更多...
深入理解Servlet

深入理解Servlet

目录&#xff1a; ServletWeb开发历史Servlet简介Servlet技术特点Servlet在应用程序中的位置Tomcat运行过程Servlet继承结构Servlet生命周期Servlet处理请求的原理Servlet的作用HttpServletRequest对象HttpServletResponse对象ServletContext对象ServletConfig对象Cookie对象与…
阅读更多...
SpringBoot快速入门（介绍，创建的3种方式，Web分析）

SpringBoot快速入门（介绍，创建的3种方式，Web分析）

目录 一、SpringBoot介绍 二、SpringBootWeb快速入门 创建 定义请求处理类 运行测试 三、Web分析 一、SpringBoot介绍 我们可以打开Spring的官网(Spring | Home)&#xff0c;去看一下Spring的简介&#xff1a;Spring makes Java simple。 Spring发展到今天已经形成了一种…
阅读更多...
Android 多桌面图标启动, 爬坑点击打开不同页面

Android 多桌面图标启动, 爬坑点击打开不同页面

备注 &#xff1a; MainActivity 正常带界面的UI MainActivityBt 和 MainActivityUsb 是透明的&#xff0c;即 android:theme"style/TranslucentTheme" ###场景1:只有MainActivity 设置成&#xff1a;android:launchMode"singleTask" 点击顺序&#xff1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023