文档章节

前端工程之CDN

健康的程序员
 健康的程序员
发布于 2017/07/15 09:21
字数 1267
阅读 10
收藏 0

之前发的一篇文章《变态的静态资源缓存与更新》中提到了静态资源和页面部署之间的时间间隙问题,这个问题会迫使前端静态资源发布必须采用非覆盖式。那篇文章中没有详细解释为什么会产生不可忍受的时间间隙,本文算是对它的补充。

之所以会产生部署时差,最主要的原因就是使用了CDN服务。

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

FgZxWG4HKrtz1XVoyQjBD73hxUmv

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

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

Fl-c2Sc0PpvSata5Ni4B-onvuk6c

使用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戳的资源部署路径,并建立资源之间的依赖关系。

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

本文转载自:http://div.io/topic/930

健康的程序员
粉丝 9
博文 178
码字总数 49191
作品 0
杭州
程序员
私信 提问
前端集成——如何把n个前端写的代码打包成一个网站?

前端集成——如何把n个前端写的代码打包成一个网站? 文章被以下专栏收录

欲三更
2018/11/15
0
0
前端技术工程化的一小点实践

相比于两年前,前端工程化已经成为业内的标杆了,一个成熟的技术团队,必然要去思考这样的一个问题。 webpack 构建 webpack在前端领域的使用率非常高,基本已经成为前端构建领域的标杆。 那么...

Yard
2017/06/05
0
0
前端构建工具-fis3使用入门

FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。 官网地址是:...

renfufei
2017/07/10
0
0
Notadd Beta3 发布,基于 Laravel 的下一代 PHP 开发框架

Notadd Beta3 已发布,更新内容如下: 新特性: 添加多域名支持 添加工作流支持 完整的前后端分离方案,支持单机单域名,单机多域名,CDN单域名,CDN多域名 异步文件处理中间件 添加模块/插件...

左华栋
2017/08/24
1K
7
大公司里怎样开发和部署前端代码?

这是一个非常有趣的 ,这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题,入行到现在一直在学习和实践中。 在我的印象中,facebook是这个领域的鼻祖,有兴趣、有梯子的同学...

卟想苌亣
2017/11/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7 新手阿里云服务器安装mongodb

简介 MongoDB 是一个基于分布式 文件存储的NoSQL数据库 由C++语言编写,运行稳定,性能高 旨在为 WEB 应用提供可扩展的高性能数据存储解决方案 MongoDB特点 模式自由 :可以把不同结构的文档存...

醉雨
30分钟前
3
0
sql注入漏洞,应屏蔽SQL注入攻击

注:SQL注入好比是前端URL传参数请求时参数以SQL 做为参数传入,如 select 1 from dual where 1=1 or 1=1 and 1=2;(类似这样的SQL语句) 防御方法 如果自己编写防注代码,一般是先定义一个函...

颜丽
30分钟前
3
0
装饰者模式

 代理模式与装饰者模式看起来很像,都实现基础对象实现的接口,在其自身对象中都保存着对被代理/被装饰者的对象引用。   先来看看装饰者模式的定义:动态的将责任附加到被装饰者对象上,用...

铁骨铮铮
34分钟前
2
0
我为什么飞行 10000 公里去西班牙参加 KubeCon?

2019 年 5 月 20 日至 23 日, 由 Cloud Native Computing Foundation (CNCF) 主办的云原生技术大会 KubeCon + CloudNativeCon EU(欧洲场)即将在热情洋溢的巴塞罗那盛装启幕。 作为云计算领...

zhaowei121
52分钟前
2
0
Node.getTextContent() not found 解决办法【不需要调整builder path下面包顺序】

新导入的工程,w3c的getTextContent找不到,response的setCharacterEncoding找不到,网上很多教程都是“调整工程builder path的lib包顺序把jre、tomcat调到上面即可”,但是进入项目的build...

嘿嘿嘿IT
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部