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

对于反应时间研究（如果您感兴趣），我们希望控制和测量图像的显示时间。我们想说明在不同用户的机器上重新绘制所需的时间

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

后来，我找到了事件“”。它需要一个配置更改才能在用户的计算机上运行，而相应的服务器没有这样做。这意味着我不能在用户的计算机上使用它，但我将它用于自己的测试。我在下面粘贴了相关的代码片段和测试结果。
我还用Chrome手动检查了结果

// from the loop pre-rendering images for faster display
var imgdiv = $('<div class="trial_images" id="trial_images_'+i+'" style="display:none"><img class="top" src="' + toppath + '"><br><img class="bottom" src="'+ botpath + '"></div>');
Session.imgs[i] = imgdiv.append(botimg);
$('#trial').append(Session.imgs);

// in Trial.showImages
$(window).one('MozAfterPaint', function () {
    Trial.FixationHidden = performance.now();
});
$('#trial_images_'+Trial.current).show(); // this would cause reflows, but I've since changed it to use the visibility property and absolutely positioned images, to minimise reflows
Trial.ImagesShown = performance.now();

Session.waitForNextStep = setTimeout(Trial.showProbe, 500); // 500ms    

// in Trial.showProbe
$(window).one('MozAfterPaint', function () {
    Trial.ImagesHidden = performance.now();
});
$('#trial_images_'+Trial.current).hide();
Trial.ProbeShown = performance.now();
// show Probe etc...

//从循环中预渲染图像以加快显示速度
var imgdiv=$（“
”）；
Session.imgs[i]=imgdiv.append（botimg）；
$（“#试验”）.append（Session.imgs）；
//在试用中。展示图片
$（窗口）.one（'MozAfterPaint'，函数（）{
Trial.FixationHidden=performance.now（）；
});
$（'#试用版"图像'+试用版.current）.show（）；//这将导致回流，但我已经将其更改为使用可见性属性和绝对定位图像，以最大限度地减少回流
Trial.ImagesShown=performance.now（）；
Session.waitForNextStep=setTimeout（Trial.showProbe，500）；//500毫秒
//在审判中
$（窗口）.one（'MozAfterPaint'，函数（）{
Trial.ImagesHidden=performance.now（）；
});
$（“#试用#图像”+试用.current.hide（）；
Trial.ProbeShown=performance.now（）；
//显示探针等。。。

比较使用MozAfterPaint和内联执行测量的持续时间的结果。 这不会让我太高兴。首先，平均显示时间比我想要的短30毫秒。其次，使用MozAfterPaint的差异非常大（并且比内联执行的差异要大），所以我不能简单地通过将setTimeout增加30毫秒来调整它。第三，这是在我相当快的计算机上，其他计算机的结果可能更糟

SpeedTracer的结果 这些更好。图像可见的时间通常在预期持续时间的4（有时）10毫秒内。看起来Chrome在

setTimeout

调用中占了重新绘制所需的时间（因此，如果图像需要重新绘制，调用之间的差异为504ms）。 不幸的是，我无法在SpeedTracer中分析和绘制许多试验的结果，因为它只记录到控制台。我不确定SpeedTracer和MozAfterPaint之间的差异是否反映了两种浏览器的差异，或者是我在使用MozAfterPaint时所缺少的东西（我相当确定我正确地解释了SpeedTracer输出）

问题 我想知道

我如何测量它在用户机器上实际可见的时间，或者至少在不同测试计算机（Chrome、Firefox、Safari）上获得一组不同浏览器的可比数字

我可以抵消渲染和绘制时间以达到500毫秒的实际可见性吗？如果我不得不依赖一个通用的偏移量，那会更糟，但还是比在速度较慢的计算机上显示如此短的时间以至于用户无法有意识地看到图像要好

我们使用

setTimeout

。我知道，但似乎我们无法从中获得任何好处：
该研究应该在整个研究期间处于焦点位置，更重要的是，我们获得+/-500毫秒的显示，而不是一定数量的fps。我的理解正确吗

显然，Javascript在这方面并不理想，但它对我们的目的来说是最不坏的（这项研究必须在用户自己的计算机上在线运行，要求他们安装一些东西会吓跑一些人，Java不再捆绑在Mac OS X浏览器中）。

---

目前我们只允许当前版本的Safari、Chrome、Firefox和MSIE（性能检测功能。现在和全屏API，我还没有检查MSIE是如何做到的）。

您是否尝试获取初始毫秒，并在事件触发后计算差值？而不是设置超时。比如：

var startDate = new Date();
var startMilliseconds = startDate.getTime();

// when the event is fired :
(...), function() {
    console.log(new Date().getTime() - startMilliseconds);
});

---

尽可能避免使用jQuery。plain JS将为您提供更好的响应时间和更好的总体性能

因为我还没有得到更多答案，但在编辑此问题时学到了很多，我将发布我的进度作为答案。正如你所看到的，它仍然不是最优的，我很乐意将奖金奖励给任何改进它的人

统计

• 在最左边的面板中，您可以看到导致我怀疑得到的时间估计的分布
• 中间的面板显示了我在缓存选择器、重新排序一些调用、使用更多链接、通过使用

  可见性和绝对定位（而不是
  显示
  ）来最小化回流后所取得的成绩

• 最右边的面板显示了我在使用requestAnimationFrame使用调整后的函数后得到的结果。之后我就这么做了。我认为这只会帮助我平滑动画，但显然它也有助于获得更好的实际显示持续时间

结果 在最后一个面板中，“绘制到绘制”计时的平均值为~500ms，内联执行计时的平均值实际分散（有意义，因为我使用相同的时间戳终止下面的内部循环），并与“绘制到绘制”计时相关联

在持续时间上仍然有很大的差异，我想进一步减少，但这肯定是进步。我将不得不在一些速度较慢的Windows计算机上测试它，看看我是否真的对它感到满意，最初我希望所有的偏差都在10毫秒以下

如果我制作了一个不需要用户交互的测试套件，我还可以收集更多的数据，但我想在我们的实际应用程序中这样做，以获得现实的估计

window.request
window.requestTimeout = function(fn, delay) {
    var start = performance.now(),
        handle = new Object();
    function loop(){
        var current = performance.now(),
            delta = current - start;

        delta >= delay ? fn.call() : handle.value = window.requestAnimationFrame(loop);
    };
    handle.value = window.requestAnimationFrame(loop);
    return handle;
};