为具有高时间精度的桌面创建时间敏感浏览器应用程序的最佳方法？答案

【问题标题】：Best approach for creating a time sensitive browser app for desktop with high time precision?为具有高时间精度的桌面创建时间敏感浏览器应用程序的最佳方法？
【发布时间】：2012-12-06 01:22:55
【问题描述】：

我必须开发一个需要在一系列实验中测量用户响应时间的应用程序。该应用程序将在大约 100 台计算机上运行，因此我曾提到基于浏览器的方法可能是最好的减少执行安装和更新的方法。话虽如此，既然我已经了解了浏览器中计时器的准确性，特别是 javascript 计时器，我了解到可能会有几毫秒到 10-15 毫秒以上的延迟。当用户测量他们对屏幕上视觉队列的响应时间时，这种延迟会对这些实验的精度产生负面影响。

有没有一种已知的方法可以为通过 javascript 在浏览器中运行的 Web 应用程序获取精确的计时器？同样，其中一些实验需要简单的 2d 动画，例如查看用户可以将鼠标光标保持在旋转的立方体上多长时间。我更喜欢使用 HTML5 和 Javascript，我们不能使用 flash。

【问题讨论】：

你根本不能依赖javascript。 1) Javascript 日期（和计时器）基于系统时间。如果用户更改了他们的系统时间，javascript 没有真正的方法知道。例如，如果您有 1 分钟的倒计时，请启动它，然后用户将他们的时间设置回 30 分钟，计时器现在大约为 31 分钟。
看这个：jsfiddle.net/ZqvPF
另一个问题是，在浏览器中使用复杂的 javascript 控制台（以及像greasemonkey 之类的插件）时，用户可以替换您的javascript 的一部分来操纵对他们有利的时间。

标签： javascript web-applications browser timer

【解决方案1】：

如果你有新的浏览器，你可以使用 performance.now()，它比 Date 对象提供更高的精度，但使用浏览器的其他性能问题仍然适用:(

http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now

【讨论】：

【解决方案2】：

正如@dqhendricks 建议的那样，您应该使用新的Date 对象。但是，如果您需要它保持一致和准确，则需要在具有相同浏览器版本的同一台计算机上运行它，并且没有在后台运行。

在 Firefox 和 chrome 中查看此 demo。单击边缘并尽可能快地将光标移出 - 我可以在 FF 中获得的最低值是 6MS，我可以在 Chrome 中获得的最低值是 42MS。

这些值在机器之间的差异可能更大。我设置了一个具有 512MB 内存和 50% 单核上限的 VM，在 FF 中打开了 5 个选项卡并尝试进行测试 - 我得到的最低值是 52MS。

因此，除非您可以控制用户的浏览器、PC 和后台运行的东西，否则我不会指望数据是准确的。

【讨论】：

计算出来的时间还是准确的。我不明白你想用这个实验证明什么。基本上你是说不同的浏览器需要不同的时间来执行某些操作。这并不意味着计算的时间差不准确。
@dqhendricks 我假设您要比较用户之间的响应时间，但由于变量（浏览器、计算机等）的原因，您无法进行准确的比较。跨度>

【解决方案3】：

的确，您不能依赖计时器的间隔，但可以依赖新的 Date 对象。例如：

var previousTime = new Date().getTime(); // returns milliseconds of "now"

var timer = setInterval( function() {
   var currentTime = new Date().getTime();
   var millisecondsSinceLastUpdate = currentTime - previousTime;
   previousTime = currentTime;
   alert( 'milliseconds since last update: ' + millisecondsSinceLastUpdate );
}, 1 );

【讨论】：

您可以看到，正如 Snuffleupagus 所提到的，即使使用 Date.getTime 它仍然不准确。如果您查看他引用的 javascript 演示 [link]jsfiddle.net/Ff6ZV/4/[/link]，该示例使用 currenttime 减去以前的时间，就像您提到的那样。该演示表明，跨浏览器它提供不同的响应时间。代码执行有延迟，并不准确。
@Euthyphro 仅仅因为该实验中有不同的时间，并不意味着计算出的时间差不准确......
@Euthyphro 例如，如果您使用经过计算的时间在浏览器上将精灵移动到特定距离上，并且为动画的每一帧使用 (timepassed * velocity) 的距离，精灵会无论使用什么系统，都以相同的速度行驶。唯一的漏洞是如果用户弄乱了系统时钟。
问题是每个浏览器都有不同的执行时间，因此一个浏览器可能比另一个浏览器更快地执行 javascript 代码行，在这种情况下它们不会以相同的速度移动。我明白你在说什么，但问题是 javascript 没有编译，浏览器在运行时读取脚本，根据我的理解，有些浏览器可以比其他浏览器更快地读取它。例如，如果您有 var aTime = new Date().getTime(); /*插入100行代码*/ var bTime = new Date().getTime(); var executionTime = bTime - aTime; （见下一篇，空间不足）
浏览器（chrome、FF、IE）之间的最终结果会有所不同。这对我来说是个问题，因为它没有根据用户对他们在屏幕上看到的内容的响应速度准确地给出响应时间。如果一个浏览器在执行 javascript 方面表现不佳，它会搞砸实验并给出不准确的时间，因为其中一些时间专门用于通过浏览器执行低效的 javascript，这会影响读出的时间。