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

Question

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

我喜欢设置自定义检测点,在这些点之间测量时间,例如,对于使用服务器结果进行DOM渲染的Ajax调用.

Answer 1

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 - Boomerang项目似乎超越了Web计时API,并且还支持旧版浏览器.本次会议中列出的当前维护者对幻灯片和示例代码进行了讨论.抱歉没有直接链接.

Answer 2

您现在可以使用User Timing API(W3C Recommendation 2013年12月12日),它提供了一种方法,您可以在Javascript的不同部分插入API调用,然后提取详细的计时数据.

您可以使用mark()它,它可以让您measure()计算出在Web应用程序中点击"标记" 所花费的时间,然后计算标记之间经过的时间.

对于您的具体情况,您可以这样:

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();

Answer 3

似乎有不完整的支持window.performance.getEntries(),它将为您提供加载到页面中的所有资源及其URL的详细信息.我将此API用于AzurePing.info中的jsonp(不是XMLHttpRequest)请求,以支持那些支持它的浏览器,new Date().getTime()而不是那些不支持它的浏览器.

在撰写本文时,IE 10和Chrome支持getEntries,但Firefox不支持.不幸的是,并非所有的计时属性都已设置 - 即使在Chrome和IE中也是如此.我只能依靠是fetchStart,responseEnd和duration.

示例源位于GitHub上.