[关闭]
@babydragon 2015-09-24T07:45:24.000000Z 字数 4737 阅读 1237

使用HMTL5 API监控前端性能

原创

HTML5发布之后,出现了越来越多的富客户端网页应用。这些应用在浏览器上可能会变得卡顿。现在可以通过JavaScript中新提供的用户计时API(User Timing API)对页面加载性能做快速和精确的测试,这些计时数据基于高精度及时API,测量精度可以达到微秒级。同时,开发者也可以结合浏览计时API(Navigation Timing API),在预定义标记的帮助下获得网页加载性能。基于这些API,开发者可以更方便的找到网页应用中相对耗时的地方,并进行优化。


用户计时API

用户计时API可以在网页应用中测量两个预定义标记之间的性能。开发者仅仅需要分别定义测量的开始和结束标记。可以通过JavaScript对象“performance”提供的函数,对计时位置进行标记。

  1. var measuring_start = performance.now();

通过“now”函数,可以在网页应用的获取计时用高精度时间戳。和该函数类似的是Date对象,它同样可以获取当前时间戳。二者的主要区别是时间精度,now函数的返回值的w3c文档中明确要求,必须能够表示精确到千分位小数的毫秒值。另外now函数返回的数值,是从浏览器的“浏览开始事件(navigationStart)”开始到现在的毫秒数。

  1. performance.now()
  2. 35438640.775000006
  3. (new Date()).getTime()
  4. 1443063066478

如果希望分析一个图片的加载性能,可以在图片的加载(load)事件中设置第二个标记。图片加载的耗时,就是“measure_start”和“measure_end”两个变量之间的差值(单位毫秒)。

  1. <html>
  2. <head>
  3. <meta charset="utf-8" />
  4. <title>test timing</title>
  5. </head>
  6. <body>
  7. <img src="http://cdn3.infoqstatic.com/statics_s2_20150922-0305u1/styles/i/logo_bigger.jpg" alt="image" >
  8. <script type="text/javascript">
  9. var measure_start = performance.now();
  10. document.getElementsByTagName("img")[0].addEventListener("load", function() {
  11. var measure_end = performance.now();
  12. console.log("image load time: " + (measure_end - measure_start) + "ms");
  13. }, false);
  14. </script>
  15. </body>
  16. </html>

访问这个html之后,可以在控制台看见输出:

  1. image load time: 24.395ms

同时,可以和Chrome开发者工具中网络标签页的加载时间做比较:
此处输入图片的描述

除了使用now函数直接获取时间戳之外,Performance接口还提供了标记(mark)函数。开发者可以在任何需要记录时间的地方创建、清除标记。

  1. performance.mark("start");
  2. performance.mark("end");

mark函数不返回任何值,但是后续可以通过标记的名称来获取标记的数据。如果要计算标记之间的差值,可以通过“measure”函数来完成。该函数需要三个参数,第一个参数定义了该差值的名称,第二个和第三个变量指定标记的名称。同样,该函数也不返回任何值。

  1. performance.measure("difference", "start", "end");

上面这个例子,计算了“start”和“end”两个标记之间的差值,并将差值命名为“difference”。需要特别注意的是,这里相同的名称都会被记录,不会覆盖。

前面说到了,mark、measure这两个函数,不会返回任何值。如果要读取标记或者测量的内容,需要通过调用Performance接口中的“getEntries”、“getEntriesByType”或者“getEntriesByName”函数读取。其中“getEntries”返回当前performance对象中保存的所有标记(包括网页加载的资源)和测量结果;“getEntriesByType”函数通过类型获取对应的标记;“getEntriesByName”函数通过标记(或者测量结果)名称来获取对应的数据。这些函数的返回值是PerformanceEntry对象列表,包含名称、开始时间、耗时等字段。

例如,如果要获取所有的标记或者测量结果,可以通过“getEntriesByType”函数获取:

  1. performance.mark("start");
  2. performance.mark("end");
  3. performance.measure("difference", "start", "end");
  4. var marks = performance.getEntriesByType("mark");
  5. var measures = performance.getEntriesByType("measure");
  6. console.log("===marks===:")
  7. marks.forEach(function(mark) {
  8. console.log(mark.name + ": " + mark.startTime);
  9. })
  10. console.log("===measures===:")
  11. measures.forEach(function(measure){
  12. console.log(measure.name + ": " + measure.duration)
  13. })

