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

一、概述


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. nyoj 34-韩信点兵(暴力)

    34-韩信点兵 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:34 submit:41 题目描述: 相传韩信才智过人,从不直接清点自己军队的人数,只 ...

  2. 多线程编程(3)——synchronized原理以及使用

    一.对象头 通常在java中一个对象主要包含三部分: 对象头 主要包含GC的状态..类型.类的模板信息(地址).synchronization状态等,在后面介绍. 实例数据:程序代码中定义的各种类型的 ...

  3. jdbc-mysql测试例子和源码详解

    目录 简介 什么是JDBC 几个重要的类 使用中的注意事项 使用例子 需求 工程环境 主要步骤 创建表 创建项目 引入依赖 编写jdbc.prperties 获得Connection对象 使用Conn ...

  4. cglib测试例子和源码详解

    目录 简介 为什么会有动态代理? 常见的动态代理有哪些? 什么是cglib 使用例子 需求 工程环境 主要步骤 创建项目 引入依赖 编写被代理类 编写MethodInterceptor接口实现类 编写 ...

  5. PostGIS 爆管分析之根据爆点找出所有影响阀门

    环境: Win10 ArcMap10.4(用于数据处理) postgresql9.4 postgis2.2.3 pgRouting2.3(postgresql插件) 说明: 做爆管分析的第一步,需要先 ...

  6. Scala学习系列一

    一 scala介绍 Scala是一门以java虚拟机(JVM)为目标运行环境并将面向对象和函数式编程的最佳特性结合在一起的静态类型编程语言. 1)  Scala 是一门多范式 (multi-parad ...

  7. 一个HTML5培训班毕业生的找工作随笔

    昨天刚参加完一个面试,通过了.写个随笔记录一下. 先介绍一下背景. 我是今年十月份的时候从某个培训机构的HTML5 Web前端培训班毕业的,是一个刚进入IT行业的新人. 本人毕业于某三流学校,在参加培 ...

  8. 题解-洛谷P2010-回文日期

    原题链接: https://www.luogu.org/problem/P2010 题目简述: 牛牛习惯用8位数字表示一个日期,其中,前4位代表年份,接下来2位代表月份,最后22位代表日期.显然:一个 ...

  9. 【记录】洛谷P1739-表达式括号匹配AC记

    题面请查看:https://www.luogu.org/problem/P1739 思路: 见到括号就搜索,搜到与它配对的括号为止,搜不到就输出NO 代码: #include <bits/std ...

  10. sublimetext使用教程

    图片来自网络,仅供参考 前言 随着我们编写的代码越来越复杂,DevC++以不再能满足我们的需求,所以,我们需要 一个能够进行调试,编译,运行等等功能的现代化ide,sublimetext(以下简称ST ...