问题标签 [resource-timing-api]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1203 浏览

html - 为什么资源计时API中没有Timing-Allow-Origin就无法访问网络计时数据

我正在阅读有关资源计时 API的这篇文章,但我无法理解以下限制背后的原因:

从第三方获取的资源必须提供额外的 HTTP 标头(Timing-Allow-Origin: *)以允许站点收集详细的网络计时数据。如果不存在标头,则唯一可用的数据是请求的总持续时间。

虽然我可以很容易地理解阻塞没有Access-Control-Allow-Origin标头的请求背后的原因,但我很难理解为什么不应该获取有关没有Timing-Allow-Origin标头的计时信息。

0 投票
1 回答
701 浏览

javascript - 为什么 PerformanceResourceTiming 接口值与浏览器值不同?

我编写了一个在域上运行并从其他各种域(第三方资源)获取图像的脚本。

我正在尝试对window.performance.getEntriesByType('resource')事物进行一般健康检查。看来,由于这些资源位于其他域上,因此响应需要Timing-Allow-Origin在响应标头中设置才能通过window.performance.getEntriesByType().

这是真的?

此外,当我运行我的脚本时,Chrome 浏览器确实会返回有用的信息。事实上,如果我能以编程方式获取这些数据,我就可以使用它。但是 Chrome 显示的数据和返回的数据window.performance.getEntriesByType()不同。

我附上了一个屏幕截图,它显示了 Chrome 加载资源的有用时间分解。由于性能条目对象的数据不匹配。

例如,查看右侧时序图中的 DNS Lookup 时间,然后查看性能条目对象中的 domainLookupStart 和 domainLookupEnd 值。这些值彼此不匹配。

为什么会出现差异?如何获取 Chrome 的数据?如何从性能条目对象中获取 Chrome 显示的内容?

谢谢!

Chrome 资源加载时序图

0 投票
1 回答
625 浏览

javascript - 获取给定 URL 的 iframe DOM 元素

我正在使用 w3c 资源计时 API。window.performance.getEntriesByType("resource"); 这给出了包括 iframe 在内的资源列表。但是,要获取嵌入式 iframe 的资源,我需要获取 iframe 的性能对象,这需要我引用其 DOM 节点/元素。

问题是,如果我只知道 iframe 的 URL,如何获取 iframe 的节点引用,这就是我所知道的(与上面的代码示例不同,我不会知道 iframe 的 ID 或名称)。

除了遍历文档的元素然后过滤 iframe 并将 iframe 的 URL 与 Resource Timing API 返回的内容进行比较之外,是否有一种简单的方法来获取 iframe 的 DOM 节点(给定 iframe 的 URL)?

0 投票
1 回答
978 浏览

javascript - 如何获取网页资源的大小,如 javascript、css、图像等

w3c 资源计时 API提供了一种机制来查找加载资源(如 .js、.css、.gif、字体等)的计时细节。但是,当前的实现尚未实现返回资源大小(http:// /www.w3.org/TR/resource-timing/#performanceresourcetiming transferSize)。

直到浏览器供应商实现属性“transferSize”之前,应用程序开发人员或工具供应商如何确定给定资源的大小?

0 投票
1 回答
1367 浏览

javascript - 使用 JavaScript 获取资源的传输大小

我正在尝试衡量真实网站用户的页面加载性能。为了更好地理解数据,我想根据缓存是否已准备好对数据进行分段。

所以我不需要在加载资源之前知道它是否在缓存中。事后衡量就足够了。

至少在 Chrome 和 Firefox 中,开发工具“网络”选项卡有一个显示传输大小的列。是否可以使用 JavaScript 获取此信息?

Resource Timing API 似乎对这种情况有一个规定(“transferSize如果在本地检索资源,则必须返回 0”),但还没有浏览器实现它

开发工具显示此信息的事实让我想知道它是否可以通过某种方式访问​​。有任何想法吗?

0 投票
2 回答
270 浏览

javascript - 哪个版本的 Chrome 支持 window.performance.clearResourceTimings 以及替代方案是什么

从什么时候开始 chrome 支持 window.performance.clearResourceTimings 如果它不可用,还有什么替代方法?我在发行说明或 MDN 中找不到任何详细信息。有一个 clearMarks 功能,但它不会重置项目列表。

0 投票
1 回答
28 浏览

linux - Ubuntu Linux 的资源跟踪库?

我想在 Ubuntu 集群上构建一个简单的任务调度程序,所以我需要一个资源跟踪库,它为其他用户级应用程序公开一个 API。

我已经搜索了一段时间,但我发现的都是命令行工具。

所以我想知道是否有任何适用于 Ubuntu Linux 的可用资源跟踪库?

非常感谢。

0 投票
1 回答
1042 浏览

javascript - 如何在 AngularJS 中测量请求(XHR)持续时间?

我正在尝试为 AngularJS (1.5.x) 实现一个拦截器,它可以测量每个 api 调用并将每个调用的持续时间发送到 Google Analytics。

我从一个虚拟实现开始,只使用new Date().getTime()

乍一看,它看起来不错,但比较在 Chrome 的 Networks 选项卡中收集的请求的持续时间,我注意到在我的代码中收集的请求总是比 Chrome 收集的要高(有时很多!)。

我想到的另一个想法是使用User Navigation API,所以我将代码更改为:

.. 但我再次收到与Chrome收集的结果不同的结果,甚至与使用new Date().getTime()

我究竟做错了什么?我该怎么做才对?也许是资源计时 API?AngularJS 确实强加了一点。

我无法使用用户导航 API 方法 -window.performacne.getEntries()查找我的请求持续时间,因为我无法识别特定请求。每个请求的参数在那里不可用,我有很多相同的 API 调用,但参数不同。

我应该装饰 AngularJS 使用的原生 XHR 请求吗?

0 投票
1 回答
140 浏览

typescript - 性能接口中缺少 onresourcetimingbufferfull 事件

资源计时 API 有类似 onresourcetimingbufferfull 之类的事件,当达到 150 个(默认情况下)资源的限制时会触发该事件。 https://www.w3.org/TR/resource-timing-1/#extensions-performance-interface

lib.d.ts 文件https://github.com/Microsoft/TypeScript/blob/master/lib/lib.d.ts中的性能接口没有定义 onresourcetimingbufferfull 事件。有什么办法可以做到这一点?

0 投票
1 回答
1503 浏览

javascript - 并行下载 HTML 中的 JS 文件

我有一个看起来像这样的 HTML 文件

1.js 只包含一行

默认情况下,Chrome 中的资源缓冲区大小为 150。

但是,当我使用 Resource Timing API 查看所有资源时,资源的长度不是 200。它在 150 到 200 之间随机变化。

我知道为什么会这样。因为,Chrome 会尝试并行下载资源,因此它会在 Resource Timing API 中注册资源。

1.js 中的片段

实际上稍后执行。因此,一些更多的资源被添加到资源时序缓冲区中。但是,并非所有这些都被添加。

有没有办法停止资源的并行下载?首先下载第一个资源,让代码执行,然后继续并行下载剩余资源。