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

小编典典

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

ajax

我们有一个使用Knockout和Backbone构建的单页面应用程序，该应用程序对服务器进行Ajax调用，并执行一些复杂的数据缓存和DOM渲染。我们真的很想衡量用户所看到的性能（并将其重新登录到服务器）。我似乎无法全神贯注于浏览器Navigation
Timing API是否对此有用。从我在示例中看到的内容来看，Navigation Timing
API是绑定的，window.performance并且仅限于页面加载，不适合监视Ajax行为。对或错？如果为假，我还能使用什么？

我很乐意设置用于测量时间的自定义检测点，例如，对于使用服务器结果执行一些DOM渲染的Ajax调用。

阅读 255

2020-07-26

共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，还支持较旧的浏览器。本次会议上列出的当前维护者正在与幻灯片和示例代码进行交谈。抱歉，没有直接链接。

2020-07-26