javascript - event - window history replacestate({}

¿De dónde viene un timeStamp de un evento de navegador en Javascript?

Question

Los objetos de evento pasados ​​a las devoluciones de llamada del controlador de eventos contienen un event.timeStamp de cuándo ocurrió el evento, pero ¿dónde se produce la marca de tiempo? ¿Es algo que surge del sistema operativo subyacente o es generado por el navegador?

Estoy interesado en medir la confiabilidad de la marca de tiempo y reconocer que cuanto más tarde se produzca la marca de tiempo, menos precisa será.

Además, ¿la forma en que se produce la marca de tiempo varía significativamente entre las plataformas y las implementaciones del navegador?

Gracias.

Answer 1

De acuerdo con la especificación §4.2 de DOM4 , se asigna cuando se crea el evento (tiene que desplazarse un poco hacia abajo):

El atributo timeStamp debe devolver el valor en el que se inicializó. Cuando se crea un evento, el atributo debe inicializarse a la cantidad de milisegundos que han pasado desde las 00:00:00 UTC del 1 de enero de 1970, ignorando los segundos intercalares.

Lo que lleva a la pregunta de: ¿Cuándo se crea el evento? Puedo pensar tres veces que podría hacerse:

1. Cuando el sistema operativo notifica al navegador

2. Cuando el hilo de la interfaz de usuario principal JavaScript es capaz de hacer cualquier cosa

3. Cuando el hilo de la IU principal de JavaScript está a punto de despachar la tarea relacionada con el evento

Usando el fragmento a continuación, al menos para el evento click , parece variar según el navegador:

• Chrome parece asignar timeStamp cuando el subproceso de la interfaz de usuario principal de JavaScript está listo para manejar el evento (n. ° 3 arriba); esto puede ser significativo después de que el evento realmente haya sucedido, incluso si el hilo principal de la interfaz de usuario de JavaScript ha tenido la oportunidad de hacer otras cosas en el ínterin. (Para mí, esto fue muy sorprendente.)

• Firefox parece asignar timeStamp cuando se produce el evento (n. ° 1 anterior), independientemente de lo que esté haciendo el subproceso principal de la interfaz de usuario de JavaScript. Esto es lo que hubiera esperado.

• IE parece hacer lo que Chrome hace (n. ° 3), pero no puedo descartar la posibilidad de asignar la marca de tiempo para el tercer clic cuando se procesa el segundo clic (n. ° 2), porque no puedo reconocerlo un clic en el tercer botón cuando las cosas están ocupadas.

// 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!)">