javascript – 我可以在单页面应用程序中使用浏览器Navigation Timing API进行Ajax事件吗？如果没有,什么是好工具？

我们有一个使用Knockout和Backbone构建的单页面应用程序,它使Ajax调用服务器并执行一些复杂的数据缓存和DOM渲染.我们非常想测量用户看到的性能(并将其记录回服务器).我似乎无法理解浏览器Navigation Timing API是否会对此有用.从我在示例中看到的,Navigation Timing API与window.performance相关联,这仅限于页面加载,不适合监视Ajax行为.对或错？如果不对,我还能使用什么？

我想设置自定义仪器点,在这些点之间测量时间,例如：对于使用服务器结果执行某些DOM呈现的Ajax调用.

解决方法:

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 @R_659_4045@ion has changed
                jQuery('#results').text( _.isEqual( perf1, perf2 ) );
            });
            return false;
        });
    </script>

此外,即使您确实使用它,您也会丢失不支持此对象的旧浏览器中的数据.

2 – Boomerang project似乎超越了网络计时API,并且还支持旧版浏览器. this conference中列出的当前维护者对幻灯片和示例代码进行了讨论.抱歉没有直接链接.