资讯专栏INFORMATION COLUMN

域名发散--前端优化(三)

April / 2900人阅读

摘要:但在里,所有的文本数据默认都会被压缩目前的兼容性是所以说还是任重而道远开启那如何开启呢很简单,使用的用户,可以下载一个的模块使用的用户,可以下载一个的模块最后说两句其实,和域名收敛一直都是前端世界的优化的重点。

话说天下大势,分久必合,合久必分

其实域名也是一样,分分合合, 不管是域名收敛还是域名发散,都有着自己独特的应用场景。
目前, 在web"s top 30,000 URLS 里面, 平均每个域名承担了50个资源的请求,所以,域名的扩散其实是个很重要的手段.
现在大部分website都推崇这域名的发散
这是为什么呢?为什么呢?为什么呢?

why is domain sharding important?

域名发散出现的原因其实真得浏览器. md~ 以前网速慢,设备差,稍微流量大一点 Server 就崩溃了。 所以, 为了保护你的服务器不被强暴到崩溃,浏览器要对max connections 有限制.如果每个用户的max connections 不限制的话, 结果就是, 服务器的负载能力会低至冰点~
另外还有一个方面就是, 识别用户不是DDOS attacker. 原因我就不多说了。 如果有大神的话,可以DDOS一下,试一试,表示,我的电脑扛不住.

What does DS(domain sharding) can do?

由于浏览器的限制,每个浏览器,允许对每个域名的连接数一般是有上限的.

这是browserscrope生成的结果.通过这样图,我们就可以知道在一些现代浏览器内每个hostname的最大连接数基本都是6个,但是IE这个傻逼,不知道抽风了么? 当然,如果 进行了DS之后 增加连接,也还是有最大的连接数的(比如17)。
这里,为了讲解清晰,我举个例子吧. 假设现在浏览器对每个域名连接数为1. 那么现实情况是.

浏览器解析完我们的文档之后开始发起请求,对文件进行加载. 然后一个一个文件 在max connections 下进行排队下载.
但如果我们使用了域名分散之后,使用多个domain进行资源的下载,就有.

这样完全可以省略掉排队的时间.提升网页加载的速度.

how to make DS come true? 使用CNAME进行设置

服务器对于每个域名的限制只是针对于hostname而已, 就算你的IP地址一样,也是没有太大关系的。所以,这里就可以使用CNAME来创建,不同域名相同IP的映射.
CNAME全称就是Canonical Name。 他是DNS服务商提供的一项服务,用来给你的网站设置别名。
比如,你现在的网站是abc.example.com. 但是,你也想使用def.example.com 来访问相同的网站, 那么这就需要你使用CNAME 来对你的域名设置alias. 通常不同的服务商有着不同的设置方法. 比如: 国外的maxCDN。
这样,就能很方便的设置另外的域名来增加你文件的connections number.
另外,还可以在DNS服务商下申请子域。这些都是可行的.

DS的最佳实践

使用DS 并不是一本万利的。 因为在你增加域的同时,往往会给浏览器带来DNS解析的开销。如果有兴趣的同学可以参考DNS解析. 对于PC端上,几十ms的解析速度来说还好,但是,在手机端上,DNS 解析的效果我就呵呵了. 少则几百毫秒,多则1s+.
这里我们用数据说话.
手机端页面加载数和域名分散数的关系. from Mobify Developer

现在,各大浏览器都已经提升了资源的下载数,所以,域名分散的必要性也就没这么大了. 可以从上表看出,在2个域名分散条件下,网页的加载速度提升较大,而第三个以后就比较慢了。 所以, 一般来说,域名分散的数量最好在3以下.

那有没有其他办法能够代替DS呢? 事实上有的, 最出名的应该算CDN 和 SPDY.

CDN和域名收敛的关系(没关系)

如果大家使用过云平台(阿里云,腾讯云)的话,应该有所了解过上面的一些服务。 其中比较出名的应该算是CDN服务了.
使用CDN的时候,我们往往也会使用到CNAME的设置。 那么问题来了:

CDN 和 domain sharding 到底有什么关系?

我相信,大部分童鞋,应该都有点懵逼.
in fact, 他们两个是完全不一样的东西。
CDN 全称是--Content Delivery Network. 现实意义就是,他其实就是一个 用来保存你静态文件的仓库(css,js,img等). 所以,他的出现必定是建立在拥有众多服务器的云平台上. 他的作用就是,托管你的文件,并且当某一个用户想要得到这份文件时,便会根据地理位置,找到离用户最近的一台服务器(肯定需要经过DNS解析), 然后返回 你存储的静态文件. 所以,由于地理位置比较近的原因,结果就是网速快, 网页打开的时间也就变短了.
而~ domain sharding 是什么呢? 其实对比看来,就应该很容易知道, 首先DS(domain sharding) 所提供的服务器地址是不会改变的。 只是增加了 不同的subdomain或者domain alias而已. 而这些在CDN 里面 统统都可以实现.

