怎么通过域名发散与域名收敛提高网页加载速度?

在数字化时代,网页的加载速度直接影响用户体验与转化率,优化网页加载速度成为了前端工程师和网站运营者关注的重点。其中,域名策略作为关键一环,对提升网页性能具有不可忽视的作用。本文将从两个主要方面——域名发散与域名收敛,深入探讨这两种策略背后的原理、应用场景及其对网页加载性能的影响。

一、怎么用域名发散突破并发限制,加速资源加载?

PC 时代为了突破浏览器的域名并发限制,遵循这样一条定律:http 静态资源采用多个子域名。目的是充分利用现代浏览器的多线程并发下载能力。

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

怎么通过域名发散与域名收敛提高网页加载速度?

上图展示了各浏览器的并行连接数(同域名),可以看到在一些现代浏览器内每个 hostname 的最大连接数基本都是6个,IE 稍显傲娇,总体而言并发数不高。

假设现在浏览器对每个域名连接数为1,那么现实情况是:

怎么通过域名发散与域名收敛提高网页加载速度?

浏览器解析完我们的文档之后开始发起请求,对文件进行加载。然后一个一个文件在max connections 下进行排队下载。

但如果我们使用了域名分散之后,使用多个domain进行资源的下载,就有:

怎么通过域名发散与域名收敛提高网页加载速度?

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

服务器对于每个域名的限制只是针对于hostname而已, 就算你的IP地址一样,也是没有太大关系的。所以,这里就可以使用CNAME来创建,不同域名相同IP的映射。CNAME全称就是Canonical Name。 他是DNS服务商提供的一项服务,用来给你的网站设置别名。

比如,你现在的网站是abc.example.com. 但是,你也想使用def.example.com 来访问相同的网站, 那么这就需要你使用CNAME 来对你的域名设置alias. 通常不同的服务商有着不同的设置方法. 比如: 国外的 maxCDN

这样,就能很方便的设置另外的域名来增加你文件的connections number。另外,还可以在DNS服务商下申请子域。

所以 PC 时代对静态资源优化时,通常将静态资源分布在几个不同域,保证资源最完美地分域名存储,以提供最大并行度,让客户端加载静态资源更为迅速。

为什么浏览器要做并发限制呢?

究其根本原因,在以前,服务器的负载能力差,稍微流量大一点服务器就容易就崩溃。 所以为了保护服务器不崩溃,浏览器要对 max connections(最大并发数)进行限制。如果每个用户的最大并发数不限制的话,服务器的负载能力会大幅下降。

另外还有一个方面就是,防止 DDOS 攻击。最基本的 DDOS 攻击就是利用合理的服务请求来占用过多的服务资源,从而使合法用户无法得到服务的响应。

二、怎么用域名收敛优化DNS?

域名收敛策略建议将静态资源集中在一个域名下,以应对移动互联网环境下DNS解析耗时较长的问题。在移动端,DNS解析是HTTP请求过程中的关键瓶颈之一,将资源集中在少数域名下有助于减少DNS查询次数,从而降低整体加载时间。此外,域名收敛还有助于简化跨域资源共享(CORS)策略的配置,提高网站的安全性。

上面也说到了,域名发散可以突破浏览器的域名并发限制,那么为要反其道而行之呢?因为因地制宜,不同情况区别对待,域名发散是 PC 时代的产物,而现在进入移动互联网时代,通过无线设备访问网站,App的用户已占据了很大一部分比重,而域名收敛正是在这种情况下提出的。

http 请求过程

1、DNS 域名解析

2、发起 TCP 的 3 次握手

怎么通过域名发散与域名收敛提高网页加载速度?

1)Client首先发送一个连接试探,ACK=0 表示确认号无效,SYN = 1 表示这是一个连接请求或连接接受报文,同时表示这个数据报不能携带数据,seq = x 表示Client自己的初始序号(seq = 0 就代表这是第0号包),这时候Client进入syn_sent状态,表示客户端等待服务器的回复.

2)Server监听到连接请求报文后,如同意建立连接,则向Client发送确认。TCP报文首部中的SYN 和 ACK都置1 ,ack = x + 1表示期望收到对方下一个报文段的第一个数据字节序号是x+1,同时表明x为止的所有数据都已正确收到(ack=1其实是ack=0+1,也就是期望客户端的第1个包),seq = y 表示Server 自己的初始序号(seq=0就代表这是服务器这边发出的第0号包)。这时服务器进入syn_rcvd,表示服务器已经收到Client的连接请求,等待client的确认。

