时间戳

首页 > 解决方案 > 了解事件时间戳的时间来源

javascript - 了解事件时间戳的时间来源

问题描述

最近一些浏览器开始为他们的事件使用高分辨率 时间戳。与前一种方法的主要区别之一是此持续时间与系统纪元无关，而是与某个“时间起源”有关（大部分时间大约是加载文档的时间）。

问题是我找不到任何可靠的方法来检查浏览器是否使用高分辨率时间戳或以前的方法。

如果只比较事件时间戳是没有问题的，但是如果要比较事件时间戳和手工制作的时间戳，则需要知道他应该使用Date.now()（相对于时代）还是precision.now()（相对于时间起源）。

例如，虽然 safari mobile 支持性能 API，但某些版本（例如 iOS 11.1 中的版本）尚未将其事件切换为高分辨率时间戳。因此，以下代码片段会产生荒谬的巨大值，difference因为start结尾是高分辨率时间戳，而不是事件的时间戳。

const now = performance ? () => performance.now() : () => Date.now();

let start;

const update = e => {
  if(e) e.preventDefault();
  document.querySelector('#start').innerHTML = start;
  document.querySelector('#event').innerHTML = e ? e.timeStamp : '';
  document.querySelector('#diff').innerHTML = e ? e.timeStamp - start : '';
};

const reset = () => {
  start = now();
  update();
}

reset();

document.querySelector('#reset').addEventListener('click', reset);
document.querySelector('#pad').addEventListener('mousemove', update);
document.querySelector('#pad').addEventListener('touchmove', update);
#pad {
  background-color: #C9DBFA;
  border: 1px solid #778294;
  border-radius: 10px;
  width: 500px;
  height: 100px;
  color: #575E6C;
  padding: .5em .75em;
}

#reset {
  margin: 1em 0;
}
<div id="pad">
  <strong>start time:</strong> <span id="start"></span>
  <br/>
  <strong>event time:</strong> <span id="event"></span>
  <br/>
  <strong>difference:</strong> <span id="diff"></span>
</div>
<button id="reset">reset</button>

iPad (iOS 11.1) 的屏幕截图： 在此处输入图像描述

标签： javascriptdom-eventshigh-resolution-time

解决方案

假设浏览器对所有时间戳一致地使用相同的机制，我建议简单地触发一个虚拟事件来预先进行测试：

var isPerformanceTimestamp = false;
if (performance) {
    var performanceNow = performance.now();
    document.addEventListener('test-performance', function(evt) {
        isPerformanceTimestamp = evt.timeStamp - performanceNow < 1000; // or whatever threshold you feel comfortable with, it's at least 1530355731395 at the time of this writing ;-)
        document.removeEventListener('test-performance', this);
    });
    var event = new Event('test-performance');
    document.dispatchEvent(event);
}

推荐阅读