前端工程之CDN部署_前端为什么非要动静分离?说一下CDN托管的意义

更新日期: 2018-05-25阅读: 3.3k标签: CDN

大型Web应用对速度的追求并没有止步于仅仅利用浏览器缓存,因为浏览器缓存始终只是为了提升二次访问的速度,对于首次访问的加速,我们需要从网络层面进行优化,最常见的手段就是CDN(Content Delivery Network,内容分发网络)加速。通过将静态资源缓存到离用户很近的相同网络运营商的CDN节点上,不但能提升用户的访问速度,还能节省服务器的带宽消耗,降低负载。


遍布全国的CDN节点和内容源示意图

不同地区的用户会访问到离自己最近的相同网络线路上的CDN节点,当请求达到CDN节点后,节点会判断自己的内容缓存是否有效,如果有效,则立即响应缓存内容给用户,从而加快响应速度。如果CDN节点的缓存失效,它会根据服务配置去我们的内容源服务器获取最新的资源响应给用户,并将内容缓存下来以便响应给后续访问的用户。因此,一个地区内只要有一个用户先加载资源,在CDN中建立了缓存,该地区的其他后续用户都能因此而受益。


使用CDN缓存技术加速网络访问速度

如上图所示,之所以不同地区的用户访问同一个域名却能得到不同CDN节点的IP地址,这要依赖于CDN服务商提供的智能域名解析服务,浏览器发起域名查询时,这种智能DNS服务会根据用户IP计算并返回离它最近的同网络CDN节点IP,引导浏览器与此节点建立连接以获取资源。

结合上述两点,为了使用CDN网络缓存,我们至少要对静态资源的部署做两项改变:

1.将静态资源部署到不同网络线路的服务器中,以加速对应网络中CDN节点无缓存时溯源的速度。

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

CDN服务基本上已经成为现代大型Web应用的标配,这项技术“几乎”是一种对开发透明的网络性能优化手段,使用它的理由很充分,但是这里既然强调了“几乎透明”而不是“完全透明”,是因为使用CDN服务所需要的两项改变对前端工程产生了一定的影响,而这些影响我在之前的文章中已经介绍了,就是前端工程必须引入非覆盖式发布的根本原因。


前端工程多米诺骨牌

上图向大家展示了整个前端静态资源缓存技术所带来的连锁性工程问题。很多人不理解为什么要选择FIS,而不是grunt,从本质上来说,工具并么有什么差异,只是fis的设计出发点是以上这些工程问题,设计中优先考虑了现代互联网应用是如何进行工程化部署与开发的,面临的问题是哪些,基于这些问题,要怎么解决。

比如我们在上图中可以看到,整个静态资源缓存技术的最终影响的节点是前端静态资源定位问题,而且前端资源定位又会进一步影响到开发,包括代码中的模块化加载、各种资源加载等。所以fis的设计核心之一就是资源定位。比如fis的核心配置roadmap,其目的就是为了解决在前端代码中的所有资源定位问题,连接开发和部署规范:


此外,fis的静态资源表生成功能也是为了给模块化框架提供加载部署到其他域名下的路径中md5戳的资源部署路径,并建立资源之间的依赖关系。

至于文件压缩之类的功能,那只是工具问题,而非工程问题。


原文地址:https://div.io/topic/930  

链接: https://www.fly63.com/article/detial/818

各个版本的jquery引用地址总结,jquery cdn公共库地址总汇

jquery作为前端常使用的插件之一,一般我们不使用下载到本地引用,直接通过CDN 公共库来加载,这篇文章就总结各个版本的jquery引用地址。

CDN与DNS知识汇总_CDN/DNS是什么?有什么好处?

在性能优化的时候,比较常见的一个建议是,把资源部署在CDN上,那么问题来了,CDN是什么?这样做有什么好处?讲完DNS,现在可以开始讲CDN了,CDN的全称是Content Delivery Network,即内容分发网络

vue.js的cdn引用地址有哪些?

vue 是一套用于构建用户界面的渐进式框架。我们使用采用cdn的方式来引入vue,可以缓解我们服务器的压力,原理是将我们的压力分给其他服务器点。

什么是CDN缓存?CDN的入门了解

CDN即内容分发网络,是指一种通过互联网互相连接的电脑网络系统,利用最靠近每位用户的服务器,更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户,来提供高性能、可扩展性及低成本的网络内容传递给用户。

CDN的使用场景和操作细节

随着互联网的发展,各种网络应用也雨后春笋般的发展,应用越做越大,访问路径越来越长,用户的访问质量受到严重的影响,特别是用户和网站之间的链路被突发的大流量数据拥堵、异地访问急需加速,减少网络费用等因素

Vue项目构建持续集成阿里云CDN

CDN加速是Web应用性能优化和用户体验提升的至关重要的一环,当一个项目构建部署时,就需要考虑到如何高效的去完成相关资源的CDN部署。以一个基于 vue-cli3 构建的项目实例,来简单讲解如何配合Teamcity

网站防护选用高防CDN的优点

网站防护选用高防CDN有下列好多个优点:合理防御力DDoS、CC进攻,ms级時间没有响应,智能导航相对路径派发,高品质髙速互联网配搭SSD储存更顺畅。私有高防连接点

CDN(Content Delivery Network)原理

分发服务系统,其基本的工作单元就是各个cache服务器。负责直接响应用户请求,将内容快速分发到用户;同时还负责内容更新,保证和源站内容同步。根据内容类型和服务种类的不同

前端CDN库总汇

CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定

提高网页响应速度:优化你的 CDN 性能

CDN 服务本身并不具备域名解析功能,而是依托于 DNS 智能解析功能,由 DNS 根据用户所在地、所用线路进行智能分配最合适的 CDN 服务节点,然后把缓存在该服务节点的静态缓存内容返回给用户。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!