点击上方“前端自习课”关注,学习起来~

一、概述


1.1 含义


CDN 的全称是 Content Delivery Network,即内容分发网络。CDN 是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。—— 摘自《百度百科》

名词解释:

  • Origin Server:源站,源服务器

  • User:访问者

  • Edge Server:CDN 的服务器


1.2 核心技术点

  • 内容存储技术

  • 内容分发技术

  • 负载均衡技术


1.3 CDN 优势

  • 加速:基于 CDN 各节点,就近获取内容

  • 降低负载:基于 CDN 缓存,减少源站的访问

  • 成本低:费用成本、部署成本

  • 可扩展性强:基于边缘计算

二、原理


2.1 流程图

简化版流程图

图片来源 AWS

相对“完整版”流程图

图片来源 阿里云


2.2 缓存原理

看个 PHP 缓存的例子:

<?php
$result = Cache::remember('url', 100, function () {
return 'Hello world...';
});

大多数的缓存原理如上面例子,基于 URL 的维度进行 Hash 运算后生成唯一的字符,基于该字符进行缓存的获取与存储。

当涉及静态资源的更新操作的时候,更多的除了使用 URL 维度外,还会依靠附加参数的形式,进行 CDN 缓存的“更新”。但这个“更新”实际是静态资源生成新的 CDN 缓存。

总结

在实际的应用中,HTTP 请求的任何参数均可作为 CDN 缓存的维度,用来组合 Hash 生成唯一字符。

这些维度包括 URL、参数、Header等。但维度的增加也同样意味着 CDN 缓存命中率的降低。

我们来看个例子:

  1. https://docs.flc.io/favicon.ico

  2. https://docs.flc.io/favicon.ico?v=1

  3. https://docs.flc.io/favicon.ico?v=1&b=2

  4. https://docs.flc.io/favicon.ico?b=2&v=1

以上 4 种情况,如首次访问,即使资源相同,但因为参数的原因, CDN 缓存均未命中。

基于第 3、4 点,有些 CDN 服务商还额外支持参数排序后在 Hash,目的就是为了提高命中率。


2.3 Response Headers

大多数 CDN 服务商会在资源请求的 Response Headers 中输出一些涉及缓存命中、CDN 节点、Hash字符、过期时间等信息。

如图:


2.4 刷新预热

刷新(即:清理 CDN 缓存)

通过提供文件 URL 或目录的方式,强制CDN节点回源拉取最新的文件。

预热

将指定的内容主动预热到 CDN 的节点上,用户首次访问即可直接命中缓存,降低源站压力。

一般大规模迁移的时候,会使用到

2.5 CDN 常见功能

  1. 自定义缓存过期时间规则:支持配置自定义资源的缓存过期时间规则, 支持指定路径或者文件名后缀方式, 支持 Header 输出缓存过期时间

  2. 自定义 header 头:如 Access-Control-Allow-Origin: * 以实现跨域

  3. 自定义页面:支持设置404、403、503、504等页面

  4. 页面优化:去除HTML页面页面冗余内容如注释以及重复的空白符

  5. 智能压缩:对静态文件类型进行压缩, 有效减少用户传输内容大小

  6. 访问控制:Refer防盗链、IP 黑/白名单等

  7. HTTPS 支持

  8. 统计分析、日志管理

  9. 人工智能服务:识图、鉴黄等

脑回路时间

依靠第以上几点,能实现哪些应用?


三、实例说明


3.1 静态资源加速

这个大家都懂,就不细说


3.2 后端加速(缓存)—— 自定义缓存时间

  • http://cdn.flccent.com/

含 CDN 但未命中:

<?php
echo 'Hello World!!!!!~';

设置 10s 的 CDN 缓存:

<?php
header('expires: '.date('D, d M Y H:i:s e', time() + 10));
echo 'Hello World!!!!!~';

以上例子为阿里云 CDN,具体设置缓存过期时间,请参照 CDN 服务商文档进行设置。

对于动态文件(eg:php | jsp | asp),建议设置缓存时间为 0s,即不缓存;若动态文件例如 php 文件内容更新频率较低,推荐设置较短缓存时间

