浏览器事件的timeStamp在哪里来自Javascript？ [英] Where does a browser event's timeStamp come from in Javascript?

问题描述

传递给事件处理程序回调的事件对象在事件发生时包含一个event.timeStamp，但是产生的时间戳在哪里？这是从底层的操作系统起泡的，还是由浏览器生成的？

我有兴趣衡量时间戳的可靠性，并认识到后来的时间戳生成的可能性不太准确。

另外，生成时间戳的方式在平台和浏览器实现之间有很大的不同吗？

谢谢。

解决方案

根据 DOM4规范§4.2，当事件被创建时，它被分配（你必须向下滚动有一点）：

timeStamp 属性必须将其初始化的值返回。当事件被创建时，属性必须被初始化为从1970年1月1日00:00:00 UTC以来通过的毫秒数，忽略闰秒。

这导致了以下问题：事件何时创建？我可以想到三次可能会做的：

1. 当操作系统通知浏览器时




2. 当JavaScript主UI线程接下来能够执行任何




3. 当JavaScript主UI线程即将发送与事件相关的任务

使用下面的代码段，至少对于点击事件，似乎因浏览器而异：

• Chrome似乎当JavaScript主UI线程准备好处理事件（＃3以上）时，分配 timeStamp ;事情实际发生后，这可以显着，即使主要的JavaScript UI线程有机会在此期间做其他的事情。 （对我而言，这是非常令人惊讶的。）




• 当事件发生时，Firefox似乎分配了 timeStamp 发生（上面＃1），不管主要的JavaScript UI线程正在做什么。这是我预期的。




• IE 似乎可以做Chrome（＃3），但是我不能排除在第二次点击处理时为第三次点击分配时间戳的可能性（＃2），因为当繁忙时，我无法识别第三个按钮上的点击。

  //可惜的是，Firefox有一个错误（https://bugzilla.mozilla.org/show_bug.cgi？ id = 77992）其中// timeStamp不是从Epoch，它来自系统启动。所以我们工作相对于你点击第一个按钮的时间，而不是使用干净的绝对数据//可惜，IE11不喜欢你点击第二个按钮，然后移动到//点击第三个按钮，但是数据只是点击第二个表明它更像是Chrome浏览器Firefox.var start1; var start2; document.getElementById（start）。addEventListener（click，function（e）{//记住这个事件的时间戳start1 = e.timeStamp; start2 = 0; //启动一个忙环三秒钟，锁定主JS线程忙（3000）;显示（完成第一个忙环）;}，false）; document.getElementById then1）addEventListener（click，function（e）{//从第一个事件显示时间showElapsed（e.timeStamp）; //记住这个事件的timetsamp start2 = e.timeStamp; //另一个忙环这个时候一秒钟忙（1000）;显示（完成第二个忙循环）;}，false）; document.getElementById（then2）。addEventListener（click，function（e）{//显示时间因为第一个和第二个事件显示为（e.timeStamp）;}，false）; function showElapsed（ts）{display（从第一个事件发生：+（ts  -  start1）+ms）; if（start2）{display（Elapsed from second event：+（ts  -  start2）+ms）; }} function busy（duration）{var target = Date.now（）+ duration; while（Date.now（）< target）{// Wait}} function display（msg）{var p = document.createElement（'p'）; p.innerHTML = msg; document.body.appendChild（p）;}函数格式（ts）{return new Date（ts）.toISOString（）。substring（11，23）;}  

pre class =snippet-code-html lang-html prettyprint-override> < input type =buttonid =startvalue =点击我>< input type =按钮id =then1value =然后我很快>< input type =buttonid =then2value =然后我快速（而不是IE！）>

Event objects passed to event handler callbacks contain an event.timeStamp of when the event occurred, but where is the timestamp produced? Is it something that bubbles up from the underlying OS, or is it generated by the browser?

I'm interested in gauging the reliability of the timestamp and recognise that the later the timestamp is produced the less accurate it's likely to be.

Also, does the way in which the timestamp is produced vary significantly between platforms and browser implementations?

Thanks.

解决方案

According to the DOM4 specification §4.2, it's assigned when the event is created (you have to scroll down a bit):

The timeStamp attribute must return the value it was initialized to. When an event is created the attribute must be initialized to the number of milliseconds that have passed since 00:00:00 UTC on 1 January 1970, ignoring leap seconds.

Which leads to the question of: When is the event created? I can think of three times it might be done:

1. When the OS notifies the browser

2. When the JavaScript main UI thread is next able to do anything

3. When the JavaScript main UI thread is about to dispatch the task related to the event

Using the snippet below, at least for the click event, it seems to vary by browser:

• Chrome seems to assign the timeStamp when the JavaScript main UI thread is ready to handle the event (#3 above); this can be significantly after the event actually happened, even if the main JavaScript UI thread has had a chance to do other things in the interim. (For me, this was very surprising.)

• Firefox seems to assign the timeStamp when the event occurs (#1 above), regardless of what the main JavaScript UI thread is doing. This is what I would have expected.

• IE seems to do what Chrome does (#3), but I can't rule out the possibility it would assign the timestamp for the third click when the second click is processed (#2), because I can't get it to recognize a click on the third button when things are busy.

// Sadly, Firefox has a bug (https://bugzilla.mozilla.org/show_bug.cgi?id=77992) where
// timeStamp is not from The Epoch, it's from system start. So we work relative to the
// moment you clicked the first button rather than working with nice clean absolute data.

// Sadly, IE11 doesn't like you clicking the second button and then moving over to
// click the third, but the data from just clicking the second suggests it's more like
// Chrome than Firefox.
var start1;
var start2;
document.getElementById("start").addEventListener("click", function(e) {
  // Remember this event's timestamp
  start1 = e.timeStamp;
  start2 = 0;

  // Start a busy-loop for three seconds, locking up the main JS thread
  busy(3000);
  display("Done with first busy loop");
}, false);

document.getElementById("then1").addEventListener("click", function(e) {
  // Show time since first event
  showElapsed(e.timeStamp);

  // Remember this event's timetsamp
  start2 = e.timeStamp;

  // Another busy-loop, just a second this time
  busy(1000);
  display("Done with second busy loop");
}, false);

document.getElementById("then2").addEventListener("click", function(e) {
  // Show time since first and second events
  showElapsed(e.timeStamp);
}, false);

function showElapsed(ts) {
  display("Elapsed from first event: " + (ts - start1) + "ms");
  if (start2) {
    display("Elapsed from second event: " + (ts - start2) + "ms");
  }
}

function busy(duration) {
  var target = Date.now() + duration;
  while (Date.now () < target) {
    // Wait
  }
}

function display(msg) {
  var p = document.createElement('p');
  p.innerHTML = msg;
  document.body.appendChild(p);
}
function format(ts) {
  return new Date(ts).toISOString().substring(11, 23);
}

<input type="button" id="start" value="Click me">
<input type="button" id="then1" value="Then me quickly afterward">
<input type="button" id="then2" value="Then me quickly after that (not on IE!)">

这篇关于浏览器事件的timeStamp在哪里来自Javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！