我们已经得到了与淘汰赛和骨干建立了一个单页的应用程序，这使得Ajax调用到服务器，并做一些复杂的数据缓存和DOM渲染。 我们真的很喜欢来衡量性能（和记录它返回到服务器）的用户看到。 我似乎无法让我的头缠着浏览器是否导航计时API将是这个或没有用处。 从我的例子中看到，该导航计时API是依赖于window.performance ，这仅限于页面加载，不适合用于监控Ajax的行为。 对或错？ 如果是假的，我可以用什么呢？
我很想设置自定义检测点测量时间，例如，对于一个Ajax调用，它的一些DOM与服务器渲染结果之间。
1 - 诚然，window.performance被绑定到页面加载。 见下面的例子示出了这样的：
<button id='searchButton'>Look up Cities</button>
<br>
Timing info is same? <span id='results'></span>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></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 -该回旋镖项目似乎超越网络时序API，同时还支持旧版浏览器。 还有用幻灯片和示例代码在列出的当前的维护者谈谈这次会议 。 对不起没有直接的联系。
现在，您可以使用用户计时API （W3C推荐二零一三年十二月一十二日），它提供了可以插入在你的Javascript的不同部分的API调用，然后提取详细的时序数据的方式。
你这样做，使用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()它会给你加载到一个网页，其URL以及所有资源的细节。 我使用这个API进行JSONP中（不XMLHttpRequest的）请求AzurePing.info用于支持它，回落至浏览器中new Date().getTime()对于那些不这样做。
在写这篇文章，IE 10和Chrome支持的时间getEntries ，但Firefox没有。 不幸的是，不是所有的时间属性设置 - 即使是在Chrome和IE。 我只能依靠是fetchStart ， responseEnd和duration 。
样本来源是在GitHub上 。
该导航计时API在我看来是不是真的有帮助，当涉及到测量单个页面应用程序的性能。
随着已经提到的用户计时API中， 资源定时API实际上是更有益的。 这个API提供了检索在用户会话中提出的所有要求（实际上你的开发工具的网络标签在大多数浏览器查看全部）的时序。 这些时间包括往返时间以及DNS的查找时间等。
不幸的是，这是一个相对较新的规范，而不是翻过所有浏览器都没有实现。 铬和IE> 10提供实现（尽管尚未完成）。 出人意料的是，IE浏览器似乎现在已经实施的最unitl ...
有两种方法可以做到这一点
让我们来看看它们之间的差异。
浏览器添加支持资源定时API最近。 资源定时API基本上具有关于每个和从应用程序加载的每个资源的定时信息。 这可能是CSS，JavaScript或AJAX请求。 你可以得到的资源的详细列表，
performance.getEntriesByType('resource');
它会返回对象数组，你可以找到通过AJAX请求initiatorType等于xmlhttprequest 。 但也有一些限制。
performance.setResourceTimingBufferSize(500) 如果你可以用你的XMLHTTPRequest API，你会得到你的时机，状态代码和字节大小所需要的所有信息。 但是，你必须编写大量的代码和ofcourse试验，试验和测试。
【免责声明】我工作atatus.com ，我们帮你衡量页面加载时间，AJAX时机和定制的交易。 你还可以看到有关如何每一个资源执行会话痕迹。