—— 摘自《阿里云说明文档》

参考文档:

  • 服务器端设置过期时间:https://help.aliyun.com/knowledge_detail/40080.html?spm=a2c4g.11186623.2.12.33ad45e56FKahB

四、边缘计算


4.1 什么是边缘计算

图片来源 AWS

边缘计算是指在靠近物或数据源头的一侧,采用网络、计算、存储、应用核心能力为一体的开放平台,就近提供最近端服务。其应用程序在边缘侧发起,产生更快的网络服务响应,满足行业在实时业务、应用智能、安全与隐私保护等方面的基本需求。边缘计算处于物理实体和工业连接之间,或处于物理实体的顶端。而云端计算,仍然可以访问边缘计算的历史数据。


4.2 实例说明:图片 WEBP 原理

关键词

  • Request Headers: Accept:image/webp

  • 函数计算(阿里云)、Lambda(AWS)等

  • 内容存储:OSS(阿里云),S3(AWS)等 —— 可选

大致原理

  • 开启 CDN Header - Accept 回源

  • 获取 Request Headers 中 Accept 中包含 image/webp(即为支持webp)

  • 通过边缘计算方式,通过源站获取对应素材转换为 webp 格式,并存储至对应 CDN 节点

  • 用户通过 CDN 输出对应格式

图片大多数源站均为 OSS、S3 等内容存储服务,而非具体服务器

服务说明

  • HTTP Headers Accept

    Accept 请求头用来告知客户端可以处理的内容类型,这种内容类型用 MIME 类型来表示。借助内容协商机制, 服务器可以从诸多备选项中选择一项进行应用,并使用 Content-Type 应答头通知客户端它的选择。浏览器会基于请求的上下文来为这个请求头设置合适的值,比如获取一个CSS层叠样式表时值与获取图片、视频或脚本文件时的值是不同的。

  • Lambda

    通过 AWS Lambda,无需预置或管理服务器即可运行代码。您只需按使用的计算时间付费 – 代码未运行时不产生费用。

    借助 Lambda,您几乎可以为任何类型的应用程序或后端服务运行代码,而且完全无需管理。只需上传您的代码,Lambda 会处理运行和扩展高可用性代码所需的一切工作。您可以将您的代码设置为自动从其他 AWS 产品触发,或者直接从任何 Web 或移动应用程序调用。

    支持语言:Node.js/Python/Java/Go/C#/PowerShell/Ruby


五、相关文档

  • 名词解释:https://help.aliyun.com/document_detail/27102.html?spm=a2c4g.11186623.6.547.49af777dDujQhC

  • HTTP / 1.1头字段的语法和语义:https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html

via:https://docs.flc.io/devops/cdn/

原创系列推荐



4. 
5. 
6. 
7. 
点这,与大家一起分享本文吧

