CDN 相关

为了提高网页应用的加载速度,我们会使用到浏览器缓存,然而浏览器缓存只能提升二次访问的速度。对于加速首次访问的速度,我们最常见的手段则是使用 CDN 加速。

CDN 的全称是 Content Delivery Network,即内容分发网络。通过将静态资源缓存到离用户很近的相同网络运营商的 CDN 节点上,使用户可以就近取得所需的内容,解决网络拥塞状况,提高用户访问网站的响应速度。

事实上,在一些较大型的公司来说,通常是由公司的运维开发人员来负责部署 CDN 服务的,前端人员只需要了解使用 CDN 服务的大致流程即可。

1 选择 CDN 供应商

事实上,现在还有许多的 CDN 服务厂家,我们需要根据需求的情况去选择相应的厂商。现阶段 CDN 云服务商的竞争已经由 技术 逐渐取代价格成为 CDN 厂商在客户谈判时最关键因素,技术更高的 CDN 服务能够降低带宽成本、提升用户体验。

如今 CDN 各大厂商都会提供十分详尽的接入文档,使我们接入的开发成本变得更低。这里列举国内比较出名的 CDN 厂商:

2 连接 CDN 服务

通常购买了 CDN 服务后,该 CDN 服务会提供相应的接口让我们去上传和部署我们的资源。这部分的工作通常是由我们运维人员去负责的,对于一些小公司可能则需要前端或者后台人员去负责连接 CDN 服务,使业务能够部署静态资源到相应的服务器上。

3 前端工程静态资源部署

使用 CDN 服务,对前端工程产生了一定的影响,我们需要对静态资源的部署做两项改变:

3.1 将静态资源部署到不同网络线路的服务器中

由于用户的网络线路有很多种,如网通、电信、移动等,为了让不同地区的用户会访问到离自己最近的相同网络线路上的 CDN 节点。因此我们需要将我们的资源部署到不同的网络线路的服务器中,然后通过这些服务器同步到不同线路的 CDN 节点上。

3.2 加载静态资源时需使用与页面不同的域名

使用不同的域名来加载 CDN 服务的静态资源,一方面便于接入为 CDN 时设置 DNS 的智能解析。另一方面当静态资源和主页面使用不同的域名,在加载静态资源时 HTTP 请求并不会带上主域页面的 Cookie 等数据,较少了请求时的数据传输量,进一步加快网络访问。

3.3 资源路径的修正

通常情况下,我们的资源都是在本地,比如有个 JS 文件,我们在 HTML 里面按照相对目录引用它:

<script src="js/script.js"></script>

使用了 CDN 的话,资源都部署到了 CDN 服务器上去咯,这个时候我们必须用绝对路径来引用:

<script src="http://xxx.xxx.xxx/js/script.js"></script>

所有啊,必须有个修正资源路径的过程,而这个过程当然不能手动,通常都是在工程化里面解决这个问题。

总结

如今 CDN 服务基本上已经成为现代大型网页应用的标配。这项技术是一种十分常用的网络性能优化手段。在未来的前端开发中,我们会经常与 CDN 打交道。因此如果能够清楚了解了 CDN 服务的相关原理和概念,将会让我们在将来的开发中能够更加得心应手。

更多阅读

时间: 2024-11-07 15:30:43

CDN 相关的相关文章

http缓存与cdn相关技术

摘要:最近要做这个主题的组内分享,所以准备了一个星期,查了比较多的资料.准备的过程虽然很烦很耗时间,不过因为需要查很多的资料,因此整个过程下来,对这方面的知识影响更加深刻.来来来,接下来总结总结 一 http缓存 1.1缓存的分类: http中具有缓存功能的是:1.浏览器缓存.  2.缓存代理服务器. 1.2 什么是缓存: http缓存的是指:当Web请求抵达缓存时, 如果本地有“已缓存的”副本,就可以从本地存储设备而 不是从原始服务器中提取这个文档. 1.3 缓存的好处有: 1. 减少了冗余的

cdn与http缓存

http缓存与cdn相关技术 摘要:最近要做这个主题的组内分享,所以准备了一个星期,查了比较多的资料.准备的过程虽然很烦很耗时间,不过因为需要查很多的资料,因此整个过程下来,对这方面的知识影响更加深刻.来来来,接下来总结总结 一 http缓存 1.1缓存的分类: http中具有缓存功能的是:1.浏览器缓存.  2.缓存代理服务器. 1.2 什么是缓存: http缓存的是指:当Web请求抵达缓存时, 如果本地有“已缓存的”副本,就可以从本地存储设备而 不是从原始服务器中提取这个文档. 1.3 缓存

