小编给大家分享一下怎么使用HMTL5 API监控前端性能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
用户计时API可以在网页应用中测量两个预定义标记之间的性能。开发者仅仅需要分别定义测量的开始和结束标记。可以通过JavaScript对象“”提供的函数，对计时位置进行标记。
var measuring_start = performance.now();通过“”函数，可以在网页应用的获取计时用。和该函数类似的是Date对象，它同样可以获取当前时间戳。二者的主要区别是时间精度，now函数的返回值的w3c文档中明确要求，必须能够表示精确到千分位小数的毫秒值。另外now函数返回的数值，是从浏览器的“浏览开始事件（navigationStart）”开始到现在的毫秒数。
performance.now() 35438640.775000006 (new Date()).getTime() 1443063066478如果希望分析一个图片的加载性能，可以在图片的加载（load）事件中设置第二个标记。图片加载的耗时，就是“measure_start”和“measure_end”两个变量之间的差值（单位毫秒）。
<html> <head> <meta charset="utf-8" /> <title>test timing</title> </head> <body> <img src="https://cache.yisu.com/upload/information/20210204/91/2814.jpg" alt="image" > <script type="text/javascript"> var measure_start = performance.now(); document.getElementsByTagName("img")[0].addEventListener ("load", function() { var measure_end = performance.now(); console.log("image load time: " + (measure_end - measure_start) + "ms"); }, false); </script> </body> </html>访问这个html之后，可以在控制台看见输出：
image load time: 24.395ms同时，可以和Chrome开发者工具中网络标签页的加载时间做比较：
(点击放大图像)
除了使用now函数直接获取时间戳之外，Performance接口还提供了函数。开发者可以在任何需要记录时间的地方创建、清除标记。
performance.mark("start"); … performance.mark("end");mark函数不返回任何值，但是后续可以通过标记的名称来获取标记的数据。如果要计算标记之间的差值，可以通过“measure”函数来完成。该函数需要三个参数，第一个参数定义了该差值的名称，第二个和第三个变量指定标记的名称。同样，该函数也不返回任何值。
performance.measure("difference", "start", "end");上面这个例子，计算了“start”和“end”两个标记之间的差值，并将差值命名为“difference”。需要特别注意的是，这里相同的名称都会被记录，不会覆盖。
前面说到了，mark、measure这两个函数，不会返回任何值。如果要读取标记或者测量的内容，需要通过调用Performance接口中的“getEntries”、“getEntriesByType”或者“getEntriesByName”读取。其中“getEntries”返回当前performance对象中保存的所有标记（包括网页加载的资源）和测量结果；“getEntriesByType”函数通过获取对应的标记；“getEntriesByName”函数通过标记（或者测量结果）名称来获取对应的数据。这些函数的返回值是列表，包含名称、开始时间、耗时等字段。
例如，如果要获取所有的标记或者测量结果，可以通过“getEntriesByType”函数获取：
performance.mark("start"); performance.mark("end"); performance.measure("difference", "start", "end"); var marks = performance.getEntriesByType("mark"); var measures = performance.getEntriesByType("measure"); console.log("===marks===:") marks.forEach(function(mark) { console.log(mark.name + ": " + mark.startTime); }) console.log("===measures===:") measures.forEach(function(measure){ console.log(measure.name + ": " + measure.duration) })在浏览器（Chrome）控制台执行后的输出为：
===marks===: start: 6805479.590000001 end: 6805479.74 ===measures===: difference: 0.14999999944120646可以看见，返回的对象中，name字段为设置的标记（测量结果）的名称，对于标记可以通过startTime获取标记时间（和前文提到的now函数一样，这里返回的时间也是相对于navigationStart事件），对于计算结果，可以通过duration字段获取计算结果。上面示例中使用的“mark”、“measure”两种类型之外，浏览器（Chrome、Firefox等）已经支持“resource”类型。也就是说，这些浏览器已经默认帮我们测量了所有外部资源加载的耗时。对于之前示例中的html（包含一个图片的引用），如果在浏览器的控制台执行下面的js代码，可以直接看见这个图片加载的耗时：
performance.getEntriesByType("resource").forEach(function(r) { console.log(r.name + ": " + r.duration) })上述代码输出（Chrome）为：
https://cache.yisu.com/upload/information/20210204/91/2815.jpg: 21.696999901905656这个数据和Chrome开发者工具中网络标签页中对该请求记录的耗时完全一致。
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