【Web技术】353- CDN 科普的更多相关文章

  1. 深入分析Java Web技术内幕(修订版)

    阿里巴巴集团技术丛书 深入分析Java Web技术内幕(修订版)(阿里巴巴集团技术丛书.技术大牛范禹.玉伯.毕玄联合力荐!大型互联网公司开发应用实践!) 许令波 著   ISBN 978-7-121- ...

  2. 深入分析Java Web技术(1)

    BS网络模型的基本过程: 当我们在浏览器中输入"www.google.com"的时候,首先会请求DNS服务器对域名进行解析成都应的IP地址,然后根据这个IP地址在互联网上找到谷歌的 ...

  3. 负载均衡技术在CDN中发挥着重要作用

    转载地址:http://www.qicaispace.com/gonggao/server/page01/info07.asp CDN是一个经策略性部署的整体系统,能够帮助用户解决分布式存储.负载均衡 ...

  4. HTML5 Dashboard – 那些让你激动的 Web 技术

    HTML5 Dashboard 是一个 Mozilla 推出的项目,里面展示了最前沿的 HTML5,CSS3,JavaScript 技术.每一项技术都有简洁,在线演示以及详细的文档链接.这些技术将成为 ...

  5. HTML5 模拟现实物理效果,感受 Web 技术魅力

    Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动.玩法介绍:可以随意拖动圆球.点击页面背景.晃动浏览器.双击页面背景或者按住鼠标左键,有不 ...

  6. Soundslice – 美妙乐谱!Web 技术高大上的应用

    Web 技术的不断发展让我们能够开发各种好玩的功能.这里给大家分享一个使用 HTML5 技术实现的在线乐谱,可以播放的哦,也可以选择一个片段进行循环播放.赶紧来体验一下:) 您可能感兴趣的相关文章 1 ...

  7. Java Web技术总结(目录)

    来源于:http://www.jianshu.com/p/539bdb7d6cfa Java Web技术经验总结(一) Java Web技术经验总结(二) Java Web技术经验总结(三) Java ...

  8. JavaScript的角色巨变和Web技术的发展

    曾经JavaScript是职业程序员看不上眼的脚本语言,如今只有高级程序员才能驾驭它. JavaScript性质和地位的天翻地覆,正是Web技术飞速变化的印证. 最初职业程序员轻视JavaScript ...

  9. 用web技术开发出原生的App应用的体会(1)

    本人是是个前端小白,学前端已经有半年的时间了,前几天开了个博客,希望记录自己学习历程的点滴. 今天要写的是关于用html,css,javascript等web技术开发原生的app应用. 总所周知,we ...

随机推荐

  1. 学习Java第一步:安装Intellij IDEA和JDK

    注:其实真正学习一门新语言的第一步并不是安装开发工具,我是C#转JAVA,有一点编程经验了,所以可以直接跳过前面几步,直接上IDE. 1.下载IntelliJ IDEA [官网] http://www ...

  2. 【SSM Spring 线程池 OJ】 使用Spring线程池ThreadPoolTaskExecutor

    最近做的Online Judge项目,在本地判题的实现过程中,遇到了一些问题,包括多线程,http通信等等.现在完整记录如下: OJ有一个业务是: 用户在前端敲好代码,按下提交按钮发送一个判题请求给后 ...

  3. vim查询替换

    查询: 在民令模式输入/或者? n/N 替换:

  4. bert+seq2seq 周公解梦,看AI如何解析你的梦境?【转】

    介绍 在参与的项目和产品中,涉及到模型和算法的需求,主要以自然语言处理(NLP)和知识图谱(KG)为主.NLP涉及面太广,而聚焦在具体场景下,想要生产落地的还需要花很多功夫. 作为NLP的主要方向,情 ...

  5. linux bash编程之算数运算和测试类型(第二篇)

    写在最前边:在bash中数据类型有两种,分别是数值型和字符型.其中字符型是默认的. 1.算数运算 · 运算符 · 语法 1.1.运算符:+.-.*./.%.** 注意:有些时候 *(乘号)需要转义 1 ...

  6. 老男孩 python 自学 打印05 dict 复习总结

    dict 语法       {key : value} key 必须是可hash的 可哈希的目前有int . str . tuple .bool value 是没有任何限制的 2. 字典的相关操作 增 ...

  7. Java基础IO类之缓冲流

    首先要明确一个概念: 对文件或其他目标频繁的读写操作,效率低,性能差. 使用缓冲流的好处是:能够高效的读写信息,原理是先将数据先缓冲起来,然后一起写入或者读取出来. 对于字节: BufferedInp ...

  8. 小白学 Python 爬虫(9):爬虫基础

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  9. Vue实现mp3音乐播放及动态进度条

    今天碰到一个Vue点击mp3播放及进度条动态走动的小功能,记录一下: 首先是通过HTML5 audio标签引入音频: <template> <div class="x-fo ...

  10. 【游记】CSP J/S 2019 游记

    J 组 \(2:30\)开始, \(2:13\)还在酒店的我看了看手表...飞奔考场. T1 数字游戏 秒切. 下午某中学某大佬说可用线性基(%) T2 公交换乘 用单调队列思想,秒切. T3 纪念品 ...