我们有一个使用Knockout和Backbone构建的单页面应用程序,该应用程序对服务器进行Ajax调用,并执行一些复杂的数据缓存和DOM渲染。我们真的很想衡量用户所看到的性能(并将其重新登录到服务器)。我似乎无法全神贯注于浏览器Navigation Timing API是否对此有用。从我在示例中看到的内容来看,Navigation Timing API是绑定的,window.performance并且仅限于页面加载,不适合监视Ajax行为。对或错?如果为假,我还能使用什么?
window.performance
我很乐意设置用于测量时间的自定义检测点,例如,对于使用服务器结果执行一些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 information has changed jQuery('#results').text( _.isEqual( perf1, perf2 ) ); }); return false; }); </script>
另外,即使您确实可以使用它,您也会从不支持该对象的旧浏览器中丢失数据。
2- Boomerang项目似乎超出了Web计时API,还支持较旧的浏览器。本次会议上列出的当前维护者正在与幻灯片和示例代码进行交谈。抱歉,没有直接链接。