划分主域

1,099 阅读4分钟

场景


在常规情况下,我们的前端应用以及相应的资源都是放在同个域名下,较好的方式可能会把静态资源比如图片以及js\css资源放到cdn域名下。但在http加载的http瀑布图中我们会发现,因为不同浏览器对于单域名的限制,其并行下载的资源下载阻塞会导致应用的首屏显示有较大的延迟。

手淘的处理效果


在chrome的首屏加载情况下,有大量的并发请求,其中针对图片的部分我们单独截图发现其图片的并行下载情况也比较乐观。

当然首屏加载效果好,除了域名的关系还和图片的处理策略有关,比如:1 使用max-age的强缓存 2 根据当前设备以及网络情况选择了对应尺寸的图片呢 。

了解下什么是关键路径


关键路径是指一个域名下提供了大量的资源下载,而导致成为性能的瓶颈,针对这种情况下建议是划分主域。

那么从渲染效果来讲,导致阻塞的主要原因主要是两方面,一个是css以及js阻塞,比如像单页应用没有做过同构优化的,就会导致没有加载到主入口文件时,js的加载以及处理完成之前,页面的渲染都是阻塞的。这种的主要处理方案是:1 减少首屏加载的文件,可以通过代码分割,强缓存第三方资源,异步或者延迟加载非必要资源的方法是 2 通过服务端同构首屏,然后后续可继续使用客户端渲染的方式。这里不再展开描述。

另外一方面原因就是图片导致的阻塞,在假设图片占位宽高比确定的情况下,在一屏之内加载的图片一般在5-20张之间,假设全部按照每个图都是单独加载的方式,那么在首屏初次访问下,其加载需要阶梯性质的3-5次才能把页面完整的渲染完,这显然不符合我们的预期。

为了解决上面的这种因为某域名的并发下载限制而导致的路径问题称为关键路径。

有哪些站点在划分


facebook ,ali,ebay,youtobe ,jd

备注:
1 也有的站点会通过http降级的方式来支持更多的http下载数,这个取决于http在升级到1.1时,为了支持长连接(保持连接占用,connection:keep-alive),提升浏览器的整体性能而降低了浏览器对单域名的并发请求数量限制。
2 不同浏览器对单域名的请求并发数限制是不同的,建议根据不同浏览器的设置灵活处理划分的界限,保证80-90以上的用户可以得到较好的用户体验。

域如何划分

域名与主机的关系


浏览器对请求并发数的限制只是针对域名,并不针对ip,所以设计时完全可以考虑增加不同的域名解析到同一cdn服务器即可。

设置多少个域


以下仅供参考:

手淘 :6个域名
京东:9个域名
美团:6个域名

划分资源


1 原则1 :同类的资源尽量划分同个固定域名,不建议随便变更,这样也有利于浏览器的缓存策略生效。一般针对css以及js都会单独的提供1-2个域名
2 原则2 :一般针对图片,都是做强度的域名划分,域名可能是固定的几个域名,按照性质区分;也可能是为图片提供序列化的固定域名,比如p1,p0,s3之类的。
3 原则3:针对浏览器对域名的限制并不同,因为对域名的划分算法也必须有所区分。

补充


1 虽然域名解析会带来一定的消耗,但带来的性能体验是大于这点消耗的。

2 作为常规的方案,我们清楚消耗在域名解析上的时间,可以通过设置header头信息中的dns-prefetch来降低这部分的消耗 。

3 虽然划分主域能解决性能体验的问题,但在当前页面也需要分析是否进行了过度的划分,过度的划分只会增加工程的复杂度以及解析的难度,常规下设置2-4个同性质的域名为合理的,因为要考虑到域名资源请求时间优化在10-100ms的数量级时,其域名占用是会马上释放的。