chrome如何分析页面加载时间

以chrome为例，开发者模式中跟页面加载时间相关的是network面板。

network 面板的 DOMContentLoaded和load

打开Network面板后，刷新页面，面板底部有这三个时间：

• finish：页面最后一个请求截止的时间，如果页面加载完成后，触发了ajax请求，那么该时间会变更。
• DOMContentLoaded：dom内容加载并解析完成的时间，即页面白屏时间
• load：页面所有的资源（图片、音频、视频等）加载完成的时间。

当页面的初始的标记被解析完成时，会触发DOMContentLoaded，它在Network面板上的两个位置显示：

• 在Overview窗格中的蓝色垂直线表示这个事件。
• 在Summary窗格中，可以查看这个事件的确切耗时。

当页面完全加载时触发load事件，它显示在三个地方：

• 在Overview窗格的红色垂直线表示这个事件。
• 在Request Table中的红色垂直线也表示这个事件。
• 在Summary中，可以查看该事件的确切时间。

查看网络时序

点击Timing选项卡可以查看单个资源的请求生命周期的明细分类。

• Queuing 队列
• Stalled 停滞
• DNS lookup DNS查找
• initial connection 初始连接
• SSL handshake SSL握手
• Request sent 请求发送
• Waiting 等待，具体指到开始下载第一个字节的时间（TTFB：time for first byte）
• Content Download 内容下载

资源加载时序

所有网络请求都被视为资源，当它们通过网络检索时，分为不同的生命周期。

一个完整请求生命周期的主要阶段如下

• Redirect 重定向
  • 立即开始 startTime
  • 如果发生重定向，redirectStart也会开始计时
  • 如果重定向发生在此阶段结束，那么redirectEnd被采用
• App Cache 应用程序缓存
  • 如果浏览器有缓存，将采用fetchStart时间
• DNS
  • domainLookupStart 记录DNS请求开始时间
  • domainLookupEnd记录DNS请求结束的时间
• TCP
  • connectStart 记录开始连接到服务器的时间
  • 如果用了TLS或者SSL，secureConnectionStart记录开始连接时间
  • connectEnd记录连接完毕时间
• Request 请求
  • requestStart记录请求发生到服务器的时间
• Response 响应
  • responeseStart记录最开始的响应时间
  • responseEnd记录响应结束时间

timing面板信息详解

• Queuing 排队 如果一个请求排队，则表明：
  • 请求被渲染引擎推迟，因为它比关键资源（如脚本/样式）的优先级低。例如，images。
  • 这个请求被搁置，在等待一个即将被释放的不可用的TCP socket
  • 这个请求被搁置，因为浏览器限制。在HTTP 1协议中，每个源上只能有6个TCP连接。
  • 正在生成磁盘缓存条目（通常非常快）
• Stalled/Blocking 停止/阻塞
  • 发送请求之前的等待时间。它可能因为进入队列的任意原因而被阻塞。这个时间包括代理协商的时间。
• Proxy Negotiation 代理协商
  • 与代理服务器连接协商花费的时间
• DNS Lookup DNS查找
  • 执行DNS查找所用的时间。页面上的每个新域都需要完整的往返（roundtrip）才能进行DNS查找。
• Initial Connection/Connecting 初始连接/连接
  • 连接连接所需的时间，包括TCP握手/重试和协商SSL。
• SSL
  • 完成SSL握手所用的时间
• Request Sent/Sending 请求已经发送/正在发送
  • 发出网络请求所花费的时间，通常是几分之一毫秒
• Waiting（TTFB） 等待
  • 等待初始响应所花费的时间。这个时间包含：等待服务器传递响应花费的时间、捕获到服务器发送数据的延迟时间
• Content Download/Downloading 内容下载/下载
  • 接收响应数据所花费的时间：从接收到第一个字节开始，到下载完最后一个字节结束。

Network面板诊断网络问题

1. 排队或者阻塞：很多个请求队列被阻塞。这表示单个客户端检索的资源太多。在HTTP 1.0/1.1连接协议中，Chrome限制每个域名最多执行6个TCP连接。

   • 解决方法：分域，即用多个字域名提供服务资源，将资源拆分到多个子域中，均匀分配。
   • HTTP2，TCP连接支持多路复用，消除了HTTP 1的6个连接限制，并且可以通过单个连接同时传输多个资源。

2. 接收到第一个字节的时间很慢：很多绿色。

   • 解决方法：1、尽量减少网络连接。理想情况下，在本地托管应用程序（部署在本地）。2、优化应用程序的响应速度

3. 加载缓慢：很多蓝色。

   • 解决方法：减少响应的字节。例如，优化图片。

参考：
https://www.html.cn/doc/chrome-devtools/network-performance/resource-loading/
https://www.jianshu.com/p/24b93b13e5a9