使用HMTL5 API监控前端性能

用户计时API

\

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

var measuring_start = performance.now();

\

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

performance.now()\35438640.775000006\(new Date()).getTime()\1443063066478

\

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

\u0026lt;html\u0026gt;\    \u0026lt;head\u0026gt;\        \u0026lt;meta charset=\"utf-8\" /\u0026gt;\        \u0026lt;title\u0026gt;test timing\u0026lt;/title\u0026gt;\    \u0026lt;/head\u0026gt;\    \u0026lt;body\u0026gt;\        \u0026lt;img src="http://cdn3.infoqstatic.com/statics_s2_20150922\-0305u1/styles/i/logo_bigger.jpg" alt=\"image\" \u0026gt;\        \u0026lt;script type=\"text/javascript\"\u0026gt;\            var measure_start = performance.now();\            document.getElementsByTagName(\"img\")[0].addEventListener\(\"load\