从网络通信角度谈web性能优化

8

博客原文地址:Claiyre的个人博客 https://claiyre.github.io
如需转载,请在文章开头注明原文地址

衡量一个网站的性能有多个指标,DNS解析时间,TCP链接时间,HTTP重定向时间,等待服务器响应时间等等,从用户角度来看,就可以归结为该网站访问速度的快慢。也就是说性能等于网站的访问速度。
早些年Amazon曾经做过一个统计:网页加载时间每延长1秒钟,一年将减少16亿美元的营收。(16亿美元是一个什么概念呢?2015年,百度全年的总营收约100亿美元!)。
鉴于性能的重要性,于是我们便经常看到许多记录提升访问速度的方法的文章:减少http请求,雪碧图,压缩文件等等,看了这些文章后,博主了解了一些比较普遍的提升性能的方法,但是还不明白为啥这样能提升速度呀!
作为一名有志青年,博主认为,不仅要知其然,还要知其所以然。在查阅大量书籍和博文后,终于明白了其中的玄机,特此记录下来,与大家分享。

接下来,我们首先来深入理解一个浏览器与互联网的通信过程,然后分析每个过程所占时间的多少,以及哪些过程的时间是可以减少的,再说明通过怎样的方法可以减少这些时间,以此来缩小网站总的加载时间,提升网站的访问速度。

从输入url到浏览器开始渲染页面中间都发生了什么

互联网内各网络设备间的通信都遵循TCP/IP协议,利用TCP/IP协议族进行网络通信时,会通过分层顺序与对方进行通信。分层由高到低分别为:应用层、传输层、网络层、数据链路层。发送端从应用层往下走,接收端从数据链路层网上走。如图所示:

  1. 在浏览器中输入url
    用户输入url,如https://www.zhihu.com。其中https是协议,//后面的是网络地址,网络地址指出了请求的资源在哪个计算机上。网络地址可以是IP地址,也可以是域名,这里是域名,域名更方便记忆

  2. 浏览器查询缓存
    如果存在有效的缓存,则跳至第11步的渲染阶段。

  3. 应用层DNS解析域名
    域名是为了方便人类记忆,但计算机不能很好的处理域名,因为IP地址的长度是固定的32位(IPv6是128位),而域名的长度不固定,机器处理起来比较困难,因此需要有一个辅助系统提供域名到IP地址的映射,这个辅助系统就是DNS(Domain Name System)。 在收到一个域名后,客户端会先检查本地是否有对应的IP地址,若找到则返回响应的IP地址。若没找到则请求上级DNS服务器,直至找到根域。最终得到域名对应的IP地址,存在负载均衡时同一域名返回IP可能不同,所以IP地址才是是计算机在网络中的唯一标识。

  4. 应用层发送http请求
    http协议是用于客户端与服务器端通信的一种协议,它是通过请求和响应这种方式来实现通信的。HTTP请求包括请求报头和请求主体两个部分,其中请求报头包含了至关重要的信息,比如请求的方法(GET,POST,PUT,DELETE,CONNECT...)、目标url、遵循的协议(http / https / ftp…),以及客户端是否发送cookie等。

  5. SSL/TLS安全传输协议
    它是位于传输层之上的一个安全套接层也就是https中的's',确保了(1)所有信息都是加密传播的,第三方无法窃听(2)具有校验机制,一旦被篡改,通信双方会立刻发现(3)配备身份证书,防止身份被发现。

为网络通信提供安全保障。

  1. 传输层用TCP协议传输报文
    位于传输层的TCP协议为传输报文提供可靠的字节流服务。它为了方便传输,将大块的数据分割成以报文段为单位的数据包,并为他们编号,方便服务器接收时能正确的快速还原报文信息。TCP协议通过三次握手来建立连接,通过四次挥手断开连接,保证了传输的安全可靠,下面的两张图和那后地解释了三次握手和四次挥手。


