CDN的缓存与回源机制解析

前端性能优化 专栏收录该内容
15 篇文章 0 订阅

CDN(Content Delivery Network, 内容分发网络)指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本, 因此服务器可以根据哪些服务器与用户距离更近, 来满足数据的请求。 CDN提供快速服务, 较少受高流量影响。

为什么要用CDN

缓存、本地存储带来的性能提升,是不是只能在“获取到资源并把它们存起来”这件事情发生之后?也就是说,首次请求资源的时候,这些招数都是救不了我们的。要提升首次请求的响应能力,我们还需要借助 CDN 的能力。

CDN如何工作

借中国地图来举个简单的例子:

假设我的根服务器在杭州, 同时在图示的五个城市里都有自己可用的机房。

此时有一位北京的用户向我请求资源。在网络带宽小 用户访问量大的情况下, 杭州的这一台服务器或许不那么给力, 不能给用户非常宽的响应速度。于是我灵机一动, 把这批资源copy了一批放在北京的机房里。当用户请求资源时, 就近请求北京的服务器, 北京这台服务器低头一看, 这个资源我存了, 离得那么近, 响应速度肯定噌噌噌的! 那如果北京这台服务器没有copy这批资源呢?他会再向杭州的根服务器再去要这个资源。在这个过程中, 北京这台服务器就扮演着CDN的角色。

CDN的核心功能特写

CDN的核心点有两个, 一个是缓存, 一个是回源。

这两个概念非常好理解。对标到上面描述的过程, 缓存就是说我们把该资源copy一份到CDN服务器上的这个过程, 回源就是说CDN发现自己没有这个资源(一般是缓存的数据过期了), 转头像根服务器,或者他的上层服务器去要这个资源。

CDN与前端性能优化

CDN往往被认为是前端不需要了解的东西。

具体来说, 很多人对其的了解止步于:部署界面上有个部署到CDN按钮 点一下资源就在CDN上了

眼下业务开发用不到的可以暂缓了解, 这是没毛病的。 但前端工程师首先是软件工程师。 对整个技术架构的理解, 将会反哺我们对某一具体环节的理解;知识点的适当拓展, 也会对大家技术高度和技术广度的提升大有裨益。

那么, 我们了解下CDN是怎么帮助前端的。

CDN往往被用来存放静态资源。上文中我们距离所提到的根服务器本质是业务服务器,他的核心任务在于生成动态页面或返回非纯静态页面,这两种过程都是需要计算的。业务服务器仿佛一个车间, 车间里运转的机器轰鸣着我们产出所需的资源 相比之下,CDN服务器则像一个仓库, 他只充当资源的栖息地和搬运工。

所谓静态资源就像JS CSS 图片等不需要业务服务器进行计算得到的资源。而动态资源, 顾名思义就是i需要后端实时动态生成的资源, 较为常见的就是JSP ASP 或者依赖服务端渲染得到的HTML页面。

什么是非纯静态资源? 它是指需要服务器在页面之外做额外计算的HTML页面。具体来说,当我们打开某一网站之前, 该网站需要通过权限认证等一些列手段确认我的身份 进而决定是否要把HTML页面呈现给我。 这种情况下HTML确实是静态的, 但他和业务服务器的操作耦合,我们把它丢到CDN上显然是不合适的。

CDN的实际应用

静态资源本身具有访问频率高, 承接流量大的特点, 因此静态资源加载速度始终是前端性能的一个非常关键的指标。CDN是静态资源提速的重要手段,在许多一线的互联网公司, 静态资源走CDN并不是一个建议 而是一个规定。

比如以淘宝为代表的阿里系产品, 就遵循着这个规定。

打开淘宝受首页, 我们可以在network面板中看到, 非纯净态的html页面, 是向业务服务器请求来的:

 

我们点击preview可以看到业务服务器确实返回了给我们一个尚未被静态资源加持过的简单HTML页面, 所有的图片内容都是先以一个div占位:

相应的, 我们宿便点开一个静态资源, 可以看到他都是从CDN服务器上请求来的

比如说图片

再比如JS, CSS

CDN优化细节

如何让CDN的效用最大化? 这又是需要前后端程序员一起思考的庞大命题。 它涉及到CDN服务器本身的性能优化 CDN节点的地址选取等。 

CDN的域名选取

先看一下刚刚选取的淘宝首页的例子, 我们注意到业务服务器的域名是这个:

www.taobao.com

而CDN服务器的域名是这个:

g.alicdn.com

没错 我们不一样

再看另一方面, 我们讲到cookie的时候, 为了凸显Local Storage的优越性, 曾经提到过:

Cookie是紧跟域名的。 同一个域名下的所有请求, 都会携带Cookie。 大家试想, 如果我们此刻仅仅是请求一张图片或者一个CSS文件, 我们也要携带一个Cookie跑来跑去(关键是Cookie里存储的信息我现在并不需要),这是一件多么老命伤财的事情。Cookie虽然小, 请求却可以有很多, 随着请求的叠加, 这样不必要的Cookie带来的开销僵尸无法想象的

