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

Question

我正在通过 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 计算的一个 1000ms 延迟在网络面板中显示为 200ms。

这种行为非常频繁，差异不一。

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

我正在探索的选项是性能 http://www.w3.org/TR/resource-timing ，但此处浏览器支持有限。

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

我为什么要这样做:为不执行的网络调用设置超时，但当延迟的实际原因是浏览器处理开销时，使用 setTimeOut 和拒绝调用是不公平的。

Answer 1

您的建议完全正确。

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

有关更多信息，请参阅 this tutorial

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

• 避免长时间运行的脚本
• 避免同步 XMLHttpRequest
• 不允许来自不同框架的脚本控制相同的全局状态
• 不要使用 alert 对话框进行调试，因为它们可能会完全改变您的程序逻辑。