浏览器的资源并发亲试

前几天ali一个视频面试，给问到一个问题 为何图片要分多个域名？  我开始觉得他问我cdn，而后他再强调了一遍，为何要分多个域名？

而后我认真想了想 不知道为何，以后找我师傅叶小钗问了一下，他回答说一个域名下载有限，因而乎，我抽空写了一个demo。（只测试了pc和ios的 safari）

一、首先我准备了1张10M的图片 ，一个5M的js 和一个4M的css， 各复制了10次 改了10个不同的名字。

二、准备了 a.com 和b.com 2个域名

同域名pc 和手机的并发状况

pc(chrome)： 同一域名下 能同时并发6个 请求。

 

若是单纯 js， 同一时间也只能发6个。

 

因而可知，图片的请求，是会阻塞页面js的请求的， 因此移动端须要控制好首屏的请求数量， 会请求文件的大小(例如若是框架太大会阻塞页面渲染)

 

手机：

 

只请求js

只请求css

 

 

能够看出手机上同一时间只能同时请求4个资源。

 

不一样域名pc 和手机的并发状况

pc：

css

 

 

手机：

 

css

 

 

能够看出 pc上不一样域名并发是各6个请求，2个域名一共加起来是12个请求。

手机上不一样域名并发 各4个， 2个域名一共加起来是 8个请求。

 

总结：

控制好页面初始加载请求数量，适当的合并，如项目首屏用到图片，应该以懒加载的方式。还有若是网络稳定流畅的状况，能够经过访问不一样域名的资源来提升请求的并发数量