详解 PerformanceResourceTiming API，咦，这货真的干！

最新推荐文章于 2022-07-24 05:20:58 发布

「已注销」

最新推荐文章于 2022-07-24 05:20:58 发布

阅读量1.4k

点赞数 1

分类专栏： javascript 浏览器性能优化文章标签： javascript

本文链接：https://blog.csdn.net/qq_37969897/article/details/106948947

版权

网页开发每天与浏览器相伴，一切展示来自于各类资源的加载。性能优化一定要有衡量指标，所谓“一切有据（数据）可循”，那么 PerformanceResourceTiming 则是你不容错过的一个官方 API。

我们从不生产官方文档，我们只做官方文档的搬运工。

本瓜倾情翻译、适量批注、莞尔小结，以供分享，烦请指正。撰文不易，点赞👍鼓励！

原文：https://www.w3.org/TR/resource-timing/#dom-performanceresourcetiming

前言

介绍

用户延迟是 Web 应用程序的重要质量基准。尽管基于 JavaScript 的机制可以为应用程序中的用户延迟测量提供全面的工具，但在许多情况下，它们无法提供完整的端到端延迟剪影。本文档介绍了PerformanceResourceTiming 接口：允许 JavaScript 收集与文档资源相关的完整定时信息。

例如，以下演示了简单通过 JavaScript 来尝试获取资源所花费的时间的方法：

<!doctype html>
<html>
  <head>
  </head>
  <body onload="loadResources()">
    <script>
        function loadResources()
        {
           var start = new Date().getTime();
           var image1 = new Image();
           var resourceTiming = function() {
               var now = new Date().getTime();
               var latency = now - start;
               alert("End to end qresource fetch: " + latency);
           };

           image1.onload = resourceTiming;
           image1.src = 'https://www.w3.org/Icons/w3c_main.png';
        }
    </script>
    <img src="https://www.w3.org/Icons/w3c_home.png">
  </body>
</html>

尽管此脚本可以获取资源所花费的时间，但是它不能分解在各个阶段花费的时间。此外，脚本无法轻松获取标记中描述的资源所花费的时间。

为了满足有关用户体验的完整信息的需求，本文档将介绍PerformanceResourceTiming。此接口允许 JavaScript 在应用程序中提供完整的客户端延迟测量。使用此接口，可以修改前面的示例以测量用户感知的资源加载时间。

<!doctype html>
<html>
  <head>
  </head>
  <body onload="loadResources()">
    <script>
       function loadResources()
       {
          var image1 = new Image();
          image1.onload = resourceTiming;
          image1.src = 'https://www.w3.org/Icons/w3c_main.png';
       }

       function resourceTiming()
       {
           var resourceList = window.performance.getEntriesByType("resource");
           for (i = 0; i < resourceList.length; i++)
           {
              if (resourceList[i].initiatorType == "img")
              {
                 alert("End to end resource fetch: "+ resourceList[i].responseEnd - resourceList[i].startTime);
              }
           }
       }
    </script>
    <img id="image0" src="https://www.w3.org/Icons/w3c_home.png">
  </body>
</html>

文档规范

ps: 此段为撰文规范说明，可选跳过。

除标记、指南，图表，示例和注释为非规范。本规范中的所有其他内容都是符合规范标准的。

关键字may，must，must not 和 should 的解释应如 RFC2119 中所述。

对于一部分算法命令应当做如下要求：（例如 “删除任何前导空格字符” 或 “返回 false 并中止这些步骤” ）应使用关键字的含义（“必须”，“应”，“may” 等）来介绍算法。

一些对属性，方法或对象的一致性表述要求，应类比于对客户端的要求。

只要最终结果是等效的，可以用任何方式表述算法或特定步骤的一致性要求。（本规范中定义的算法旨在于遵循标准，而非标新立异。）

如 Web IDL 规范中所述，此规范中的 IDL 片段必须按照符合 IDL 片段的要求进行解释。WebIDL

表述解释

ps: 此段对一些文档表述上可能存在的歧义作出了解释，可选跳过。

有时使用 Foo 实际上是指接口的构造 “a Foo object”，而不是指精确意义上的“Foo 接口对象的实现”。

表述 DOM 用于表示Web 应用程序中的脚本的 API 集，并且不一定表示实际上的 Document 对象或 NodeDOM 规范中定义的任何其他对象。DOM

DOM 属性正在获取值时被称为“正在获取值”，分配新值时被称为“正在设置”。

由于 JavaScript 更为广为人知，因此表述 JavaScript 用于表示 ECMA262，而不是官方表述 ECMAScript。ECMA-262

在整个说明书中，术语 “ 资源 ” 用于指代元素和任何其他用户主动获取的。例如，资源可能源自XMLHttpRequest 对象，HTML元素

最低0.47元/天解锁文章

「已注销」

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
详解 PerformanceResourceTiming API，咦，这货真的干！

网页开发每天与浏览器相伴，一切展示来自于各类资源的加载。性能优化一定要有衡量指标，所谓“一切有据（数据）可循”，那么 PerformanceResourceTiming 则是你不容错过的一个官方 API。我们从不生产官方文档，我们只做官方文档的搬运工。本瓜倾情翻译、适量批注、莞尔小结，以供分享，烦请指正。撰文不易，点赞????鼓励！原文：https://www.w3.org/TR/resource-timing/#dom-performanceresourcetiming前言介绍用户延迟是
复制链接

扫一扫