时间都去哪儿了——利用User Timing API测量应用性能

简介

本文将介绍如何使用User Timing API（用户计时接口）来测量应用完成任务的时长，而不去讨论User Timing API相对于Date.now带来了哪些优势。

浏览器兼容性

User Timing API已经是w3c推荐API，目前IE10+和chrome31+已完整支持，firefox不支持。既然是推荐API，firefox不久之后也应该会支持。

从需求开始

假如我们要测量动态加载一张图片所花的时间，你的代码可能是这样：

var img = new Image();img.onload = function () {    var duration = Date.now() - start;    console.log(duration);};var start = Date.now();img.src = "girl.jpg";

运行代码，我的控制台上显示的是33，意味着浏览器花了33毫秒加载了一张图片。

接下来我们用User Timing API来改写这个例子，代码如下：

var img = new Image();img.onload = function () {    performance.mark("endLoad");    performance.measure("loadTime", "startLoad", "endLoad");    console.log(performance.getEntriesByName("loadTime")[0].duration);};performance.mark("startLoad");img.src = "girl.jpg";

运行一下，控制台上显示30.000000006111804。

示例讲解

逛贴吧论坛的朋友遇到好东西经常会mark（马克）一下，这里的mark函数也是一样的道理。我们在给图片对象赋值路径之前先mark一下，做个标记，等图片加载完了我们再mark一下。然后调用measure函数来测量“startLoad”和“endLoad”这两个标记之间的时长，并给命个loadTime的名记录下来。最后我们可以通过检索所有的记录来了解每个间隔。

API解析

mark方法：用给定的名字存储一个时间戳。接收一个字符串用于和时间戳相关联，这个字符串不一定要全局唯一，比如上面示例的startLoad，如果你要多次测量多张图片的加载时长，你可以重复使用startLoad和endLoad来马克一下。

measure方法：用给定的名字来存储两个mark之间的间隔。第一个参数接收一个字符串用于和测量相关联，第二个参数接收一个指定起始标识的名称，第三个参数指定休止标识的名称。如果你省略后两个参数，这个方法存储的将是从navigationStart（导航开始）到当前的时间间隔。如果你省略最后一个参数，这个方法将存储从最近时间点的名称所代表的标识到当前时间的间隔。

getEntries和getEntriesByType和getEntriesByName方法：这些方法都返回一个PerformanceEntryList对象。PerformanceEntryList对象从名字上看就是PerformanceEntry的列表,好比Node和NodeList之间的关系。这些PerformanceEntry对象在列表中按时间顺序排序。PerformanceEntry对象包含name,entryType,startTime和duration属性，这些属性包含的值正如字面意思，分别代表名称（mark或measure的第一个参数），记录类型（mark的或是measure的记录），开始时间和持续时间。getEntries方法返回所有的PerformanceEntry对象，getEntriesByType方法按entryType来检索相关的PerformanceEntry对象，getEntriesByName按name来检索相关的PerformanceEntry对象。

clearMarks和clearMeasures方法：用于清除你已设置标识或测量。接收一个代表名称的字符串。如果没有传入参数，将清理所有的设置。

收尾

User Timing API给我们提供了一套简化测量应用性能的方案，我们可以给应用的不同任务或阶段加上马克，待最后再通过getEntries等相关方法导出所有的记录。值得注意的是所有记录下来的时间都是高精度的浮点值，并保持了以毫秒为单位，方便我们和已有的Date.now等方法返回值参与运算。最后我推荐大家随便看看msdn上的这篇导航计时的文章，结合导航计时能发挥用户计时更大的威力。