Resource Timing api简介

为了能够更加精准的衡量网站和网页应用的性能，越来越多有用的api被添加到浏览器中，比如说High Resolution Time API以及User Timing API。在本文中，我们将学习另一个用于衡量网站性能的API：Resource Timing API。

什么是Resource Timing API？

Resource Timing API允许我们获取一个文档中与某个资源相关的所有时间信息。使用它，你可以轻松的衡量用户延迟，这对于一个网页的基准测试来说至关重要。目前，这个API已经成为了W3C提案推荐中的一部分，因此它正式成为W3C标准已经是板上钉钉的事情，但是在未来，它的用法还可能有一些小小的变化。

使用Resource Timing API，我们可以提取和分析在页面中和每一个资源所相关的网络时间数据。在接下来的部分中，我们将会详细的讲述如何获取这些数据。目前来说，最重要的是理解这个API可以怎样帮助我们追踪页面资源的性能，以及帮助我们决定页面中的哪一个资源需要优化。

现在，我们已经指导者这个API的作用，下面我们会开始深入了解关于这个API的一些细节。

方法，属性，以及事件

Resource Timing API通过window对象的performance属性暴露出来。我们可以使用其中的getEntriesByType()方法来获取页面中每一个资源的时间信息。如果你熟悉User Timing API的话，你一定会感到非常熟悉。唯一不同的地方在于在这里你需要为getEntriesByType()这个方法传递一个叫做resource的字符串。

getEntriesByType()方法会返回一系列PerformanceResourceTiming对象，实际上它扩展了PerformanceEntry接口。正是因为如此，它返回的每一个对象都具有下面的扩展属性:

name - 请求资源的地址
entryType - 这个值总是和resource的值相同
startTime - 在用户开始向资源发起请求之前的时间
during - startTime和responseEnd之间的差

除了这些属性之外，Resource Timing API还暴露出一些其他的叫做initiatorType的属性。如果一个请求是由页面上的某个元素发起的，那么这个属性的值就是这个元素的名字(例如，<img>的值叫做img，<script>的值叫做script，等等)。其他可能出现的值还有css(在css中通过url()加载的资源，例如background: url(...))以及xmlhttprequest(对于XMLHttpRequest对象)。

每一个PerformanceResourceTiming对象都提供了下面这些只读属性:

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

下面的这张图为以上的这些的属性提供了一个形象的图形表示。但是如果获取的资源是来自不同的域，以上的这些属性并不是都可以使用：

enter image description here

如果一个资源是从第三方获取的，那么必须提供一个额外的HTTP头部属性(Timing-Allow-Origin: *)，只有这样我们才能够使用上面提到的所有的网络时间信息。如果没有提供这个属性，我们唯一可以获取的数据是请求的持续时间。乍看起来，这对API的使用添加了很大的限制。但是到目前为止，像Google，Facebook、以及Disqus这些网站都已经提供了这个头部信息。

正如我们所见，Resource Timing API提供了许多的属性，我们可以使用这些属性来理解每一个资源所花费的时间。然而，它还提供了另外两个方法: clearResourceTimings()以及setResourceTimingBufferSize()。前面一个方法用来清除用于存储当前PerformanceResourceTiming资源的当前列表。

后面一个方法用来设置存储在缓存中的对象的最大数目。它需要接受一个整形参数。如果没有显式调用这个方法，那么默认情况，user agent可以存储至少150个PerformanceResourceTiming资源。当达到存储上限时，这个API将会触发一个叫做onresourcetimingbuffernull的事件。

现在我们已经了解属性，方法以及事件，我们下一步需要来看一看有多少浏览器支持这个API。

浏览器兼容性

目前，Chrome 25+，IE 10+，Opera 15+桌面浏览器都已经支持了这个API。在移动端，最新版本的安卓浏览器已经支持了这个API。

检车这个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库。

虽然两个资源都是属于外部资源，但是后面一个资源的HTTP头部信息中具有Timing-Allow-Origin: *属性。这意味着虽然它是一个外部资源，我们依然可以通过这个API来获取相关信息。

首先，我们需要做的事情是检测浏览器是否支持Resource Timing API。如果浏览器不支持这个API，我们需要显示一条信息”API not supported。如果浏览器支持这个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部分如下所示：

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;
      }
   });
}

总结

如上所述，使用这个API并不是一件困难的事情。但是，目前来说浏览器对这个API的支持程度并不是很高，但是好在三大主流浏览器(Chrome,Opera,以及IE)都已经对这个API有了较好的支持。

提升你的网站的性能非常重要，而这个新的API会让你事半功倍。

本文参考自Introduction to the Resource Timing API，原文地址http://www.sitepoint.com/introduction-resource-timing-api/