我可以使用Ajax的活动单页的应用程序，浏览器导航计时API？如果不是，什么是一个很好的工具？ [英] Can I use the browser Navigation Timing API for Ajax events in single page apps? If not, what's a good tool?

问题描述

我们已经有了建成淘汰赛和骨干单页的应用程序，这使得Ajax调用到服务器，并做一些复杂的数据缓存和DOM渲染。我们真的很喜欢来衡量性能（并将其记录到服务器）的用户看到。我似乎无法让我的头缠着浏览器导航计时API 是否将是有用的这个或没有。从我的例子中看到的，导航计时API是依赖于 window.performance ，这是仅限于页面加载，不适合用于监控Ajax的行为。对或错？如果是假的，我可以用什么？

We've got a single page app built with Knockout and Backbone which makes Ajax calls to the server and does some complex data caching and DOM rendering. We're really like to measure the performance (and log it back to the server) as seen by the user. I can't seem to get my head wrapped around whether the browser Navigation Timing API is going to be useful for this or not. From what I see in examples, the Navigation Timing API is tied to window.performance and this is limited to the page load and not suitable for monitoring Ajax behavior. True or false? If false, what else can I use?

我喜欢设置之间，测量时间，例如自定义检测点对于Ajax调用，它的一些DOM渲染与服务器的结果。

I'd love to set custom instrumentation points between which to measure time, e.g. for an Ajax call that does some DOM rendering with a server result.

推荐答案

1 - 真，window.performance被绑定到页面加载。参见下面的例子，显示这一点：

1 - True, window.performance is tied to page load. See example below which shows this:

    <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>

另外，即使你没有得到它的工作，你就会有丢失从旧的浏览器的数据不支持这个对象。

Also, even if you did get it working you'd have missing data from old browsers that don't support this object.

2 - 飞镖项目似乎超越了网页时机API，同时还支持旧的浏览器。有在本次会议列出的当前的维护者用幻灯片和样品code会谈。很抱歉，没有直接的联系。

2 - The Boomerang project seems to go beyond the web timing API and also supports older browsers. There is a talk with slides and sample code by the current maintainer listed in this conference. Sorry no direct link.

这篇关于我可以使用Ajax的活动单页的应用程序，浏览器导航计时API？如果不是，什么是一个很好的工具？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！