17

我们有一个使用 Knockout 和 Backbone 构建的单页应用程序，它可以对服务器进行 Ajax 调用，并进行一些复杂的数据缓存和 DOM 渲染。我们真的很想测量用户看到的性能（并将其记录回服务器）。我似乎无法理解浏览器导航计时 API是否对此有用。从我在示例中看到的情况来看，Navigation Timing API 被绑定到window.performance并且这仅限于页面加载并且不适合监控 Ajax 行为。对或错？如果是假的，我还能用什么？

我很想设置自定义检测点，在它们之间测量时间，例如，对于使用服务器结果进行一些 DOM 渲染的 Ajax 调用。

4

5 回答 5

12

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，还支持旧版浏览器。本次会议中列出的当前维护者有幻灯片和示例代码的演讲。抱歉没有直接链接。

于 2013-04-29T23:11:06.287 回答
9

您现在可以使用用户计时 API（W3C 建议 2013 年 12 月 12 日），它提供了一种方法，您可以在 Javascript 的不同部分插入 API 调用，然后提取详细的计时数据。

您使用 来执行此操作mark()，它可以让您计算出在您的 Web 应用程序中达到该“标记”所花费的时间，然后measure()计算您的标记之间经过的时间。

对于您的具体情况，您可以使用以下内容：

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();
于 2014-02-18T16:49:38.923 回答
6

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

在撰写本文时，IE 10 和 Chrome 支持getEntries，但 Firefox 不支持。不幸的是，并不是所有的时间属性都设置好了——即使在 Chrome 和 IE 中也是如此。我只能依靠一个fetchStart,responseEnd和duration.

示例源在GitHub 上。

于 2013-07-23T11:16:40.517 回答
4

在我看来，Navigation Timing API 在测量单页应用程序性能时并没有真正的帮助。

除了已经提到的 User Timing API，Resource Timing API实际上更有帮助。此 API 提供了检索用户会话中发出的所有请求的时间的功能（实际上，您在大多数浏览器中的开发人员工具的网络选项卡中看到的所有请求）。这些时间包括往返时间以及 DNS 查找时间等。

不幸的是，这是一个相对较新的规范，尚未在所有浏览器中实现。Chrome 和 IE > 10 提供了实现（尽管尚未完成）。出人意料的是，IE现在似乎已经实现了最单元...

于 2014-04-16T14:33:19.837 回答
1

有两种方法可以做到

  1. 资源计时 API
  2. 包装 XMLHTTPRequest

让我们看看它们之间的区别。

1.资源计时API

浏览器最近添加了对Resource Timing API的支持。Resource Timing API 基本上有关于从应用程序加载的每个资源的时间信息。它可能是 css、javascript 或 AJAX 请求。您可以获得资源详细信息列表

  performance.getEntriesByType('resource');

它将返回对象数组，您可以在其中找到initiatorType等于 的AJAX 请求xmlhttprequest。但是有一些限制。

  1. 默认情况下，最大资源大小为 150。上述数组最多只有 150 个资源。如果需要更多，可以将缓冲区大小增加为performance.setResourceTimingBufferSize(500).
  2. 您不会获得有关 AJAX 请求是成功还是失败的信息。

2. 包装 XMLHTTPRequest

如果您可以包装您的 XMLHTTPRequest API，您将从时间、状态代码和字节大小中获得您需要的所有信息。但是您必须编写大量代码，当然还要进行测试、测试和测试。

[免责声明]我在atatus.com工作，我们帮助您测量页面加载时间、AJAX 时间和自定义事务。您还可以查看有关每个资源如何执行的会话跟踪。

于 2017-02-14T06:49:55.190 回答