解读Puppeteer获取的Performance Timing对象各参数含义

你获取到的timing对象字段都属于Navigation Timing API，每个参数的具体含义如下：

导航起始相关 #

• navigationStart：浏览器启动当前页面导航流程的时间戳，是整个计时的起始基准点之一。
• redirectStart：页面存在重定向时，第一个重定向请求开始的时间戳；无重定向则为0。
• redirectEnd：最后一个重定向响应接收完成的时间戳；无重定向则为0。

域名解析与资源准备 #

• fetchStart：浏览器准备获取页面资源的时间戳，早于缓存检查和域名解析步骤。
• domainLookupStart：浏览器开始解析当前页面域名的时间戳。
• domainLookupEnd：浏览器完成域名解析的时间戳。

服务器连接阶段 #

• connectStart：浏览器开始与服务器建立TCP连接的时间戳。
• connectEnd：浏览器与服务器完成TCP连接（HTTPS页面包含SSL/TLS握手）的时间戳。
• secureConnectionStart：HTTPS页面中，浏览器启动SSL/TLS握手的时间戳；HTTP页面则为0。

请求与响应阶段 #

• requestStart：浏览器开始向服务器发送请求的时间戳。
• responseStart：浏览器收到服务器响应第一个字节的时间戳。
• responseEnd：浏览器接收完服务器响应所有字节的时间戳。

DOM处理流程 #

• domLoading：浏览器开始解析HTML、构建DOM树的时间戳，对应document.readyState变为loading的时刻。
• domInteractive：浏览器完成DOM树解析的时间戳，此时DOM已可访问，但外部资源可能未加载完成，对应document.readyState变为interactive的时刻。
• domContentLoadedEventStart：浏览器触发DOMContentLoaded事件的起始时间戳，此时DOM解析完成，同步脚本已执行完毕。
• domContentLoadedEventEnd：DOMContentLoaded事件及其所有回调函数执行完成的时间戳。
• domComplete：浏览器完成DOM构建且所有页面资源加载完毕的时间戳，对应document.readyState变为complete的时刻。

页面加载完成阶段 #

• loadEventStart：浏览器触发load事件的起始时间戳。
• loadEventEnd：load事件及其所有回调函数执行完成的时间戳。

前页面卸载阶段 #

• unloadEventStart：若当前页面是从其他页面导航而来，这是前页面unload事件开始的时间戳；首次导航则为0。
• unloadEventEnd：前页面unload事件及其回调执行完成的时间戳；首次导航则为0。

额外说明：timeOrigin是整个性能计时的基准时间原点，timing中的所有时间值都是基于该原点的绝对时间戳，可用于计算各个阶段的相对耗时。

内容的提问来源于stack exchange，提问作者Caesar