我可以使用浏览器导航 Timing API 为了 Ajax 单页应用中的事件？ 如果没有，什么是一个好工具？

1 window.performance 绑在页面上。 请参阅下面的示例，显示它：

<button id="searchButton">Look up Cities</button>

<br/>

 Timing info is same? <span id="results"></span>

<script src="//code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js" type="text/javascript"></script>

<script type="text/javascript">

 jQuery/'#searchButton'/.on/'click', function/e/{

 // deep copy the timing info

 var perf1 = jQuery.extend/true, {}, performance.timing/; 

 // do something async

 jQuery.getJSON/'http://ws.geonames.org/searchJSON?featureClass=P&style=full&maxRows=10&name_startsWith=Denv', function// {

 // get another copy of timing info

 var perf2 = jQuery.extend/true, {}, performance.timing/;

 // show if timing information has changed

 jQuery/'#results'/.text/ _.isEqual/ perf1, perf2 / /;

 }/;

 return false;

 }/;

 </script>

此外，即使您强制使用它，您也将缺少不支持此对象的旧浏览器的缺失数据。

2-
https://github.com/lognormal/boomerang/
, 看起来超越 web timing API 并支持旧浏览器。 有与列出当前随附的幻灯片和幻灯片的幻算和样本
http://html5devconf.com/sessions.html
. 不幸的是，没有直接链接。

现在你可以使用
http://www.w3.org/TR/user-timing/
/推荐 W3C 经过 12 十二月 2013 当年/, 它提供了插入的能力 API 打电话给你的不同部分 Javascript, 然后删除详细的临时数据。

你做到了

mark//

, 这允许您计算您将花费的时间陷入其中 "标记" 在您的Web应用程序中然后

measure//

, 计算在标记之间传递的时间。

对于您的特定情况，您可能有这样的东西：

app.render = function/content/{

 myEl.innerHTML = content;

 window.performance.mark/'end_render'/;

 window.performance.measure/'measure_render', 'start_xhr', 'end_render'/;

};





var req = new XMLHttpRequest//;

req.open/'GET', url, true/;

req.onload = function/e/ {

 window.performance.mark/'end_xhr'/;

 window.performance.measure/'measure_xhr', 'start_xhr', 'end_xhr'/;

 app.render/e.responseText/;

}

window.performance.mark/'start_xhr'/;

myReq.send//;

似乎有不均匀的支持

window.performance.getEntries//

, 这将为您提供有关下载到页面的所有资源的详细信息 URLs. 我用它 API 为了 jsonp /但不是 XMLHttpRequest/ 要求B.
http://azureping.info/
对于支持它返回的浏览器

new Date//.getTime//

对于那些不这样做的人。

在撰写文章时 IE 10 和 Chrome 支持

getEntries

, 但Firefox不是。 不幸的是，并非安装了同步的所有属性，即使在 Chrome 和 IE. 全部 , 我能依赖什么 - 这是

fetchStart

,

responseEnd

和

duration

.

示例源是开启的
https://github.com/nzbart/Azur ... te.ts
.

导航 Timing API, 在我看来，在测量单页应用的性能方面，它不是很有用。

以及已经提到的用户 Timing API,
http://www.w3.org/TR/2014/CR-r ... 0325/
实际上更有用。 This API 提供功能以接收用户会话中所有请求的时间。 /实际上，在大多数浏览器中，您在开发人员工具的网络选项卡上看到的所有内容/. 这些时间包括在那里和后台的旅行时间以及搜索时间 DNS 等等。

不幸的是，这是一个相对较新的规范，并且尚未在所有浏览器中实现。 Chrome 和 IE > 10 提供实施 /虽然尚未完成/. 惊人的 IE, 看起来最仍然实施......

有两种方法可以做到这一点。

https://www.w3.org/TR/2014/CR- ... 0325/
包装 XMLHTTPRequest

让我们来看看它们之间的差异。

1. 资源 Timing API

浏览器最近添加了支持
https://www.w3.org/TR/2014/CR- ... 0325/
. 资源 Timing API 基本上包含关于从应用程序下载的每个资源的时间的信息。 可能是 css, javascript 或者 AJAX 要求。 您可以更详细地获得资源列表

performance.getEntriesByType/'resource'/;

它将返回一个可以找到的对象数组 AJAX 要求

initiatorType

, 什么等于

xmlhttprequest

. 但有一些局限性。

默认情况下，最大资源大小相等 150. 阵列上方只有最大值 150 资源。 如果您想要更多，可以将缓冲区的大小增加为

performance.setResourceTimingBufferSize/500/

.

您不会收到有关是否的信息 AJAX 请求成功或不成功。

2. 包装 XMLHTTPRequest

如果你可以包装自己 XMLHTTPRequest API, 您将收到所有必要的信息，状态代码和字节的大小。 但你必须编写大量代码，当然，测试，测试和测试。

[放弃

来自责任]我努力工作
https://www.atatus.com/
, 在哪里，我们帮助您衡量时间下载时间，时间 AJAX 和用户交易。 此外，您还可以看到所有资源如何工作的会话痕迹。