跟阿里云技术专家阙寒一起深度了解视频直播CDN技术

网络直播平台现下已经十分火热,很多常见的直播平台都采用了阿里云直播CDN来搭建自身业务.今天,我们请来了阿里云CDN团队技术专家阙寒,来介绍下视频的一些基础知识和视频直播的架构. 在进入正题之前,我们先来了解视频直播相关的名词含义是什么?扫个盲 通常我们所说的视频,是指连续的图象变化每秒超过24帧(Frame)画面以上时,根据视觉暂留原理,人眼无法辨别单幅的静态画面,看上去是平滑连续的视觉效果,这样连续的画面叫做视频. 而媒体转码是指将一段多媒体包括音频.视频或者其他的内容从一种编码格式转换成为

1毛钱的CDN你家的站点会用吗?

在第七届中国云计算大会上,作为CDN领域最具重量级的受邀发言人.迅雷CTO.网心科技CEO陈磊在发表重要演讲时,宣布迅雷将推出国内首家无限节点CDN.而这一款CDN号称眼下国内最廉价的CDN,售价仅为0.1元/GB(流量计价)和9999元/G/月(带宽计价),眼下已经正式接受预定. 撇开价格来讲.最值得一提的便是迅雷DCN的无限节点布局.而这也是国内售价提出并实现无限节点的CDN服务商. 讲到这里,我们先来普及一下CDN相关知识以及国内的市场. 对于一些中小型站点.我们一般关注一下几点: 1,速

1毛钱的CDN你家的网站会用吗?

在第七届中国云计算大会上,作为CDN领域最具重量级的受邀发言人,迅雷CTO.网心科技CEO陈磊在发表重要演讲时,宣布迅雷将推出国内首家无限节点CDN.而这一款CDN号称目前国内最便宜的CDN,售价仅为0.1元/GB(流量计价)和9999元/G/月(带宽计价),目前已经正式接受预定. 撇开价格来讲,最值得一提的便是迅雷DCN的无限节点布局.而这也是国内售价提出并实现无限节点的CDN服务商. 说到这里,我们先来普及一下CDN相关知识以及国内的市场. 对于一些中小型网站,我们一般关注一下几点: 1,速

Swarmify完美整合WordPress打造免费网站加速CDN

Swarmify完备整合WordPress打造免费站点加快CDN Swarmify先前称号为Swarm CDN,是一家供给CDN服务的公司,针对影音及图片加快分红几种不同型态产品,就中有项专为WordPress站点加快的WordPress Acceleration免费计划,主如果让站点图片有加快及分流.缩减流量结果,在载入页面时能从更近节点来得到图片,如果你的站点自己流量不大,想尝尝可否放慢图片载入速率的话,可以参考本文讲授免费使用这项功能. Swarmify的WordPress Acceler

阿里云李刚:下一代低延时的直播CDN

摘要: 在上周落幕帷幕的多媒体领域技术盛会--LiveVideoStackCon音视频技术大会上,阿里云的高级技术专家李刚进行了<下一代低延时的直播CDN>技术分享.主讲人李刚,多年关注在CDN这个领域,早期主要研究和cache服务器缓存以及流媒体相关的技术, 专注CDN文件分发.图片与大文件下载等业务. 在上周落幕帷幕的多媒体领域技术盛会--LiveVideoStackCon音视频技术大会上,阿里云的高级技术专家李刚进行了<下一代低延时的直播CDN>技术分享.主讲人李刚,多年关注

深入浅出了解CDN

背景: 本文公众号来源:漫话编程 虎牙直播2000W+人在线观看,直播间还不卡,据了解,2018年1月,阿里云为虎牙提供了边缘节点服务(ENS).基于阿里云ENS,可以轻松地将业务模块放到边缘运行,在主播的推流时,实现就近节点进行转码和分发,同时支持了高并发实时弹幕的边缘分发.在获得网络低时延的同时,减少了对中心的压力,节省了30%以上的中心带宽成本,并且实现了边缘节点网络连接小于5毫秒延时,提升了主播上行质量,以及用户成功连接占比等数指标,有效提升了用户观看体验.ENS中最主要的技术就是CDN

服务器缓存--------------------

阿里云cdn相关: https://help.aliyun.com/knowledge_list/39466.html?spm=5176.product27537.3.5.FkWOrL https://help.aliyun.com/document_detail/27136.html?spm=5176.7747580.2.1.l8jhae https://help.aliyun.com/document_detail/27268.html https://help.aliyun.com/kno