总结一下:

DS: 为了突破浏览器对连接数的限制,而将资源放到不同的domains 上的

CDN: 就是将你的资源放到 全国 或者说 全世界各个地方的服务器上的.(当然,他本身也是利用DS的技术)

When should we use CDN?

由于CDN 比较贵,所以对于小范围 运营性的H5来说,不使用CDN也没有太大的影响,反正用户都在那一块。 但是,如果你的web 比较大,而且涉及用户群体的范围比较广的话,相对性的使用CDN 也是有益无害的。不过,由于CDN 是按浏览计费的,所以你懂的。 这里安利一个Calculator根据你的流量来选择最佳的CDN. 所以说,你用不用CDN还得看你自己或者你leader的心情了. 另外更详述的区别可以见: CDN xx DS

那SPDY又是个什么东西呢?

SPDY指南

SPDY可以说是DS杀手. SPDY 的作用就是,在不增加域名的情况下,解除最大连接数的限制. 卧槽~ 怎么听起来就像一个 sliver bullet. 没错,可以说SPDY 就是 HTTP2的前身.
SPDY是google主导的一种新型通信方式.主要的特点就是多路复用. 他的目的就是致力于取消max connections 上限. 不过由于推广时间短,全世界使用的网页数都比较少. 但,据chromium统计,使用了SPDY网页速率 差不多提升了28%~64%左右. 所以,说SPDY的出现,可以让DS的存在变的毫无价值.
那SPDY具体的优势在哪里.

解决了HTTP只能 One request per connection. 当连接完成后,可以实现并行下载多个资源文件

服务器推的技术, 和SSE的理念类似,不过更靠底层。直接可以实现无需用户等待,直接后台发资源(感觉就像写APP了,有木有)

请求头的复用. 当你前几次的请求头内容没多大变化的时候,就会省去几个相同的,实现Header Compression

数据压缩: 在HTTP1.1 有 Content-Encoding: gzip, Transfer-Encoding: chunked. 来显式表明开启文本压缩。但在SPDY里,所有的文本数据默认都会被压缩.
SPDY目前的兼容性是IE11+.(所以说还是任重而道远)

开启SPDY

那如何开启SPDY呢? 很简单,使用nginx的用户,可以下载一个ngx_http_spdy_module的模块. 使用apache的用户,可以下载一个mod_spdy module的模块.

最后说两句

其实,DS 和 domain of convergence (域名收敛), 一直都是前端世界的优化的重点。 不过,由于时代在进步,技术在革新。 感觉DS 是很有可能被淘汰的啊喂. 但,由于SB-IE占的全球份额过大,就目前来说,这一天 还太遥远。 加油~

转载请注明作者和原文链接: https://segmentfault.com/a/1190000004647665

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/10957.html

相关文章

  • 2019前端面试那些事儿

    摘要:虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总新特性,语义化浏览器的标准模式和怪异模式和的区别使用的好处标签废弃的标签,和一些定位写法放置位置和原因什么是渐进式渲染模板语言原理盒模型,新特性,伪 虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总1.HTMLHTML5新特性,语义化浏览器的标准模式和怪...

    JeOam 评论0 收藏0
  • 2019前端面试那些事儿

    摘要:虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总新特性,语义化浏览器的标准模式和怪异模式和的区别使用的好处标签废弃的标签,和一些定位写法放置位置和原因什么是渐进式渲染模板语言原理盒模型,新特性,伪 虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总1.HTMLHTML5新特性,语义化浏览器的标准模式和怪...

    QLQ 评论0 收藏0
  • 2018 浅谈前端面试那些事

    摘要:声明的变量不得改变值,这意味着,一旦声明变量,就必须立即初始化,不能留到以后赋值。 虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性,语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug,和一些定位写法css js放置位置和原因...

    LiuRhoRamen 评论0 收藏0
  • 2018 浅谈前端面试那些事

    摘要:声明的变量不得改变值,这意味着,一旦声明变量,就必须立即初始化,不能留到以后赋值。 虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性,语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug,和一些定位写法css js放置位置和原因...

    stormgens 评论0 收藏0
  • 2018 浅谈前端面试那些事

    摘要:声明的变量不得改变值,这意味着,一旦声明变量,就必须立即初始化,不能留到以后赋值。 虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性,语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug,和一些定位写法css js放置位置和原因...

    Hujiawei 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<