在浏览器(Chrome)控制台执行后的输出为:

  1. ===marks===:
  2. start: 6805479.590000001
  3. end: 6805479.74
  4. ===measures===:
  5. difference: 0.14999999944120646

可以看见,返回的对象中,name字段为设置的标记(测量结果)的名称,对于标记可以通过startTime获取标记时间(和前文提到的now函数一样,这里返回的时间也是相对于navigationStart事件),对于计算结果,可以通过duration字段获取计算结果。上面示例中使用的“mark”、“measure”两种类型之外,浏览器(Chrome、Firefox等)已经支持“resource”类型。也就是说,这些浏览器已经默认帮我们测量了所有外部资源加载的耗时。对于之前示例中的html(包含一个图片的引用),如果在浏览器的控制台执行下面的js代码,可以直接看见这个图片加载的耗时:

  1. performance.getEntriesByType("resource").forEach(function(r) {
  2. console.log(r.name + ": " + r.duration)
  3. })

上述代码输出(Chrome)为:

  1. http://cdn3.infoqstatic.com/statics_s2_20150922-0305u1/styles/i/logo_bigger.jpg: 21.696999901905656

这个数据和Chrome开发者工具中网络标签页中对该请求记录的耗时完全一致。

如果要直接通过标记、测量结果名称获取数据,可以通过getEntriesByName函数获取。需要注意的是,该函数同样返回的是PerformanceEntry对象数组,需要迭代获取具体数据。

同样,Performance接口也提供了移除标记的接口。可以通过clearMarks和clearMeasures函数,删除之前创建的标记和测量结果。这两个函数都接收一个可选的名称参数,如果传入名称,则删除指定名称的数据,否则清空标记/测量结果。

  1. performance.clearMarks();
  2. performance.mark("start");
  3. performance.mark("end");
  4. var marks = performance.getEntriesByType("mark");
  5. console.log("before clear:")
  6. marks.forEach(function(mark) {
  7. console.log(mark.name + ": " + mark.startTime);
  8. })
  9. performance.clearMarks("start");
  10. marks = performance.getEntriesByType("mark");
  11. console.log("after clear:")
  12. marks.forEach(function(mark) {
  13. console.log(mark.name + ": " + mark.startTime);
  14. })

上述代码执行后的输出为:

  1. before clear:
  2. start: 9080690.565000001
  3. end: 9080690.575000001
  4. after clear:
  5. end: 9080690.575000001

也就是说,执行了performance.clearMarks("start");之后,“start”标记被清除了。

浏览计时API

浏览计时API统计了一个网页从卸载当前文档开始到加载完毕这整个流程中,每个节点的时间戳。和用户计时API不同的是,浏览器计时API的时间,是标准的时间戳。每个节点的时间戳,都保存在performance.timing对象中。其中包含的每个节点,可以参考下图:

此处输入图片的描述

  1. console.log(performance.timing.domLoading);
  2. console.log(performance.timing.domComplete);
  3. console.log("load time: " + (performance.timing.domComplete - performance.timing.domLoading ));

例如,可以通过获取domComplete(DOM构建完成)和domLoading(DOM开始构建)的差值,来计算构建DOM树消耗的时间。

除了timing对象中保存的各个节点加载时间戳,performance对象中还保存了和navigation对象。它保存了当前页面的加载类型和重定向次数。其中,加载类型类型有:

如直接打开一个页面,在控制台中执行:

  1. console.log(performance.navigation.type);

上述脚本执行后,控制台会输出0,表示这是直接打开的一个页面。再次刷新页面,重新执行上面的JavaScript片段,则会输出1,表示这是一次重新加载。

performance.timing.redirectCount 记录了当前页面经历的重定向次数。

浏览器支持

用户计时API已经大部分浏览器支持,如IE10+、Chrome 25+、Firefox 15+等,但是Safari等浏览器还不支持。对于浏览计时API,更多的浏览器已经支持,包括Chrome、Firefox、IE9+、Safari 8+等等。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注