同一个域名下的请求会不分青红皂白的携带Cookie, 而静态资源往往并不需要Cookie携带什么认证信息。把静态资源和主页面置于不同的域名下, 完美的避免了不必要的cookie的出现

看起来是一个不起眼的小细节, 但带来的效用却是惊人的。 以电商网站静态资源的流量之庞大, 如果没把这个多余的cookie拿下来, 不仅用户体验会大打折扣, 每年因性能浪费带来的经济开销也将是一个非常恐怖的数字。

  • 1
    点赞
  • 0
    评论
  • 9
    收藏
  • 扫一扫,分享海报

<p style="margin: 0cm; background: white;"><span style="font-size: 10.5pt; font-family: '微软雅黑',sans-serif; mso-bidi-font-family: Arial; color: black; mso-themecolor: text1;">本课程使用<span lang="EN-US">YOLOv5</span>和<span lang="EN-US">DeepSORT</span>对视频中的行人、车辆做多目标跟踪和计数,开展<span lang="EN-US">YOLOv5</span>目标检测和<span lang="EN-US">DeepSORT</span>多目标跟踪强强联手的应用。</span></p> <p style="margin: 0cm; background: white;"><span lang="EN-US" style="font-size: 10.5pt; font-family: '微软雅黑',sans-serif; mso-bidi-font-family: Arial; color: black; mso-themecolor: text1;"> </span><span style="font-size: 10.5pt; font-family: '微软雅黑',sans-serif; mso-bidi-font-family: Arial; color: black; mso-themecolor: text1;">课程分别在</span><span lang="EN-US"><span style="box-sizing: border-box;">Windows</span>和</span><span lang="EN-US" style="font-family: '微软雅黑',sans-serif; mso-bidi-font-family: Arial; color: black; mso-color-alt: windowtext;">Ubuntu</span><span style="font-size: 10.5pt; font-family: '微软雅黑',sans-serif; mso-bidi-font-family: Arial; color: black; mso-themecolor: text1;">系统上做项目演示,并对<span lang="EN-US">DeepSORT</span>原理和代码做详细解读(使用<span lang="EN-US">PyCharm</span>单步调试讲解)。</span></p> <p style="margin: 0cm; background: white;"><span lang="EN-US" style="font-size: 10.5pt; font-family: 'Arial',sans-serif; color: black; mso-themecolor: text1;"> </span></p> <p style="margin: 0cm; background: white; box-sizing: border-box; font-variant-ligatures: normal; font-variant-caps: normal; orphans: 2; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; word-spacing: 0px;"><span style="box-sizing: border-box;"><span style="font-size: 10.5pt; font-family: '微软雅黑',sans-serif; mso-bidi-font-family: Arial; color: black; mso-themecolor: text1;">课程包括:<span style="font-size: 10.5pt; font-family: '微软雅黑',sans-serif; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; color: black; mso-themecolor: text1;">基础篇、实践篇、原理篇和代码解析篇。</span></span></span></p> <p style="text-indent: -21.0pt; mso-list: l0 level1 lfo1; background: white; margin: 0cm 0cm 0cm 21.0pt;"><!-- [if !supportLists]--><span lang="EN-US" style="font-size: 14.0pt; mso-bidi-font-size: 10.5pt; font-family: Wingdings; mso-fareast-font-family: Wingdings; mso-bidi-font-family: Wingdings; color: black; mso-themecolor: text1;"><span style="mso-list: Ignore;">Ÿ<span style="font: 7.0pt 'Times New Roman';">  </span></span></span><!--[endif]--><span style="font-size: 10.5pt; font-family: '微软雅黑',sans-serif; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; color: black; mso-themecolor: text1;">基础篇包括多目标跟踪任务介绍、数据集和评估指标;</span></p> <p style="text-indent: -21.0pt; mso-list: l0 level1 lfo1; background: white; margin: 0cm 0cm 0cm 21.0pt;"><!-- [if !supportLists]--><span lang="EN-US" style="font-size: 14.0pt; mso-bidi-font-size: 10.5pt; font-family: Wingdings; mso-fareast-font-family: Wingdings; mso-bidi-font-family: Wingdings; color: black; mso-themecolor: text1;"><span style="mso-list: Ignore;">Ÿ<span style="font: 7.0pt 'Times New Roman';">  </span></span></span><!--[endif]--><span style="font-size: 10.5pt; font-family: '微软雅黑',sans-serif; mso-ascii-font-family: Arial; mso-hansi-font-family: Arial; mso-bidi-font-family: Arial; color: black; mso-themecolor: text1;">实践篇包括</span><span lang="EN-US" style="font-size: 10.5pt; font-family: '微软雅黑',sans-serif; mso-bidi-font-family: Arial; color: black; mso-themecolor: text1;">Win10</span><span style="font-size: 10.5pt; font-family: '微软雅黑',sans-serif; mso-bidi-font-family: Arial; color: black; mso-themecolor: text1;">和<span lang="EN-US">Ubuntu</span>系统上的<span lang="EN-US">YOLOv5+DeepSORT</span>的多目标跟踪和计数具体的实践操作步骤演示,特别是对行人、车辆的<span lang="EN-US">ReID</span>数据集讲解了训练方法;</span></p> <p style="text-indent: -21.0pt; mso-list: l0 level1 lfo1; background: white; margin: 0cm 0cm 0cm 21.0pt;"><!-- [if !supportLists]--><span lang="EN-US" style="font-size: 14.0pt; mso-bidi-font-size: 10.5pt; font-family: Wingdings; mso-fareast-font-family: Wingdings; mso-bidi-font-family: Wingdings; color: black; mso-themecolor: text1;"><span style="mso-list: Ignore;">Ÿ<span style="font: 7.0pt 'Times New Roman';">  </span></span></span><!--[endif]--><span style="font-size: 10.5pt; font-family: '微软雅黑',sans-serif; mso-bidi-font-family: Arial; color: black; mso-themecolor: text1;">原理篇中讲解了马氏距离、匈牙利算法、卡尔曼滤波器的原理,并解读了<span lang="EN-US">SORT</span>和<span lang="EN-US">DeepSORT</span>论文;</span></p> <p style="text-indent: -21.0pt; mso-list: l0 level1 lfo1; background: white; margin: 0cm 0cm 0cm 21.0pt;"><!-- [if !supportLists]--><span lang="EN-US" style="font-size: 14.0pt; mso-bidi-font-size: 12.0pt; font-family: Wingdings; mso-fareast-font-family: Wingdings; mso-bidi-font-family: Wingdings; color: black; mso-themecolor: text1;"><span style="mso-list: Ignore;">Ÿ<span style="font: 7.0pt 'Times New Roman';">  </span></span></span><!--[endif]--><span style="font-size: 10.5pt; font-family: '微软雅黑',sans-serif; mso-bidi-font-family: Arial; color: black; mso-themecolor: text1;">代码解析篇中使用<span lang="EN-US">PyCharm</span>单步调试对<span lang="EN-US">DeepSORT</span>的代码逐个文件进行讲解。课程提供注释后的代码。</span></p> <p style="text-indent: -21.0pt; mso-list: l0 level1 lfo1; background: white; margin: 0cm 0cm 0cm 21.0pt;"><span style="font-size: 10.5pt; font-family: '微软雅黑',sans-serif; mso-bidi-font-family: Arial; color: black; mso-themecolor: text1;"><img src="https://img-bss.csdnimg.cn/202105101512471836.jpg" alt="课程内容" /></span></p> <p><img src="https://img-bss.csdnimg.cn/202105101513384587.jpg" alt="行人多目标跟踪" /></p> <p><img src="https://img-bss.csdnimg.cn/202105101514053124.jpg" alt="车辆计数" /></p>
密码:看注释 解压密码146359085 《excel服务器2017程序v3.9》使用说明: 1、本程序支持《excel服务器2017、excel服务器2016、excel服务器2015、excel服务器2013、excel服务器2010》等最新版本版本,不支持excel服务器2019。 2、MSSQL请不要使用空密码,否则注册程序可能失效。 2、本程序没有注册的话,为试用版,用户数最大为10用户,注册后没有限制。 3、安装和装卸本程序时请先停止excel服务器2017的服务。 4、使用本程序时请先删除本软件以前的旧版本补丁。 5、如果下载完整版的升级程序升级,前请先装卸本软件,更新升级后再使用用本软件安装解密。 6、本程序正式版分为标准版及加强版两个版本,标准版只能在你注册的电脑上生效,加强版可以通过下面的操作为其他的excel服务器授权。 7、本程序及其相关内容信息只作为学习、测试使用,严禁用于其它用途!!!、 由于使用本程序而产生的任何后果,请您自已负责!  当您使用了本程序及其相关内容信息后,都将视为接受本警告并自愿承担所有责任!!! 3.9更新说明: 1、修改软件的解密方法,避免后期官方对本软件的检测。 2、修复已知BUG。 3、修复硬件码会变动失效的Bug。 4、新增加对聚表2.6.7的支持。 3.8更新说明: 1、支持《excel服务器2017》。 其他说明: 《excel服务器2016注册程序v3.9加强版》可以用下面步骤为其他服务器授权: 1、在其他安装excel服务器的电脑上运行本软件及安装,并记下硬件码; 2、到安装有正式注册版的那台电脑上运行本软件,把步骤1得到的硬件码填入软件界面上的硬件码位置,设置好选项,然后安装; 3、安装后,打开勤哲安装目录,在目录下找到ESWint12.ini这个文件,把他复制出来。 4、到步骤1的那台电脑上,把ESWint12.ini覆盖到勤哲的安装目录下,停止excel服务器的服务并从新启动,如果以上步骤没有错误,那这时这台电脑上的excel服务器就是正式注册了。 5、注册时两台电脑要安装同一版本的excel服务器。 《聚表企业版2.6.7》的使用方法: 1、找作者开通聚表权限。 2、在《nxcells服务器配置》复制出机器码,把机器码填入本软件《硬件码》中,版本选择《聚表企业版2.6.7》按安装即可生成授权。 3、把server.nks复制到聚表企业版2.6.7的server目录下,从新启动服务即可。
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值