3.8.浏览器网络

liucheng58
328 阅读6分钟

1、浏览器端网络流程

HTTP 是一种允许浏览器向服务器获取资源的协议，是 Web 的基础，通常由浏览器发起请求，用来获取不同类型的文件，例如 HTML 文件、CSS 文件、JavaScript 文件、图片、视频等

image.png

  1. 构建请求 -> 浏览器构建请求行信息

  2. 查找缓存 -> 浏览器会先在浏览器缓存中查询是否有要请求的文件

  3. 准备 IP 地址和端口 ->

    1. HTTP 的内容是通过 TCP 的传输数据阶段来实现的;
    2. 负责把域名和 IP 地址做一一映射关系 -> 域名映射为 IP 的系统就叫做“域名系统”，简称 DNS（Domain Name System）
    3. 浏览器提供了 DNS 数据缓存服务; 某个域名已经解析过了，那么浏览器会缓存解析的结果，以供下次查询时直接使用，这样也会减少一次网络请求

  4. 等待 TCP 队列 -> Chrome 有个机制，同一个域名同时最多只能建立 6 个 TCP 连接

  5. 建立 TCP 连接 -> 浏览器通过 TCP 与服务器建立连接 3次握手

  6. 发送 HTTP 请求 -> 浏览器会向服务器发送请求行，它包括了请求方法、请求 URI（Uniform Resource Identifier）和 HTTP 版本协议、请求体等

  7. 返回请求 ->

    1. 服务器会返回响应行，包括协议版本和状态码
    2. 服务器随同响应向浏览器发送响应头 -> 响应头包含了服务器自身的一些信息，比如服务器生成返回数据的时间、返回的数据类型（JSON、HTML、流媒体等类型），以及服务器要在客户端保存的 Cookie 等信息
    3. 服务器继续发送响应体的数据 -> 通常，响应体就包含了 HTML 的实际内容

  8. 断开连接 -> 通常情况下，一旦服务器向客户端返回了请求数据, 它就要关闭 TCP 连接

    1. 保持 TCP 连接可以省去下次请求时需要建立连接的时间，提升资源加载速度
    Connection:Keep-Alive
复制代码

  9. 重定向 ->

    1. 响应行返回的状态码是 301，状态 301 就是告诉浏览器，我需要重定向到另外一个网址
    2. 需要重定向的网址正是包含在响应头的 Location 字段中，接下来，浏览器获取 Location 字段中的地址

2、network中timing

image.png

  • Queueing： 请求文件顺序的排序。
    浏览器是有线程限制的，发请求也不能所有的请求同时发送，会将请求加入[队列]中（Chrome的最大并发连接数是6）。此参数表示从添加到待处理队列，到实际开始处理的时间间隔标示。

  • Stalled（阻塞）： 浏览器得到要发出这个请求的指令，到请求可以发出的等待时间，一般是代理协商、以及等待可复用的TCP连接释放的时间，不包括DNS查询、建立TCP连接等时间等。浏览器对同一个主机域名的[并发]连接数有限制，因此如果当前的连接数已经超过上限，那么其余请求就会被阻塞，等待新的可用连接；此外脚本也会阻塞其他组件的下载；

优化措施：
1、将资源合理分布到多台主机上，可以提高并发数，但是增加并行下载数量也会增大开销，这取决于带宽和CPU速度，过多的并行下载会降低性能；
2、脚本置于页面底部；

  • DNS Lookup： 请求某域名下的资源，浏览器需要先通过DNS解析器得到该域名服务器的IP地址。在DNS查找完成之前，浏览器不能从主机名那里下载到任何东西。DNS查询的时间，当本地DNS缓存没有的时候，这个时间可能是有一段长度的，但是比如你一旦在host中设置了DNS，或者第二次访问，由于浏览器的DNS缓存还在，这个时间就为0了。

优化措施：
1、利用DNS缓存（设置TTL时间）；
2、利用Connection:keep-alive特性建立持久连接，可以在当前连接上进行多个请求，无需再进行域名解析；

  • Initial connection： 建立TCP连接的时间，就相当于客户端从发请求开始到TCP握手结束这一段，包括DNS查询+Proxy时间+TCP握手时间。

  • SSL（包含于HTTPS连接中）： http是超文本传输协议，以明文方式发送内容，不提供任何方式的数据加密，如果被不法分子截取浏览器和服务器之间的传输报文，会获取其中的信息。
    https 是安全套接字层超文本传输协议，就是在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。
    因此建立HTTPS连接的时间相当于三次握手的时间+SSL时间。

  • Request sent（发送请求）： 发送HTTP请求的时间（从第一个字节发出前到最后一个字节发出后的时间）

优化措施：
1、减少HTTP请求，可以使用CSS Sprites、内联图片、合并脚本和样式表等；
2、对不常变化的组件添加长久的Expires头（相当于设置久远的过期时间），在后续的页面浏览中可以避免不必要的HTTP请求；

  • Waiting(TTFB) ： 请求发出后，到收到响应的第一个字节所花费的时间(Time To First Byte)，发送请求完毕到接收请求开始的时间；通常是耗费时间最长的。从发送请求到收到服务器响应的第一字节之间的时间，受到线路、服务器距离等因素的影响。
    注意：网页重定向越多，TTFB越高，所以要减少重定向

优化措施：
使用CDN，将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求，提高响应速度；

  • Content Download（下载）： 收到响应的第一个字节，到接受完最后一个字节的时间，就是下载时间。

优化措施：
1、通过条件Get请求，对比If-Modified-Since和Last-Modified时间，确定是否使用缓存中的组件，服务器会返回“304 Not Modified”状态码，减小响应的大小；
2、移除重复脚本，精简和压缩代码，如借助自动化构建工具grunt、gulp等；
3、压缩响应内容，服务器端启用gzip压缩，可以减少下载时间；

欢迎关注我的前端自检清单，我和你一起成长

avatar
文章
阅读
粉丝