(图片来源于http://www.cnblogs.com/zmlctt...

  1. 网络层IP协议查询MAC地址
    IP协议的作用是把TCP分割好的各种数据包传送给接收方,这时就需要接收方的MAC 地址,也就是物理地址。IP地址和MAC地址是一一对应的关系,一个网络设备的IP地址可以更换,但是MAC地址一般是固定不变的。ARP协议可以将IP地址解析成对应的MAC地址。当通信的双方不在同一个局域网时,需要多次中转才能到达最终的目标,在中转的过程中需要通过下一个中转站的MAC地址来搜索下一个中转目标,路由提供这种中转服务

  2. 数据到达数据链路层被处理包装

在找到对方的MAC地址后,就将数据发送到数据链路层,数据链路层负责三件事:封装成帧,透明传输,差错检测。

  1. 物理层传输到达服务器端
    数据进入物理层到达服务器后,再经历3-7的相反操作:在链路层接收到数据包,再层层向上直到应用层。这过程中包括在运输层通过TCP协议将分段的数据包重新组成原来的HTTP请求报文。

  2. 服务器响应
    服务接收到客户端发送的HTTP请求后,查找客户端请求的资源,并返回响应报文,响应报文中包括一个重要的信息——状态码。状态码由三位数字组成,其中比较常见的是200 OK表示请求成功。301表示永久重定向,即请求的资源已经永久转移到新的位置。在返回301状态码的同时,响应报文也会附带重定向的url,客户端接收到后将http请求的url做相应的改变再重新发送。

  3. 客户端接收响应并渲染页面
    服务器的响应到达客户端后,浏览器会根据接收到的数据渲染页面。渲染阶段也有许多改善性能的方案,本文的重点不在这里,下次在另一篇文章里细说。

以上就是网络通信的整个过程,深究起来极其复杂,用到的协议也是非常多,不得不由衷地佩服先人的智慧!

chrome开发者模式Network下分析各个过程对应时间

chrome浏览器下按F12打开开发者工具,找到第四栏的network,在浏览器上方地址栏输入一个自己从未访问过的url,目的是保证请求的内容没被缓存在本地(为此,博主还清理了一波浏览器缓存(;′⌒`),伤心)。
整体大概是这样:

找一个有代表性的请求,如上图红色框所示,将鼠标放在黄色箭头所指的地方,会浮现该请求timeline的详情,如下图所示

这张详情图中可谓是藏了不少有价值的信息呢( •̀ ω •́ )✧,注意看咯!

  1. Resource scheduling(红色圈圈3)
    第一部分首先是资源调度的时间。

红色圈圈告诉我们Queued at 214.06ms,在214.06 ms 时开始排队。排了0.57ms后(圈圈4),就Started at 214.63ms(圈圈2),也就是说资源调度结束后就开始处理该指令了。
据chrome官方解释,导致Queueing的原因有以下几种:

    • 请求已被渲染引擎推迟,因为该请求的优先级被视为低于关键资源(例如脚本/样式)的优先级。 图像经常发生这种情况。

    • 请求已被暂停,以等待将要释放的不可用 TCP 套接字。

    • 请求已被暂停,因为在 HTTP 1 上,浏览器仅允许每个源拥有六个 TCP 连接。

    • 生成磁盘缓存条目所用的时间(通常非常迅速)

    1. Connection Start(圈圈5)
      资源调度后就要开始建立链接了。

    圈圈6 Stalled代表 请求等待发送所用的时间,此时间包含第一部分中的第二步:查看浏览器缓存所用的时间,下图是刷新后一个“from disk cache”文件的详情图,可以很好地证明这一点。

    圈圈7 Proxy negotiation 代表与代理服务器协商的时间
    圈圈8 DNS Lookup 执行 DNS 查询所用的时间。 页面上的每一个新域都需要完整的往返才能执行 DNS 查询。对应于第一部分中的“应用层DNS解析域名”时间
    圈圈9 Initial Connection 初始化连接所用的时间,包括 TCP 握手/重试和协商 SSL 的时间。对应于第一部分的6和7
    圈圈10 SSL 完成SSL握手所需要的时间,对应于第一部分的5

    机智的你是不是已经发现建立链接的时间刚好对应于第一部分中的3-

    1. Request/Response
      通信链接建立后,就可以发送请求了,服务器处理后返回响应,客户端再根据响应内容下一步处理

    圈圈11 Request sent 发送请求的时间,这个是非常快的
    圈圈12 Waiting(TTFB)等待服务器初始响应所用的时间,也称为至第一字节的时间。 此时间将捕捉到服务器往返的延迟时间,以及等待服务器传送响应所用的时间。
    最后是 Content Download,接受(下载)响应数据所需要的时间。

    可以发现,详情图中的时间顺序和第一张网络模型示意图刚好一一对应,只有TCP/IP连接建立完成后,才能再建立SSL/TLS,最后才可用http协议请求/响应。

    到这里,想必你已经明白了一次完整的请求需要经历的步骤和耗费的时间,那么这些时间中有哪些是可以人为减少的呢?我们可以通过怎样的方式来减少这些时间来提高性能呢?
    看下面

    优化web性能的若干方法

    1. 减少http的请求数降低connection的时间
      由上面的详情图可以看到,如果本地没有缓存时,许多时间都花在了第二步Connection Start 建立链接上,只有少部分花在了Content Download上。那好,现在如果我们把两个文件合并成一个,就可以用一次请求代替之前的两次请求,理论上是不是就节约了一次Connection的时间了?合并的文件越多,节约的时间就越多。

    所以我们可以把图片,css,js等一些可以合并的文件尽量合并来减少http的请求数,降低总的connection的时间。
    细心的朋友可能会发现,有的请求是几乎没有connection的时间的,它们的详情图长这样:

    查看request header发现其中有一个这样的键值对:

    对,就是因为它,http的keep-alive可以在一定的时间内保证连接的可复用性,减少连接时间,但它的期限是有限的,可以看到network下的请求中还是有若干次请求是有connection的时间的,所以合并文件还是必须的。

    1. 压缩文件降低content download的时间
      上图中content download的时间不算多,只有20.47ms ,但它还是可以被减少的呀,如果我们压缩了该文件,在相同物理环境下,它会变得更少呀!能减少一点是一点嘛。

    而且在一些项目中,部分文件可达几百kb,这时content download的时间就不止20ms了,所以压缩后还是能减少不少时间的。
    所以项目上线前,像一些图片啦,css,js啦,能压缩的还是尽量压缩。

    1. 使用浏览器缓存
      把网站里面更新频率比较低的静态资源缓存在浏览器中,能够很好地提升速度。事实证明的确如此,( •̀ ω •́ )✧

    毕竟对于几百K的文件硬盘还是可以秒读的嘛。
    通过设置 http 头里的 Cache-Control 和 Expires 属性来设定浏览器缓存时间,另外还有 Etags 和 opcode 的缓存,根据具体情况进行选择吧

    1. 减少DNS查找
      DNS用于映射主机名和IP地址,一般一次解析需要20~120毫秒。浏览器会首先根据页面的主机名进行域名解析,在有ISP返回结果之前页面不会加载任何内容,所以减少DNS查找可以有效降低等待时间。为达到更高的性能,DNS解析通常被多级别地缓存,如由ISP或局域网维护的caching server,本地机器操作系统的缓存(如windows上的DNS Client Service),浏览器。IE的缺省DNS缓存时间为30分钟,Firefox的缺省缓冲时间是1分钟。 我们能做的是尽量减少一个页面的主机名,但要在浏览器最大并行下载数跟dns查找之间做权衡。根据雅虎的研究,最好将主机名控制在2-4个内。

    2. CDN加速
      CDN 的本质也属于缓存,内容分发网络,把数据缓存在里用户近的地方,使用户尽快的获取数据。

    CDN 通常是部署在网络运营商的机房,这些运营商为用户提供网络服务,因此用户请求的路由会优先到达 CDN 服务器,如果存在请求的资源的话,就直接返回,以最短路径返回响应,提高了用户访问速度,同时还能够为中心机房减轻压力。其原理如下:

    CDN 一般用来缓存静态资源,如css,Script脚本,静态页面,图片等,这些内容修改频率很低但是访问请求频率很高,因此放在 CDN 上能够很好的改善访问速度

    1. 减少重定向
      重定向是指将一个URL重新路由到另一个URL。浏览器会自动重定向请求到Location指定的URL上,也就说把之前的过程又重复一遍才能请求到真正的资源,会极大地降低用户体验。

    好了,到此本文的主要内容已全部完结了。
    本文是博主在学习过程中的一个总结,特此记录下来备忘,也希望对其他小伙伴有所帮助。其中如有叙述不当之处,还望您能指出,一起探讨~

    参考:(http://www.cnblogs.com/dojo-l...
    (http://seanlook.com/2015/01/0...
    (https://segmentfault.com/a/11...

    你可能感兴趣的

    二哲 · 2017年04月26日

    好文啊

    回复

    0

    谢谢鼓励o( ̄▽ ̄)ブ

    Claiyre 作者 · 2017年04月26日
    Ujued · 2017年05月01日

    嗯,比较系统

    回复

    沿蒤丶末路 · 2017年05月02日

    能具体教我怎么用就好了

    回复

    newdawn · 2017年06月12日

    好文,支持~

    回复

    载入中...