3)Client收到确认后还需再次发送确认,同时携带要发送给Server的数据。ACK 置1 表示确认号ack= y + 1 有效(代表期望收到服务器的第1个包),Client自己的序号seq= x + 1(表示这就是我的第1个包,相对于第0个包来说的),一旦收到Client的确认之后,这个TCP连接就进入Established状态,就可以发起http请求了。

3、建立 TCP 连接后发起 http 请求

一个HTTP请求报文由请求行(request line)、请求头部(headers)、空行(blank line)和请求数据(request body)4个部分组成。

怎么通过域名发散与域名收敛提高网页加载速度?

4、服务器响应 http 请求

HTTP响应报文由状态行(status line)、相应头部(headers)、空行(blank line)和响应数据(response body)4个部分组成。

怎么通过域名发散与域名收敛提高网页加载速度?

5、浏览器解析HTML代码,并请求HTML代码中的资源

浏览器拿到HTML文件后,开始解析HTML代码,遇到静态资源时,就向服务器端去请求下载。

6、关闭TCP连接,浏览器对页面进行渲染呈现给用户

浏览器利用自己内部的工作机制,把请求到的静态资源和HTML代码进行渲染,呈现给用户

怎么通过域名发散与域名收敛提高网页加载速度?

由于TCP连接是全双工的,因此每个方向都必须单独进行关闭。这原则是当一方完成它的数据发送任务后就能发送一个FIN来终止这个方向的连接。收到一个 FIN只意味着这一方向上没有数据流动,一个TCP连接在收到一个FIN后仍能发送数据。首先进行关闭的一方将执行主动关闭,而另一方执行被动关闭。

1)客户端进程发出连接释放报文,并且停止发送数据。释放数据报文首部,FIN=1,其序列号为seq=u(等于前面已经传送过来的数据的最后一个字节的序号加1),此时,客户端进入FIN-WAIT-1(终止等待1)状态。 TCP规定,FIN报文段即使不携带数据,也要消耗一个序号。

2)服务器收到连接释放报文,发出确认报文,ACK=1,ack=u+1,并且带上自己的序列号seq=v,此时,服务端就进入了CLOSE-WAIT(关闭等待)状态。TCP服务器通知高层的应用进程,客户端向服务器的方向就释放了,这时候处于半关闭状态,即客户端已经没有数据要发送了,但是服务器若发送数据,客户端依然要接受。这个状态还要持续一段时间,也就是整个CLOSE-WAIT状态持续的时间。

3)客户端收到服务器的确认请求后,此时,客户端就进入FIN-WAIT-2(终止等待2)状态,等待服务器发送连接释放报文(在这之前还需要接受服务器发送的最后的数据)。

4)服务器将最后的数据发送完毕后,就向客户端发送连接释放报文,FIN=1,ack=u+1,由于在半关闭状态,服务器很可能又发送了一些数据,假定此时的序列号为seq=w,此时,服务器就进入了LAST-ACK(最后确认)状态,等待客户端的确认。

5)客户端收到服务器的连接释放报文后,必须发出确认,ACK=1,ack=w+1,而自己的序列号是seq=u+1,此时,客户端就进入了TIME-WAIT(时间等待)状态。注意此时TCP连接还没有释放,必须经过2MSL(最长报文段寿命)的时间后,当客户端撤销相应的TCB后,才进入CLOSED状态。

6)服务器只要收到了客户端发出的确认,立即进入CLOSED状态。同样,撤销TCB后,就结束了这次的TCP连接。可以看到,服务器结束TCP连接的时间要比客户端早一些

在这里第一步,也是关键的第一步 DNS 解析,在移动端的 http 请求耗时中,DNS 解析占据了大部分时间。

域名结构

域名的结构(或者叫命名空间)是一个树状结构,有树就得有根,这个根是一个点‘.’(dot)。

怎么通过域名发散与域名收敛提高网页加载速度?

