首页 > web前端 > js教程 > 资源定时API简介

资源定时API简介

Lisa Kudrow
发布: 2025-02-21 09:51:10
原创
781 人浏览过

资源正时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
  • initiatorTypeimgscriptcssxmlhttprequest
  • redirectStartredirectEndfetchStart,,,,domainLookupStart。 这些时序阶段的视觉表示如下:domainLookupEnd connectStart connectEndsecureConnectionStart requestStart responseStart responseEnd API用法和浏览器兼容性:
  • >API支持的测试需要检查是否存在

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

    if (!('performance' in window) ||
        !('getEntriesByType' in window.performance) ||
        !(window.performance.getEntriesByType('resource') instanceof Array)) {
        // API not supported
    } else {
        // API supported
    }
    登录后复制
    >可以通过加载资源(例如,图像和脚本)创建一个基本的演示API功能,然后在页面加载时,通过

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

    结论:

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

    常见问题(常见问题解答):

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

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

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板