资源计时API简介

最新推荐文章于 2021-08-05 11:18:29 发布

dingshi7798

最新推荐文章于 2021-08-05 11:18:29 发布

阅读量102

点赞数

文章标签： javascript 移动开发 ViewUI

SitePoint最近发表了一些有关性能的好文章。特别是，克雷格·巴克勒（Craig Buckler）在2013年撰写了一篇题为《平均网页权重增加32％》的文章，并发表了另一篇文章，探讨了一些减轻网站重量的轻松方法。

但是，提高我们网站和应用程序的速度不仅仅是减少JavaScript文件并使用图像压缩器的问题。在许多情况下，我们必须处理外部资源（来自CDN的库，来自YouTube的视频，来自Flickr的图像等）或需要进行准确衡量的内部资源，以建立能够减缓页面加载速度的资源。

之前，我已经介绍了一些可以帮助测试网站性能的API。例如，高分辨率时间API和用户计时API 。在本文中，我将向您介绍该类别中的另一个API： Resource Timing API 。

什么是资源计时API？

Resource Timing API使您可以收集与文档中资源有关的完整时序信息。它使您能够测量用户延迟，这对于基准网页至关重要。该API是W3C候选推荐书，因此我们可以确定大部分重要功能都已锁定，但将来可能会对规范进行较小的更改。

使用资源计时API，我们可以检索和分析页面上每个资源的所有网络计时数据的详细资料。我们将在下一部分中介绍这些数据。目前，重要的是要了解此API如何帮助我们跟踪页面资源的性能，并确定需要优化的资源数量和资源。

现在我们知道了这个API是什么，让我们深入研究其功能。

方法，属性和事件

资源计时API通过window对象的performance属性公开。我们可以使用getEntriesByType()方法检索为每个资源收集的信息。如果您听起来很熟悉，那是因为它与User Timing API使用的方法相同。不同之处在于，要检索有关这些资源的信息，我们必须将字符串resource传递给getEntriesByType() 。

getEntriesByType()方法返回PerformanceResourceTiming对象的列表，这些对象扩展了PerformanceEntry接口。因此，这些对象中的每一个都公开以下继承的属性：

name –所请求资源的解析URL
entryType –值始终等于resource
startTime –用户代理开始将资源排队以进行提取之前的时间
duration – responseEnd和startTime之间的差

除了这些属性之外，资源计时API还公开了另一个名为initiatorType属性。如果该请求已经由页面上的元素初始化，其值等于所述标记的名称（例如img为<img> script对<script>等等）。其他可能的值是css （对于使用url()语法下载的CSS资源-例如background: url(...) ）和xmlhttprequest （对于XMLHttpRequest对象）。

每个PerformanceResourceTiming对象都提供以下特定的只读属性：

initiatorType
redirectStart
redirectEnd
fetchStart
domainLookupStart
domainLookupEnd
connectStart
connectEnd
secureConnectionStart
requestStart
responseStart
responseEnd

下图提供了这些属性的图形表示。从不同来源获取资源时，带下划线的内容可能不可用：

说明由PerformanceResourceTiming接口定义的时序属性

从第三方获取的资源必须提供一个额外的HTTP标头（ Timing-Allow-Origin: * ），以允许站点收集详细的网络时序数据。如果标题不存在，则唯一可用的数据是请求的总持续时间。这似乎是使用此API的重要限制。但是，正如Ilya Grigorik在他的文章《使用Resource Timing API测量网络性能》中所写的那样，一些网站（例如Google，Facebook和Disqus）已经实现了标头来提供此信息。

如我们所见，资源计时API提供了许多属性，我们可以阅读这些属性以了解每种资源所花的时间。但是，它也提供两种方法： clearResourceTimings()和setResourceTimingBufferSize() 。前者清除用于存储PerformanceResourceTiming资源当前列表的缓冲区。

后者设置缓冲区中存储的最大对象数。它接受一个整数来指定限制。如果未显式调用该方法，则规范会规定用户代理应至少存储150个PerformanceResourceTiming资源。当达到存储资源的限制时，API会触发一个名为onresourcetimingbufferfull的事件。

现在，我们已经了解了公开的属性，方法和事件，让我们看看有多少浏览器支持此API。

浏览器兼容性

该API的浏览器支持在台式机上很不错，因为它已在Chrome 25 +，Internet Explorer 10+和Opera 15+中实现。在移动设备上，情况与添加最新版本的Android浏览器非常相似。

测试浏览器是否支持此API有点棘手，因为我们必须测试几个条件。首先，我们必须测试window对象的performance属性是否存在。然后，我们必须测试getEntriesByType()方法是否存在以及它是否可以收集资源。可以通过检查对getEntriesByType('resource')的调用是否返回数组来验证此最后一个条件。

将此描述转换为代码将产生以下代码段：

if ( !('performance' in window) ||
    !('getEntriesByType' in window.performance) ||
    !(window.performance.getEntriesByType('resource') instanceof Array)
  ) {
  // API not supported
} else {
   // API supported. Hurray!
}

制作演示

在本部分中，我们将构建一个简单的演示，使我们可以查看此API的实际使用情况及其提供的信息。该演示加载了两个资源：通过<img>标签包含的来自SitePoint.com的图像，以及通过<script>标签包含的来自Google CDN的jQuery库。

虽然两者都是外部资源，但后者Timing-Allow-Origin: *标头使我们能够收集时序信息。这意味着，即使它是外部资源，我们也将获得API公开的所有信息。

有了标记之后，我们要做的第一件事就是测试浏览器是否支持Resource Timing API。如果不支持该API，我们将显示消息“不支持该API”。如果浏览器实现了API，我们将侦听器附加到window对象的load事件。这样，我们确保在加载所有资源后执行任何操作。在处理程序内部，我们会动态创建一个列表，以显示通过API获得的度量。

我们的演示页面将使用以下HTML：

<span id="rt-unsupported" class="hidden">API not supported</span>

  <div>
     <h2>Test 1 - jQuery</h2>

     <ul id="script-list">
     </ul>
  </div>
  <div>
     <h2>Test 2 - Image</h2>

     <img src="http://www.sitepoint.com/wp-content/themes/sitepoint/assets/svg/sitepoint.svg" />
     <ul id="img-list">
     </ul>
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

这是JavaScript，它将显示一些我们可以检查的数据，这将向我们展示API可以做什么：

if ( !('performance' in window) ||
       !('getEntriesByType' in window.performance) ||
       !(window.performance.getEntriesByType('resource') instanceof Array)
     ) {
     document.getElementById('rt-unsupported').classList.remove('hidden');
  } else {
     window.addEventListener('load', function() {
        var resources = window.performance.getEntriesByType('resource');
        for(var obj in resources) {
           var list = '';
           for(var properties in resources[obj]) {
              list += '<li>' + properties + ': <span class="value">' + resources[obj][properties] + '</span></li>';
           }
           document.getElementById(resources[obj].initiatorType + '-list').innerHTML = list;
        }
     });
  }

您可以在此处实时查看代码。