大型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

前端为什么非要动静分离 说一下CDN托管的意义相关推荐

  1. 动静分离和前后端分离

    一.前端和后端的概念(怎么区分是前端还是后端) 什么是前端? 这又可以分解成几个小问题. 1.JS是前端么? 2.只要用JS写的,都是前端么? 3.只要是前端工程师写的,都是前端么?4.大前端就是指的 ...

  2. 动静分离java html_简单了解动静分离和前后端分离

    一.前端和后端的概念(怎么区分是前端还是后端) 什么是前端? 这又可以分解成几个小问题. 1.JS是前端么? 2.只要用JS写的,都是前端么? 3.只要是前端工程师写的,都是前端么?4.大前端就是指的 ...

  3. LAMP+haproxy+varnish实现网站访问的动静分离及静态资源缓存

    原文  http://sohudrgon.blog.51cto.com/3088108/1601842 系统架构图: 主机规划列表: 全部的主机: CPU : Intel(R) Core(TM)i5- ...

  4. Nginx一网打尽:动静分离、压缩、缓存、黑白名单、跨域、高可用、性能优化......

    干货!文章有点长,建议先收藏 引言 一.性能怪兽-Nginx概念深入浅出 二.Nginx环境搭建 三.Nginx反向代理-负载均衡 四.Nginx动静分离 五.Nginx资源压缩 六.Nginx缓冲区 ...

  5. 动静分离java html_动静分离-前后端分离部署

    #静态态资源文件分离发布 遇到的问题 多节点web服务器部署期间,访问静态资源可能会出现404. 为什么? 如果java进程我们以jar打包的方式打包文件并启动.假设有N多个pod,客户端请求会随机访 ...

  6. Nginx一网打尽:动静分离、压缩、缓存等,想要的这都有

    引言 早期的业务都是基于单体节点部署,由于前期访问流量不大,因此单体结构也可满足需求,但随着业务增长,流量也越来越大,那么最终单台服务器受到的访问压力也会逐步增高.时间一长,单台服务器性能无法跟上业务 ...

  7. Nginx一把梭完:防盗链、动静分离、高可用、压缩、跨域、缓存等

    一.Nginx概念浅析 Nginx是一个轻量级的高性能HTTP反向代理服务器,同时它也是一个通用类型的代理服务器,支持绝大部分协议,如TCP.UDP.SMTP.HTTPS等. Nginx是基于多路复用 ...

  8. 从0开始,在Linux中配置Nginx反向代理、负载均衡、session共享、动静分离

    写这篇文章花费了我近一周的时间,参考网上许多优秀的博客文章,我不敢说写的很好,至少很全很详细.本文先介绍原理部分,然后再进行实战操作,我认为这样才会有更深的理解,不过这也导致了文章篇幅很长.但是,如果 ...

  9. Nginx之反向代理与负载均衡实现动静分离实战

    Nginx之反向代理与负载均衡实现动静分离实战 什么是反向代理与负载均衡 Nginx仅仅作为Nginx  proxy反向代理使用的,因为这个反向代理功能表现的效果是负载均衡集群的效果. 负载均衡指的是 ...

最新文章

  1. jpa-和-mybatis创建的事物管理器名称
  2. 记录:通过SSH远程连接Ubuntu
  3. java实现多级菜单(java递归)方法二
  4. 【Modern OpenGL】前言
  5. C++ primer第十八章 18.1小结 异常处理
  6. MyEclipse打包jar 并加入第三方包
  7. php运行时输出,在PHP中运行具有实时输出的过程
  8. eclipse 统计代码行数
  9. 手机登入注册为什么出现这个错误?
  10. 进程同步与互斥:POSIX有名信号量
  11. 信息学奥赛一本通2061
  12. 安卓原生系统_体验类原生安卓系统PixelExperience流畅得不像话
  13. excel打开html非常慢,excel打开速度很慢的解决方法
  14. 哈佛大学幸福课笔记一
  15. Open SQL LEFT与RIGHT函数
  16. 【文献学习】海上信道系统知识体系详解--附思维导图
  17. fwrite和fread函数的用法小结
  18. html5 粒子动画效果制作,8款惊艳的HTML5粒子动画特效
  19. 《HTML入门笔记--HTML常用标签》
  20. 基于Contiki OS的智能led照明:LIFX

热门文章

  1. 建立时间、保持时间与亚稳态
  2. 网络层常见知识点剖析
  3. csp-s模拟测试42「世界线·时间机器·密码」
  4. redhat6.8链路聚合
  5. SQL Server 2008 R2如何生成带数据的数据库脚本
  6. object - c 函数的值
  7. TDD:MS自带的单元测试 之 线程模型和执行顺序
  8. javascript动态创建radio button元素支持IE/Firefox
  9. Python 学习笔记 多进程 multiprocessing
  10. 在计算机中描述景物结构形状与外貌,在计算机中通过描述景物的结构、形状与外貌,然后将它绘制成图在屏幕上显示出来,此类图像称为_____。...