以 www.example.com 为例,完整的形式应该是 www.example.com. ,注意最后一个点,就是根结点 root ,只不过平时是浏览器或者系统的解析器自动帮我们补全了。我们要想获取根域都有那些,可以在终端下直接使用 dig 命令(需要安装 dig 指令),如下:

怎么通过域名发散与域名收敛提高网页加载速度?

可以看到有 13 个,大部分都是在国外,根节点之后就是顶级域名,就是.cn .com .gov 这些,顶级域划分为通用顶级域 (com、org、net 等)和国家与地区顶级域(cn、hk、us、tw 等)。我们可以继续使用 dig 查看一下 顶级域名的解析路径,加上 +trace 参数选项,意思是追踪 DNS 解析过程,如下:

怎么通过域名发散与域名收敛提高网页加载速度?

可以看到是先到根节点,再查找到 com ,就是根结点会告知下一个结点 com 在哪:就是 com. 172800 IN NS [a-m].gtld-servers.net。

顶级域之后就是我们熟知的一级域名,譬如 www.example.com 中的 example 就是一级域。

NS 是什么

上面两张 dig 命令贴图中间出现了很多次 NS ,NS 即是 NameServer,大部分情况下又叫权威名称服务器简称权威。

权威其实是某些域的权威,也就是权威上面有这些域的最新,最全的数据,所有这些域的数据都应该以此为准(只有权威可以增删改这些域的数据),就像上面 dig com +trace 的结果可以看到,com 的权威是上面的 13 个根域。同理,所有的顶级域(cn、org、net 等等)的权威都是根域。

DNS 解析

