前端为什么非要动静分离 说一下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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370142.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

unity语音聊天之 www.GetAudioClip

最近在开发语音聊天功能,游戏需要跨平台安卓与ios,上传本地录制的wav文件至服务器后,需要根据服务器返回的地址进行语音文件的下载并进行播放。 这里通过使用www进行下载并播放 其中在ios播放时却不行了,查询官方文档后发现,ios必…

轻谈BFC

BFC 定义 CSS2.1的定义 Block formatting contexts 9.4.1 Block formatting contexts Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with overflow other …

Java中的Selenium / WebDriver示例

几年前,我正在忙于一些工作,客户希望了解如何解决现实世界中的问题。 他们要求我自动化woot.com网站上的某些任务。 他们的任务是访问各个网站,并阅读当天商品的名称和价格。 我写了一些Selenium代码,以为可以将其张贴在这里&am…

c语言中怎样实现空格的替换,C语言实现去除字符串中空格的简单实例

在网上看了些去除空格的代码,觉得都不是很简洁,就自己写代码实现它本着高效率,不使用额外存储空间的想法实现该功能去除空格一共有三种:1、去除全部空格;2、一种是去除左边空格;3、去除右边空格想去除左右两边空格,只要先去除左边…

python消息队列中间件_python-RabbtiMQ消息队列

1.RabbitMQ简介AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计。消息中间件主要用于组件之间的解耦,消息的发送者无需知道消息使用者的存在&#xff…

CSS position(定位)属性

关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。 然后来看看什么是文档流(normal flow),下面是 www.w3.org 的描述: Normal flo…

tomcat配置文件server.xml详解

版权声明:本文为博主原创文章,未经博主允许不得转载。 目录(?)[] 元素名 属性 解释 server port 指定一个端口,这个端口负责监听关闭tomcat 的请求 shutdown 指定向端口发送的命令字符串 service name 指定service 的名字 Con…

均值,方差,协方差,协方差矩阵,特征值,特征向量

大牛博客,收藏一下 http://blog.csdn.net/yangleo1987/article/details/52845912转载于:https://www.cnblogs.com/gaohai/p/8086626.html

Java ByteBuffer –速成课程

以我的经验,当开发人员第一次遇到java.nio.ByteBuffer时,会引起混乱和细微的错误,因为如何正确使用它尚不明显。 在我对API文档感到满意之前,需要反复阅读API文档和一些经验以实现一些微妙之处。 这篇文章是关于如何正确使用它们的…

c语言cth三角函数表示,三角函数与双曲函数基本公式对照表

圆函数(三角函数)1.基本性质:sin tan cos x x x ,cos cot sin xx x 1sec cos x x ,1csc sin x x tan cot 1x x sin csc 1x x sec cos 1x x 22sin cos 1x x 221tan sec x x ,221cot csc x x 2.奇偶性:sin()sin x x -- cos()cos x x - tan()tan x x --3.…

实现编辑功能有哪几个action_Web 应用的撤销重做实现

背景前不久,我参与开发了团队中的一个 web 应用,其中的一个页面操作如下图所示:GIF这个制作间页面有着类似 PPT 的交互:从左侧的工具栏中选择元素放入中间的画布、在画布中可以删除、操作(拖动、缩放、旋转等&#xff…

为什么我们要做三份 Webpack 配置文件

时至今日,Webpack 已经成为前端工程必备的基础工具之一,不仅被广泛用于前端工程发布前的打包,还在开发中担当本地前端资源服务器(assets server)、模块热更新(hot module replacement)、API Pro…

使用maven插件构建docker镜像

为什么要用插件 主要还是自动化的考虑,如果额外使用Dockerfile进行镜像生成,可能会需要自己手动指定jar/war位置,并且打包和生成镜像间不同步,带来很多琐碎的工作。 插件选择 使用比较多的是spotify的插件:https://github.com/spo…

windows下如何安装pip以及如何查看pip是否已经安装成功?

最近刚学习python,发现很多关于安装以及查看pip是否安装成的例子都比较老,不太适合于现在(python 3.6 )因此,下一个入门级别的教程。 0:首先如何安装python我就不做介绍了。 1:如果安装的是pyth…

检查用户显示器的分辨率

检查用户显示器的分辨率 转载于:https://www.cnblogs.com/Renyi-Fan/p/8088012.html

android 字体 dpi,详解Android开发中常用的 DPI / DP / SP

Android的碎片化已经被喷了好多年,随着国内手机厂商的崛起,碎片化也越来越严重,根据OpenSignal的最新调查,2014年市面上有18796种不同的Android设备,作为开发者,一个无法回避的难题就是需要适配各种各样奇奇…

android studio闪退代码不报错_代码不报错,不代表真的没错

今天是生信星球陪你的第695天大神一句话,菜鸟跑半年。我不是大神,但我可以缩短你走弯路的半年~就像歌儿唱的那样,如果你不知道该往哪儿走,就留在这学点生信好不好~这里有豆豆和花花的学习历程,从新手到进阶&#xff0c…

Centos7操作系统部署指南

一、硬件环境: Dell R620 二、软件环境: Centos6.4 X86_64 KVM Windows7vnc 三、安装说明 操作系统更新之迅速,让作为新手的系统运维人员有点措手不及,相对于老手就胸有成竹。怎么讲?由于老手对技术方向把握的非常好&…

Eclipse插件中的SLF4J登录

一直都在使用Maven和纯Java库进行开发,我从没想过在开发Eclipse插件时发出一些日志语句可能会成为问题。 但是,在Eclipse开发人员的想象中,一切似乎总是在Eclipse环境中,而Eclipse宇宙之外则什么都没有。 如果您使用Google搜索上…

CSS(四)

css元素溢出 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。 overflow的设置项: 1、visible 默认值。内容不会被修剪,会呈现在元素框之外。2、hidden 内容会被修…