精确控制和测量图像显示的时间。

为了进行一项反应时间研究（如果你感兴趣，可以参考这个问题），我们希望控制和测量图像的显示时间。我们希望考虑到在不同用户的计算机上重新绘制所需的时间。

编辑：最初，我只使用了内联执行来计时，并且认为我不能相信它能准确地测量图片在用户屏幕上可见的时间，因为绘制需要一些时间。

后来，我发现了事件“MozAfterPaint”。它需要在用户计算机上进行配置更改，并且相应的WebkitAfterPaint没有成功。这意味着我不能在用户的计算机上使用它，但我用它进行了自己的测试。我在下面粘贴了相关的代码片段和我的测试结果。

我还使用Chrome中的SpeedTracer进行了手动检查。

// 从循环预渲染图像以加快显示速度
var imgdiv = $('');
Session.imgs[i] = imgdiv.append(botimg);
$('#trial').append(Session.imgs);
// 在Trial.showImages中
$(window).one('MozAfterPaint', function () {
    Trial.FixationHidden = performance.now();
});
$('#trial_images_'+Trial.current).show(); // 这会导致重新布局，但我已经改为使用可见性属性和绝对定位的图像，以最小化重新布局
Trial.ImagesShown = performance.now();
Session.waitForNextStep = setTimeout(Trial.showProbe, 500); // 500毫秒    
// 在Trial.showProbe中
$(window).one('MozAfterPaint', function () {
    Trial.ImagesHidden = performance.now();
});
$('#trial_images_'+Trial.current).hide();
Trial.ProbeShown = performance.now();
// 显示Probe等...

使用MozAfterPaint和内联执行测量的持续时间对比结果

这让我不太满意。首先，中位数的显示持续时间比我想要的短约30毫秒。其次，使用MozAfterPaint的方差相当大（比内联执行的方差更大），所以我不能简单地通过增加setTimeout 30毫秒来调整它。第三，这是在我的相当快的计算机上的结果，其他计算机的结果可能更糟糕。

使用SpeedTracer的结果

这些结果更好。图像可见的时间通常与预期持续时间相差4（有时候是10）毫秒。而且看起来Chrome在setTimeout调用中考虑到了重新绘制所需的时间（所以如果图像需要重新绘制，则调用之间有504毫秒的差异）。

不幸的是，我不能对SpeedTracer中的许多试验结果进行分析和绘图，因为它只记录到控制台。我不确定SpeedTracer和MozAfterPaint之间的差异是反映了两个浏览器的差异还是我对MozAfterPaint的使用有所欠缺（我相当确定我正确解释了SpeedTracer的输出）。

问题

我想知道

1. 我如何测量它在用户的计算机上实际可见的时间，或者至少以一组不同浏览器在不同测试计算机上获得可比较的数字（Chrome，Firefox，Safari）？
2. 我能否抵消渲染和绘制时间以获得实际可见性的500毫秒？如果我必须依赖通用抵消，那就更糟糕了，但仍然比在相对较慢的计算机上显示图像的时间太短而用户无法有意识地看到它们要好。
3. 我们使用setTimeout。我知道有requestAnimationFrame，但似乎我们无法从中获得任何好处：

   研究应该在整个研究期间保持焦点，重要的是我们获得+/-500毫秒的显示，而不是一定数量的帧数。我的理解正确吗？

显然，JavaScript对此并不是理想选择，但对于我们的目的来说是最好的选择（该研究必须在线上在用户自己的计算机上运行，要求他们安装某些东西会吓到一些人，而且Java不再捆绑在Mac OS X的浏览器中）。

我们目前只允许使用当前版本的Safari，Chrome，Firefox和可能的MSIE（通过性能检测和全屏API，我还没有检查MSIE的情况）。