资源定时API简介

资源正时API：深入研究Web性能测量

>本文探讨了资源正时API，这是一种强大的工具，用于收集有关网页加载资源的详细计时信息。 了解此数据对于优化网页性能和降低用户延迟至关重要。

>

密钥概念：

• 全面的时机数据：
• >通过访问：window.performance>通过使用参数'resource'。 performancewindow>对象：getEntriesByType()
方法返回一个
• 对象的数组，每个详细介绍了一个资源的加载过程。 PerformanceResourceTiming广泛的浏览器支持： API在主要浏览器（Chrome，Internet Explorer，Opera等）中享有良好的支持。但是，需要验证支持。 getEntriesByType() PerformanceResourceTiming第三方资源注意事项：与第一方和第三方资源一起使用时，第三方资源的详细计时数据需要 http标头。 没有它，只有总持续时间可用。
>
• 了解数据：
• 每个对象都提供了许多属性，包括：> Timing-Allow-Origin: *

：资源的URL。

：浏览器开始获取资源之前的时间。

>

PerformanceResourceTiming：加载资源所花费的总时间。

• ：指示启动资源请求的元素（例如，name，
，
• ，startTime，
）。
• 其他属性的详细信息特定阶段：，duration，
，
• ，initiatorType，img，script，css，xmlhttprequest，
，
• ，redirectStart，redirectEnd，fetchStart，，，，domainLookupStart。 这些时序阶段的视觉表示如下：domainLookupEnd connectStart connectEndsecureConnectionStart requestStart responseStart responseEnd API用法和浏览器兼容性：
>API支持的测试需要检查是否存在

>和window.performance，并验证该window.performance.getEntriesByType()返回数组。 此检查的简单代码片段是：window.performance.getEntriesByType('resource')

<code class="language-javascript">if (!('performance' in window) ||
    !('getEntriesByType' in window.performance) ||
    !(window.performance.getEntriesByType('resource') instanceof Array)) {
    // API not supported
} else {
    // API supported
}</code>

>可以通过加载资源（例如，图像和脚本）创建一个基本的演示API功能，然后在页面加载时，通过

>对象迭代以显示收集的数据。 PerformanceResourceTiming

结论：

>资源正时API提供了可靠的机制，用于详细的性能分析。通过识别资源加载中的瓶颈，开发人员可以显着提高网站速度和用户体验。尽管浏览器的支持通常很好，但在依靠此API之前测试兼容性至关重要。 还应考虑有关第三方资源的限制。

常见问题（常见问题解答）：

> 原始文本中的常见问题解答部分在很大程度上保持不变，并提供了有价值的其他信息。 建议在此处包含它以使其完整。 （常见问题解答部分太长在这里复制，但应直接从输入文本复制。）>

以上是资源定时API简介的详细内容。更多信息请关注PHP中文网其他相关文章！