26

反応時間の研究（興味がある場合はこの質問も参照）については、画像の表示時間を制御および測定したいと考えています。さまざまなユーザーのマシンで再描画するために必要な時間を考慮したいと思います。

編集：元々、タイミングにはインライン実行のみを使用していましたが、ペイントに時間がかかるため、ユーザーの画面に表示されている画像の長さを正確に測定することは信頼できないと思いました。

その後、イベント「MozAfterPaint」を見つけました。ユーザーのコンピューターで実行するには構成を変更する必要があり、対応するWebkitAfterPaintはそれを行いませんでした。つまり、ユーザーのコンピューターでは使用できませんが、自分でテストするために使用しました。関連するコードスニペットと以下のテストの結果を貼り付けました。ChromeのSpeedTracer
で 結果を手動で確認しました。

// 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...

MozAfterPaintとインライン実行を使用して測定された期間を比較した結果。

これは私をあまり幸せにしません。まず、表示時間の中央値は、私が望むよりも約30ミリ秒短くなっています。次に、MozAfterPaintを使用した場合の差異はかなり大きい（インライン実行の場合よりも大きい）ため、setTimeoutを30ms増やして単純に調整することはできません。第三に、これは私のかなり高速なコンピューター上にあり、他のコンピューターの結果はもっと悪いかもしれません。

期間の箱ひげ図

2つの方法を使用して測定された期間の関係

SpeedTracerの結果

これらはより良かった。画像が表示される時間は、通常、意図した期間の4（場合によっては）10ミリ秒以内でした。また、ChromeがsetTimeout通話で再描画に必要な時間を占めているように見えました（したがって、画像を再描画する必要がある場合、通話間に504ミリ秒の差がありました）。残念ながら、SpeedTracerはコンソールにログを記録するだけなので、多くの試行の結果を分析してプロットすることができませんでした。SpeedTracerとMozAfterPaintの不一致が、2つのブラウザーの違いを反映しているか、MozAfterPaintの使用法に欠けているものを反映しているかはわかりません（SpeedTracerの出力を正しく解釈したと確信しています）。

質問

知りたい

  1. ユーザーのマシンに実際に表示された時間を測定したり、少なくとも、さまざまなテスト用コンピューター（Chrome、Firefox、Safari）のさまざまなブラウザーのセットで同等の数値を取得したりするにはどうすればよいですか？
  2. レンダリングとペイントの時間をオフセットして、実際の可視性が500ミリ秒になるようにすることはできますか？ユニバーサルオフセットに依存する必要がある場合、それは悪いことですが、ユーザーがやや遅いコンピューターで意識的に画像を見ることができないほど短時間で画像を表示するよりも優れています。
  3. を使用しますsetTimeout。私は知ってrequestAnimationFrameいますが、それを使用してもメリットが得られないようです
    。調査は調査期間全体にわたって焦点が当てられていると想定されており、特定の値よりも+/-500ミリ秒の表示を取得することが重要です。 fpsの数。私の理解は正しいですか？

明らかに、Javascriptはこれには理想的ではありませんが、私たちの目的にとっては最も悪いことではありません（調査はユーザー自身のコンピューターでオンラインで実行する必要があり、何かをインストールするように依頼すると怖がります。JavaはMacOSXブラウザーにバンドルされていませんもう）。
現時点では、現在のバージョンのSafari、Chrome、Firefox、およびおそらくMSIE（performance.nowおよびフルスクリーンAPIの機能検出、MSIEの機能はまだ確認していません）のみを許可しています。

4

2 に答える 2

5

まだ回答が得られていないのですが、この質問を編集しながら多くのことを学んだので、これまでの進捗状況を回答として投稿しています。お分かりのように、それはまだ最適ではなく、それを改善した人には喜んで賞金を授与します。

統計学

新しい結果

結果

最後のパネルでは、「ペイントからペイント」のタイミングの平均は約500ミリ秒で、インライン実行のタイミングの平均は現実的に分散しており（同じタイムスタンプを使用して以下の内部ループを終了するため、理にかなっています）、「ペイント」と相関関係があります。 -ペイントする」タイミング。

期間にはまだかなりのばらつきがあり、さらに短縮したいと思いますが、間違いなく進歩しています。低速のWindowsコンピューターでテストして、本当に満足しているかどうかを確認する必要があります。当初は、すべての偏差を10ミリ秒未満にすることを望んでいました。

ユーザーの操作を必要としないテストスイートを作成すれば、はるかに多くのデータを収集することもできますが、実際のアプリケーションでそれを実行して、現実的な見積もりを取得したいと思いました。

window.requestTimeoutwindow.requestAnimationFrameを使用する

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;
};

編集：

私の別の質問への回答は、良い新しい記事にリンクしています。

于 2013-01-24T18:21:04.370 に答える
4

最初のミリ秒を取得して、イベントが発生した後、差を計算しましたか？setTimeoutの代わりに。何かのようなもの：

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

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

可能であれば、jQueryの使用を避けてください。プレーンJSは、より良い応答時間とより良い全体的なパフォーマンスを提供します

于 2013-01-20T14:02:38.667 に答える