获取 Web 浏览器开始加载的开始时间并获取资源的 HTTP 请求的开始时间

获取 Web 浏览器开始加载的开始时间并获取资源的 HTTP 请求的开始时间

当我在谷歌上搜索时,我看到其他网站上有很多帖子问这个问题,但没有解决方案。

我正在尝试弄清楚运行 NGINX 的 Web 服务器需要多长时间才能从浏览器接收请求,服务器本身一旦表示收到特定的 http 请求,就会在其日志中报告仅用 6 毫秒即可完成,但从浏览器来看需要 11 多秒。我需要测量从向服务器发出 HTTP 请求到服务器接收请求所用的时间来解决我的问题。

Google Chrome 开发者工具中没有任何地方可以告诉我网站开始加载的时间戳 - 每个后续 HTTP 请求都会说明自页面加载开始以来经过了多少秒或毫秒。如果我知道页面何时开始加载,我可以使用 devtools 瀑布图手动进行计算以找出 API 请求的时间戳。

答案1

有一个可以在开发者工具控制台中使用的 chrome API:

要在控制台中获取网页浏览器加载开始时间,您可以运行

performance.timeOrigin
// => 1551815483060.8398

将该值转换为可读的时间戳:

new Date(performance.timeOrigin).toUTCString()
// => "Tue, 05 Mar 2019 19:51:23 GMT"

接下来,您需要获取已加载资源的开始时间,要查看已加载的所有资源,以下命令将在控制台中列出它们

performance.getEntriesByType('resource')
// => [] 

(将返回已加载资源的数组),该数组不会像我列出的那样为空,它将具有startTime自页面加载开始以来 MS的属性

performance.getEntriesByType('resource')[5].startTime
// => 2820.3300000022864

然后,你可以将这两个值加在一起,以获得浏览器开始向服务器发出请求时的官方日期戳

new Date(performance.timeOrigin + performance.getEntriesByType('resource')[5].startTime).toUTCString()
// => "Tue, 05 Mar 2019 19:51:25 GMT"

有关性能接口的详细信息,请参阅以下文档

相关内容