前端-CDN的理解及CDN一些使用平台

目录

1.CDN的概念

[(1) 分发服务系统](#(1) 分发服务系统)

(2)均衡负荷系统

(3)运营管理系统

(4)缓存系统

(5)支撑系统

2.CDN的基本工作原理

3.CDN使用缓存资源过程

4.CDN对前端开发的意义

5.前端优化可使用的CDN平台

总结


本文主要介绍CDN的了解和使用CDN资源的过程,还有一些CDN使用平台。

1.CDN的概念

CDN内容分发网络,是一种通过互联网互相连接的电脑网络系统,利用最靠近每

位用户的服务器,更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户,来提供高性能、可扩展性及低成本的网络内容传递给用户。

CDN系统通常可以分为以下几个关键部分:

(1) 分发服务系统

分发服务系统 是CDN的核心功能之一,最基本的工作单元是cache设备(存储设备),主要负责将内容从源服务器推送到边缘的缓存服务器中,并将内容数据流分发到全网的缓存服务器中,这些缓存服务器随后为用户提供内容服务。

(2)均衡负荷系统

均衡负荷 系统是CDN的另一个核心组成部分,它的主要功能是为用户的服务请求进行优化的访问调度,确保用户能够以最优的方式访问到内容。

均衡负荷系统一般分为两级:全局/区域负荷均衡系统(GSLB)和本地负荷均衡系统(SLB)。全局/区域负荷均衡系统通常采用DNS解析与应用层重定向的方法,根据用户就近访问的原则选择缓存服务器节点。而本地负荷均衡系统则负责缓存服务器节点内部的调度,确保节点内部的负载均衡。

(3)运营管理系统

运营管理系统它负责处理CDN系统的日常运营和业务管理。运营管理系统通常由两个子系统组成:运营管理和网络管理。

运营管理子系统主要包括客户管理、业务管理、计费管理与数据采集等模块,用于处理与用户、业务、计费及数据分析等相关的任务。网络管理子系统则负责监控CDN网络的运行状态,确保网络的稳定性和可靠性。

(4)缓存系统

缓存服务器是CDN系统中最基本的工作单元负责缓存热点数据,如静态资源(HTML、CSS、JavaScript文件、图片等)和多媒体资源(视频、音频等)。

当用户请求这些内容时,CDN系统可以直接从缓存服务器中提供,从而减少对源服务器的访问压力,提高访问速度。

(5)支撑系统

支撑系统包括各种辅助CDN系统正常运行和优化的工具和服务。

例如,阿里云CDN的支撑系统包括天眼、数据智能和配置管理系统等,它们分别具备资源监测、数据分析和配置管理能力。

这些工具和服务有助于CDN系统更好地适应不同的网络环境和业务需求,提高系统的整体性能和稳定性。

2.CDN的基本工作原理

(1)内容分发:CDN服务器将网站或应用的内容(如HTML、CSS、JavaScript文件、图片、视频等)缓存到各地的边缘服务器上。

(2)提供访问路由:当用户请求访问网站时,CDN系统通过智能DNS(域名系统)解析或HTTP重定向等机制,将用户的请求引导到距离用户最近且负载较低的CDN节点上。

(3)缓存加速:因为内容已被缓存到CDN节点,用户的请求可以直接从最近的CDN节点获取数据,而不需要回源服务器,从而减少了数据传输的距离和时间。

(4)负载均衡:CDN系统能够自动检测各节点的健康状况和负载情况,确保流量能够均匀分配到各个节点,避免单一节点过载。

(5)安全性增强:CDN还可以提供DDoS防护、HTTPS加速等安全功能,保护网站和应用免受恶意攻击。

3.CDN使用缓存资源过程

用户使用CDN缓存资源的过程:

**用户发起请求:**用户在前端(如浏览器)输入或点击一个URL,该URL指向了希望访问的资源(如网页、图片、视频等);

本地DNS解析:如果网站使用了CDN服务,请求首先通过本地DNS系统,然后转向CDN专用的DNS服务器;

**智能选择:**CDN的DNS服务器具有智能调度功能,会根据用户位置和网络状况,智能选择一个最优的CDN节点;

**节点响应:**CDN节点检查并快速响应用户请求,如果资源已缓存则直接返回,否则从源站获取并缓存后返回;

资源加载:用户设备加载并显示CDN返回的资源。

4.CDN对前端开发的意义

提升用户体验:减少页面加载时间,提高页面响应速度,特别是在高并发访问和跨地域访问的情况下。

减轻服务器压力:由于CDN缓存了大量静态资源,减少了回源请求,从而减轻了源服务器的负载。

优化资源加载:CDN支持HTTP/2、HTTP/3等协议,提供更快的资源加载速度和更高效的连接复用。

增强网站安全性:提供安全加速功能,保护网站免受各种网络攻击。

5.前端优化可使用的CDN平台

CDN适用于任何需要加速内容传输、提高用户体验和增强安全性的场景。下面说一些可以使用的CDN平台。像大多服务商,比如阿里云、腾讯云、又拍云、七牛云等的 CDN 都是按量收费的。

字节跳动:http://cdn.bytedance.com/****

jsDelivr:https://www.jsdelivr.com/

jsDelivr是一个免费开源的CDN解决方案,包含JavaScript库、jQuery插件、CSS框架、字体等Web上常用的静态资源。它不仅适用于前端项目的加速,还可以作为图床的加速器。

UNPKG:https://unpkg.com/

unpkg是一个快速的全球内容交付网络,适用于npm中的所有内容。开发者可以通过简单的URL格式快速加载任何文件。

BootCDN:https://www.bootcdn.cn/

BootCDN是一个稳定、快速、免费的前端开源项目CDN加速服务,致力于为Bootstrap、jQuery、Angular、Vue.js等优秀的前端开源项目提供稳定、快速的CDN加速服务。它收录了众多前端开源项目,并支持HTTPS协议,确保数据传输的安全性。

Staticfile CDN:https://staticfile.org/

总结

CDN是前端开发和优化及其他领域中不可或缺的一部分,它通过在全球范围内缓存和分发内容,提升了网站和应用的访问速度和用户体验。CDN平台比较多,像一些像静态图片聚合图床 - 免费无限图片上传 (superbed.cn) TinyPNG -- Compress WebP, PNG and JPEG images intelligently ,视频视频二维码_视频二维码酷播官网_酷播云官网 (cuplayer.com) ,文件等CDN。还有哪些好用的,欢迎大家分享!

相关推荐
m0_748254884 分钟前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.15 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营20 分钟前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood1 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端1 小时前
0基础学前端-----CSS DAY9
前端·css
joan_851 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
m0_748236111 小时前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo6172 小时前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_748248942 小时前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
m0_748235612 小时前
从零开始学前端之HTML(三)
前端·html