Safari和requestAnimationFrame获取DOMHighResTimestamp;window.性能不

Safari and requestAnimationFrame gets DOMHighResTimestamp; window.performance not available

本文关键字：window 性能 DOMHighResTimestamp requestAnimationFrame 获取 Safari      更新时间：2023-09-26

我使用requestAnimationFrame创建了一个动画。适用于Windows Chrome和IE；Safari（已测试Safari 6和7）中断。事实证明，rAF得到的是DOMHighResTimestamp时间戳，而不是Date时间戳。这一切都很好，正如我所期望的，因为它现在是规范的一部分。然而，据我所能找到的，没有办法获得当前的DOMHighResTimestamp（即window.performance不可用，即使有前缀）。因此，如果我将开始时间创建为Date时间戳，那么当我试图在rAF回调中确定进度时，它的行为是完全错误的（非常小的负数）。

如果你在Safari上看这个JSBin，它根本不会动画。

在这个JBin中，我更改为"跳过"第一帧（其中time参数为undefined），以便在下一帧中将startTime设置为time参数。似乎有效，但跳过一帧似乎有点糟糕。

考虑到缺少window.performance，有没有办法在Safari中获得当前的DOMHighResTimestamp？或者，强制rAF进入某种遗留模式，强制它获取日期时间戳？

有人知道Safari为什么会出现这种不一致性吗？它以任何其他方式都无法获得的格式提供参数？

Performance.now（）目前只是一个建议。https://developer.mozilla.org/en-US/docs/Web/API/Performance.now（）我只能假设它正式发布只是时间问题，因为除了Safari之外，其他人都是这样内置的。

除此之外，利用这一点对你有利。由于您知道requestAnimationFrame返回一个DOMHighResTimestamp，请将其用于计时。

Game.start = function(timestamp){
    if(timestamp){
        this.time = timestamp;
        requestAnimationFrame(Game.loop);
    }else{
        requestAnimationFrame(Game.start);
    }
}
Game.loop = function(timestamp){
    Game.tick(timestamp);
    ... your code
    requestAnimationFrame(Game.loop);
}
Game.tick = function(timestamp) {
    this.delta      = timestamp - this.time;
    this.time       = timestamp;
};

我在这里所做的是调用Game.start，它将开始循环（我遇到过时间戳未定义的情况，所以我们会尝试，直到得到有效的东西）。一旦我们得到了我们的基准时间，并且由于RAF将返回时间戳，我们的tick函数永远不必调用Date.now或performance.now，只要我们将requestAnimationFrame返回的时间戳传递给它。

相关文章：