在正式展开之前,我们先来了解一下 Performance 接口,简单来说,它可以获取到当前页面中与性能相关的信息,主要用于 网页监控与程序性能,但是在本章当中就不详细展开了,具体的可以参考链接,有个概念即可
域名发散
在 PC
时代为了突破浏览器的域名并发限制,遵循这样一条定律『HTTP
静态资源采用多个子域名』,目的是充分利用现代浏览器的多线程并发下载能力,由于浏览器的限制,每个浏览器,允许对每个域名的连接数一般是有上限的,附一张网上流传甚广的图
域名发散出现的原因其实是在以前,服务器的负载能力差,网速慢,设备差,稍微流量大一点 Server
就崩溃了,为了保护你的服务器不崩溃,浏览器要对 max connections
有所限制,如果每个用户的 max connections
不限制的话, 结果就是服务器的负载能力会低至冰点(另外也有说是关于 DDOS),所以 PC
时代对静态资源优化时,通常将静态资源分布在几个不同域,保证资源最完美地分域名存储,以提供最大并行度,让客户端加载静态资源更为迅速
假设现在浏览器对每个域名连接数为 1
,那么现实情况是
浏览器解析完我们的文档之后开始发起请求,对文件进行加载,然后一个一个文件 在 max connections
下进行排队下载,但如果我们使用了域名分散之后,使用多个 domain
进行资源的下载,就有
这样完全可以省略掉排队的时间.提升网页加载的速度
域名收敛
这里首先会涉及到一个问题,为什么你手机打开网页时,白屏时间会这么长?一个网页白屏时间是由下面几部分决定的
所以,网页的优化就可以从上述几个部分开始,这里我们要提及的就是 DNS
优化,即域名收敛,那么什么是域名收敛呢?顾名思义,域名收敛的意思就是建议将静态资源只放在一个域名下面,而非发散情况下的多个域名下,上面也说到了,域名发散可以突破浏览器的域名并发限制,那么为要反其道而行之呢?
因为因地制宜,不同情况区别对待,域名发散是 PC
时代的产物,而现在进入移动互联网时代,通过无线设备访问网站,App
的用户已占据了很大一部分比重,而域名收敛正是在这种情况下提出的,这里就不能不提到 HTTP
请求了,简单来说就是
DNS
域名解析- 发起
TCP
的3
次握手 - 建立
TCP
连接后发起HTTP
请求 - 服务器响应
HTTP
请求 - …
在这里第一步,也是关键的第一步 DNS
解析,在移动端的 HTTP
请求耗时中,DNS
解析占据了大部分时间,在深入了解 DNS
解析之前,先科普一下 域名结构
域名结构
或者叫命名空间,是一个树状结构,有树就得有根,这个根是一个点 "."(dot)
,以 www.example.com
为例,完整的形式应该是 www.example.com.
(注意最后有一个点),就是根结点 root
,只不过平时是浏览器或者系统的解析器自动帮我们补全了,我们要想获取根域都有那些,可以在终端下直接使用 dig
命令(需要安装 dig
指令),如下
根节点之后就是顶级域名,就是 .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
解析的一个大致过程,即『迭代解析』一个完整的 DNS
解析过程如下(摘自 域名收敛–前端优化)
- 首先拿到
URL
后,浏览器会寻找本地的DNS
缓存,看看是否有对应的IP
地址,如果缓存中存在那就好了,如果没有,那就得向DNS Server
发送一个请求,找到你想要的IP
地址 - 首先他会向你的
ISP
(互联网服务提供商)相关的DNS servers
发送DNS query
,然后这些DNS
进行递归查询(recursive
),所谓的递归查询,就是能够直接返回对应的IP
地址,而不是其他的DNS server
地址 - 如果上述的
DNS Servers
没有你要的域名地址,则就会发送迭代查询,即会先从root nameservers
找起, 即是假如你要查询www.example.com
,会先从包含根结点的13
台最高级域名服务器开始 - 接着,以从右向左的方式递进,找到
com
,然后向包含com
的TLD
(顶级域名)nameservers
发送DNS
请求,接着找到包含example
的DNS server
- 现在进入到了
example.com
部分,即是现在正在询问的是权威服务器,该服务器里面包含了你想要的域名信息,也就是拿到了最后的结果record
- 递归查询的
DNS Server
接受到这record
之后,会将该record
保存一份到本地,如果下一次你再请求这个domain
时,我就可以直接返回给你了,由于每条记录都会存在TLL
,所以server
每隔一段时间都会发送一次请求,获取新的record
- 最后,再经由最近的
DNS Server
将该条record
返回, 同样,你的设备也会存一份该record
的副本
之后,就是 TCP
的事了,下面是一张萌萌的简化图
梳理一下,迭代查询的过程如下
.
==>com.
==>.exampl.com.
==>www.example.com.
==>IP adress
关于 TTL
TTL
是 Time To Live
的缩写,该字段指定 IP
包被路由器丢弃之前允许通过的最大网段数量,TTL
是 IPv4
包头的一个 8 bit
字段,简单的说它表示 DNS
记录在 DNS
服务器上缓存时间
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
解析的成本,下图是手机端页面加载数和域名分散数的关系
在 2
个域名分散条件下,网页的加载速度提升较大,而第 3
个以后就比较慢了, 所以,一般来说,域名分散的数量最好在 3
以下
HTTPDNS
上面过程如果顺利,本地 DNS
有缓存,也就是几十 ms
到几百 ms
的事情,不顺利,几秒到十几秒都有可能,严格来讲,DNS
才是我们发出去的第一个请求,所以减少开销就两条路
- 第一个就是减少
DNS
的请求 - 第二个就是缩短
DNS
解析路径
第一个就是做域名收敛的主要原因,相比于 PC
是对于域名的并发限制,无线上来说对并发的要求会弱很多(一般尽量是第一屏,后面使用懒加载)
第二个就是缩短解析路径,这里所说的缩短解析路径其实就说各级的缓存,本机的缓存,LocalDNS
的缓存,不过他们或多或少也不靠谱,尤其是运营商的 LocalDNS
给你劫持一下,篡改一下都是常有的事情,于是这个情况下,就有了 HTTPDNS,HTTPDNS
是为了解决移动端 DNS
解析请求而生的,顺便解决 DNS
劫持,合并请求和缓存结果进而提高解析质量
结论
在移动网络环境下,减少非必要 DNS
请求,将相关域名收敛成一个,可以尝到缓存的红利,进而可以减少打开页面时间,移动端减少 DNS
解析时间有两种方式
- 减少
DNS
请求 - 缩短
DNS
解析路径
从上面的各种网络环境下 DNS
解析时间对比,减少 DNS
请求是我们做域名收敛的主要原因,HTTPDNS
的诞生不仅可以合并请求,缩短 DNS
解析路径,还有防止运营商劫持等功效
关于 SPDY
单纯的在移动端采用域名收敛并不能很大幅度的提升性能,很重要的一点是,在移动端建连的消耗非常大,而 SPDY
协议可以完成多路复用的加密全双工通道,显著提升非 wifi
环境下的网络体验,当域名收敛配合 SPDY
才能最大程度发挥他们的效用,达到事半功倍
所谓
SPDY
就是一种开放的网络传输协议,由TCP
)的应用层协议 ,是HTTP 2.0
的前身
SPDY
的作用就是,在不增加域名的情况下,解除最大连接数的限制,主要的特点就是多路复用,他的目的就是致力于取消并发连接上限,那么相比 HTTP
,SPDY
具体的优势在哪里呢
多路复用 请求优化
SPDY
规定在一个 SPDY
连接内可以有无限个并行请求,即允许多个并发 HTTP
请求共用一个 TCP
会话,这样 SPDY
通过复用在单个 TCP
连接上的多次请求,而非为每个请求单独开放连接,这样只需建立一个 TCP
连接就可以传送网页上所有资源,不仅可以减少消息交互往返的时间还可以避免创建新连接造成的延迟,使得 TCP
的效率更高
此外,SPDY
的多路复用可以设置优先级,而不像传统 HTTP
那样严格按照先入先出一个一个处理请求,它会选择性的先传输 CSS
这样更重要的资源,然后再传输网站图标之类不太重要的资源,可以避免让非关键资源占用网络通道的问题,提升 TCP
的性能
支持服务器推送技术
服务器可以主动向客户端发起通信向客户端推送数据,这种预加载可以使用户一直保持一个快速的网络
SPDY 压缩了 Http 头
舍弃掉了不必要的头信息,经过压缩之后可以节省多余数据传输所带来的等待时间和带宽
强制使用 SSL 传输协议
Google
认为 Web
未来的发展方向必定是安全的网络连接,全部请求 SSL
加密后,信息传输更加安全,看看 SPDY
的作用图