其实上面就是 DNS 解析的一个大致过程,即迭代解析,但是不是很详尽,一个完整的 DNS 解析过程如下:(下面一段摘自这里:域名收敛–前端优化

1. 拿到 URL 后,浏览器会寻找本地的 DNS 缓存,看看是否有对应的 IP 地址,如果缓存中存在那就好了,如果没有,那就得向 DNS Server 发送一个请求,找到你想要的 IP 地址。

2. 首先他会向你的 ISP(互联网服务提供商) 相关的 DNS servers 发送 DNS query。然后这些 DNS 进行递归查询(recursive)。所谓的递归查询,就是能够直接返回对应的IP地址,而不是其他的 DNS server 地址。

3. 如果上述的 DNS Servers 没有你要的域名地址,则就会发送迭代查询,即会先从 root nameservers 找起。 即是假如你要查询 www.example.com ,会先从包含根结点的 13 台最高级域名服务器开始。

4. 接着,以从右向左的方式递进,找到 com. 然后向包含 com 的 TLD(顶级域名) nameservers 发送 DNS 请求。接着找到包含 example 的 DNS server。

5. 现在进入到了example.com 部分,即是现在正在询问的是权威服务器,该服务器里面包含了你想要的域名信息,也就是拿到了最后的结果 record 。

6. 递归查询的 DNS Server 接受到这 record 之后, 会将该record 保存一份到本地。 如果下一次你再请求这个 domain 时,我就可以直接返回给你了。由于每条记录都会存在 TLL ,所以 server 每隔一段时间都会发送一次请求,获取新的 record,

7. 最后,再经由最近的 DNS Server 将该条 record 返回。 同样,你的设备也会存一份该 record 的副本。 之后,就是 TCP 的事了

流程: . => com. => .exampl.com. => www.example.com. => IP adress

从上面可以看到,DNS 解析其实是一个很复杂的过程,在 PC 上,我们采用域名发散策略,是因为在 PC 端上,DNS 解析通常而言只需要几十 ms ,可以接受。而移动端2G 网络,3G网络,4G网络/wifi 强网,而且移动 4G 容易在信号不理想的地段降级成 2G ,通过大量的数据采集和真实网络抓包分析(存在DNS解析的请求),DNS的消耗相当可观,2G网络大量5-10s,3G网络平均也要3-5s(数据来源于淘宝)。 下面附上在 2G,3G,4G, WIFI 情况下 DNS 递归解析的时间 (ms):

怎么通过域名发散与域名收敛提高网页加载速度?

因为在增加域的同时,往往会给浏览器带来 DNS 解析的开销。所以在这种情况下,提出了域名收敛,减少域名数量可以降低 DNS 解析的成本。下图是手机端页面加载数和域名分散数的关系(from Mobify Developer):

怎么通过域名发散与域名收敛提高网页加载速度?

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

那有没有其他办法能够代替DNS呢? 事实上有的, 最出名的应该算CDN 和 SPDY(现已经被HTTP/2.0取代)。

其中CDN跟域名收敛没有关系,而是取决于服务器的分布缓存和负载均衡。

什么是 SPDY?(现已经被HTTP/2.0取代)

SPDY,一种开放的网络传输协议,由Google开发,用来发送网页内容。基于传输控制协议(TCP)的应用层协议 ,是 HTTP/2.0 的前身。

SPDY 的作用就是,在不增加域名的情况下,解除最大连接数的限制。主要的特点就是多路复用,他的目的就是致力于取消并发连接上限。

那么相比 http/1.1, SPDY 具体的优势在哪里呢:

  1. 多路复用 请求优化(http/2.0)

SPDY 规定在一个 SPDY 连接内可以有无限个并行请求,即允许多个并发 HTTP 请求共用一个 TCP会话。这样 SPDY 通过复用在单个 TCP 连接上的多次请求,而非为每个请求单独开放连接,这样只需建立一个 TCP 连接就可以传送网页上所有资源,不仅可以减少消息交互往返的时间还可以避免创建新连接造成的延迟,使得 TCP 的效率更高。

此外,SPDY 的多路复用可以设置优先级,而不像传统 HTTP 那样严格按照先入先出一个一个处理请求,它会选择性的先传输 CSS 这样更重要的资源,然后再传输网站图标之类不太重要的资源,可以避免让非关键资源占用网络通道的问题,提升 TCP 的性能。

  1. 支持服务器推送技术(http/2.0)

服务器可以主动向客户端发起通信向客户端推送数据,这种预加载可以使用户一直保持一个快速的网络。

  1. SPDY 压缩了 HTTP 头(http/2.0)

舍弃掉了不必要的头信息,经过压缩之后可以节省多余数据传输所带来的等待时间和带宽。

  1. 强制使用 SSL 传输协议

Google 认为 Web 未来的发展方向必定是安全的网络连接,全部请求 SSL 加密后,信息传输更加安全。

怎么通过域名发散与域名收敛提高网页加载速度?

SPDY与HTTP/2.0的不同:

  • HTTP/2.0 支持明文 HTTP 传输,而 SPDY 强制使用 HTTPS。
  • HTTP/2.0 消息头的压缩算法采用 HPACK,而非 SPDY 采用的 DEFLATE

SPDY最初通过使用DEFLATE 格式压缩头部字段来解决这个冗余问题,事实证明,它在高效地表示冗余头部字段时非常有效。但是,这种方法暴露了CRIME(Compression Ratio Info-leak Made Easy)攻击所证明的安全风险。

三、域名拓展知识

  1. performance.timing的常用监测时间

DNS解析时间: domainLookupEnd – domainLookupStart

TCP建立连接时间: connectEnd – connectStart

白屏时间: responseStart – navigationStart

dom渲染完成时间: domContentLoadedEventEnd – navigationStart

页面onload时间(首屏时间): loadEventEnd – navigationStart

怎么通过域名发散与域名收敛提高网页加载速度?
  1. TTL 是什么

TTL 是 Time To Live 的缩写,该字段指定 IP 包被路由器丢弃之前允许通过的最大网段数量。TTL 是 IPv4 报头的一个 8 bit 字段。简单的说它表示 DNS 记录在 DNS 服务器上缓存时间。

结语

域名发散与域名收敛作为两种截然不同的域名策略,各有其适用场景和优势。域名发散通过突破浏览器并发限制,显著提升了网页加载速度;域名收敛则通过优化DNS解析过程,更好地适应了移动设备的网络环境。在实际应用中,我们需要根据具体场景和需求,灵活选择和应用这两种策略,以实现网页性能的最优化。

延展阅读:

如何通过优化京东风向标提升店铺排名?揭秘五大实操技巧!

如何从零开始搭建自动化测试框架?搭建过程中有哪些注意事项?

怎么提高前端开发速度?Tailwind CSS 安装教程及基本使用方法

咨询方案 获取更多方案详情                        
(0)
研发专家-小鹿角研发专家-小鹿角
上一篇 2024年9月30日 下午4:27
下一篇 2024年9月18日 下午3:08

相关推荐