通过javascript与开发人员控制台测量的不同延迟时间

我正在通过javascript和开发人员控制台测试调用的延迟

在JS中，测量只需添加开始时间变量即可完成，例如：

var start_execution=Math.floor( new Date().getTime() );

// - Call a URL asynchronously
element = doc.createElement("script");
element.src = request_url;
doc.getElementsByTagName("script")[0].parentNode.appendChild(element);

//In response of the call initialize end time and call function to compute latency
 var end_execution=Math.floor( new Date().getTime() );

// function call to generate latency 
calculateLatency();


function calculateLatency(){
  var latency= end_execution-start_execution;
}

如果在延迟数字与浏览器的开发人员控制台/网络面板内联的情况下隔离运行，则该方法工作良好。但在有大量异步内容的实际网站上，JS测量的数字膨胀到了5倍

通过js计算的1000毫秒延迟在网络面板中显示为200毫秒

这种行为非常频繁，差异也不尽相同

我怀疑存在某种处理异步处理的浏览器队列，如果在峰值负载情况下，请求/响应卡在队列中

我正在探讨的选项是性能，但浏览器支持在这里是有限的

我正在寻找一些关于javascript中计算实际延迟的行为和能力的解释（如net面板中所示）。还建议如何有效地使用JS截止时间进行网络调用，因为在这种情况下，夸大的值可能会导致意外行为

---

我为什么要这样做：为不良网络呼叫设置超时时间，但如果延迟的实际原因是浏览器处理开销，则使用setTimeOut和拒绝呼叫是不公平的。

您的建议绝对正确

JS中几乎所有的东西都是由事件驱动的（除了一些情况，比如页面解析过程）。 任何浏览器的每个窗口都有一个javascript事件线程，每个事件处理程序都会执行，每个事件（包括传播/冒泡和默认值）都会在处理下一个事件之前被完全处理

有关更多信息，请参阅

关于有效使用事件队列的建议，有一些建议：

• 避免长时间运行的脚本
• 避免同步

  XMLHttpRequest

• 不允许来自不同帧的脚本控制同一全局状态
• 不要使用

  alert

  对话框进行调试，因为它们可能会完全更改您的程序逻辑
就我个人而言，我习惯于谈论任何与时间有关的事情。除此之外，我会使用持续时间插件
jQuery 在jQuery手动样式中使用它

var start_execution = moment();
var end_execution   = moment();

var jqxhr = $.get( "google.com", 
  function(data) {
    end_execution = moment();
  })
  .done(function() {
    end_execution = moment();
  })
  .fail(function() {
    end_execution = moment();
  })
  .always(function() {
    var ms = start_execution.diff(end_execution);
    var duration = moment.duration(ms);
    console.log(duration);
  });

这是正确编写的，即使请求失败或超时也能正常工作
为了澄清，写下以下内容是错误的：

var start_execution = moment();
var jqxhr = $.get( "google.com", 
  function(data) {
    //do something with the data;
  });
var end_execution   = moment();
var ms = start_execution.diff(end_execution);
var duration = moment.duration(ms);
console.log(duration);

由于它只测量jQuery创建请求初始化所需的时间，所以很可能在发送该资产/url的实际请求之前就执行了end_
有棱角的 通过编写httpInterceptorService，可以记录事件发生的时间

var HttpCallsApp = angular.module("HttpCallsApp", []);
HttpCallsApp.config(function ($provide, $httpProvider) {
    $provide.factory("MyHttpInterceptor", function ($q) {
        var log = ApplicationNamespace.Util.logger;
        return {
            request: function (config) {
                log.info("Ajax %s request [%s] initialized", config.method, config.url);
                return config || $q.when(config);
            },
            response: function (response) {
                log.info("Ajax %s response [%s] compleated : %s ( %s )",
                    response.config.method, response.config.url, response.status, response.statusText);
                return response || $q.when(response);
            },
            requestError: function (rejection) {
                log.info(rejection);
                // Return the promise rejection.
                return $q.reject(rejection);
            },
            responseError: function (rejection) {
                log.info(rejection);
                // Return the promise rejection.
                return $q.reject(rejection);
            }
        };
    });
    $httpProvider.interceptors.push("MyHttpInterceptor");
});

在这种情况下，应用程序名称空间包含我在app config中使用

logEnhancerProvider.datetimePattern=“HH:mm:ss.SSS”设置的应用程序作用域记录器实例时间戳。从代码质量的角度来看，angular case在数量级上更好，但我不想详细介绍—这并不是说您不能在jQuery中编写相同的东西，而是它不是您的默认选项

Chrome adhoc测试（或关于任何其他现代浏览器）

ctrl+shift+n（打开新的匿名窗口，确保资产不会缓存到客户端）
F12（打开开发人员工具）
网络（显示资产请求）
设置为记录网络日志
输入要测试的url
单击XHR过滤器
打开项目并“计时”

您应该看到如下内容：


小提琴手
如果您不信任您的webbrowser或javascript，则浏览器已用完-在flash、.net、java等程序中。您仍然可以获得请求时间。在这种情况下，您可以监视发送的数据包

你可以看到你想知道的任何事情：

作为个人喜好，我更改了完整的时间戳格式


您可以使用console.time（）和console.timeEnd（）（旧ie中不存在），而不是使用datetime（毫秒可能因系统因素而异）。如果你能使用，那就更好了，但它也有自己的问题。这就是为什么我更喜欢使用momentjs

如果你想在传统的“浏览器”中准确地做到这一点，那么至少在谷歌，他们使用了以下方法：添加一个flash组件，可以准确地做到这一点。这会带来其他问题，如如果您经常登录，数据管道限制，但这些问题更容易解决，然后创建对遗留IE的支持。
在我看来，网络面板将测量请求所用的时间，而不考虑之前发生的事和之后发生的事。因此，您至少错过了事件处理程序排队和实际执行的时间。请向我们展示您的实际代码。在“异步调用URL”中您是怎么做的？通过哪种方式加载？在哪个回调中挂接“end”？添加了用于调用URL的代码，调用的响应包含对计算延迟的函数的调用。事件队列不应弥补800ms的差异，虽然是正确的，但我看到的差异非常大，考虑到最新的浏览器和处理，这似乎很奇怪。通常开发人员最终使用的是足够好/准确的解决方案。他们不关心细节，通常也不应该，因为早期优化是万恶之源。客户通常关心可感知的性能，您应该投入您的精力。感谢您提供的详细选项，但遗憾的是，我无法向网站添加新库。我的动机不仅仅是测量，而是根据不良呼叫占用的时间拒绝它们，在浏览器开销是罪魁祸首的情况下，盲目使用setTimeout是不公平的。