5

これらすべての HTML5 のハードウェア アクセラレーション アニメーションでは、ビューポートの外で実行されているアニメーションは実際にはレンダリングされないと想定しています。それが起こっているかどうかを検出できるようにしたい。

webkitCSSMatrix毎秒 100px 上下に移動するオブジェクトのループで使用して、各ティックに移動していたピクセル数を判断しようとしましたが、アニメーションをビューの外に移動しても違いはありません。

何か案は？

4

2 に答える 2

6

個々のタイマー テストを使用して、オブジェクトが外側に描画される場合と内側に描画される場合の疑似経験的側面の違いを確認できます (タイマーは実際には何も証明しませんが、強力なindisiumを提供します)。

ただし、キャンバスがどのように機能するかを知っていれば、確かな指針も得られます。たとえば、キャンバスは単純なビットマップであり、内部管理 (画面の更新以外) はありません。つまり、メモリが破損するため、実際にはその範囲外に何かを書き込むことはできません。つまり、クリッピングはこの非常に基本的な理由で発生します。

タイマー テストでは、境界内に何かを描画し、境界外に同じオフセットを描画する簡単なテストを実行できます。

更新:質問がキャンバス ビットマップの外側にあり、一般的にビューポートの外側にないと誤​​解しているようです。

したがって、キャンバスであるかどうかに関係なく、ビューポートの外側に関する小さな更新-

単なるキャンバスよりもブラウザーの更新を説明するのは少し複雑ですが、原則として、画面に表示されていないものはすべて切り取られます (描画されません)。当然のことのように思えるかもしれませんが、それは他の場所で更新が行われていないという意味ではありません。

ブラウザーは、画面に描画される要素の内部ビットマップを保持する場合と保持しない場合があります (部分的に表示されている場合はクリップされ、表示されていない場合はまったくクリップされません)。

主な違いは、ブラウザが(実装に応じて) 必要に応じてこの内部ビットマップを更新できることです。この要素の位置、次元、およびスタック位置の影響を受ける DOM リフロー。

そのため、一部のブラウザではパフォーマンスが低下する場合があります。ブラウザーは、ビットマップコンテンツが表示されている場合にのみ更新し、表示されていない場合にのみサイズを調整するように選択することもできます。

残念ながら、これが発生するかどうかを正確に測定する方法はありません。これは、多くの要因 (固定/絶対要素と非固定/絶対要素、コンテンツ、ブラウザーの実装、ハードウェア アクセラレーションの有無など) に依存するためです。

キャンバス要素はナイーブなので予測は簡単ですが、キャンバスがビューポートの外にあるときにキャンバスに何かを描画すると、そのビットマップに描画され、キャンバスが再び表示されたときに表示されます。ただし、ウィンドウのサイズを変更しようとすると、キャンバスの内容が消えてしまい (一部のブラウザーでは)、再描画が必要になります。これは、他の要素よりもキャンバスのプロセスに関与するレイヤーが少なくとも 1 つあることを意味します。

意味があったことを願っています-申し訳ありませんが、質問を誤解していることに気付いたので、この説明を行う準備が少しできていませんでした.

アップデートの終了

簡単なオンラインテストはこちら

このテストでは、内側の 1 つのボタンと内側の別のボタンに 10,000 個の塗りつぶされた四角形を描画します。これは科学的に正確なテストではありませんが、描画が範囲外にある場合、バインドをチェックするだけで、ビットマップの配列内の何も更新しないため、違いが明確に示されています-

function draw(x) {

    console.time('timer');
    var cnt = 10000, w = ez.width, h = ez.height;

    while(cnt--) {
        ctx.fillRect(x, 0, w, h);
    }

    console.timeEnd('timer');
}

inside.addEventListener('click', function(){draw(0)}, false);
outside.addEventListener('click', function(){draw(ez.width)}, false);

コンソール タイマーと Chrome を使用したカタツムリ コンピューターでの結果は次のとおりです。

タイマー: 3156.000ms
タイマー: 112.000ms

これは (内側:外側) 3156:112 の比率です。つまり、実際に何かを描画すると 28 倍の時間がかかりました。これは、ブラウザが境界をチェックするためだけに時間を費やし、境界外の場合は実際にはメモリ内のデータを移動しないことを示しています。

もう1つの方法は、組み込みのツールを使用するために、すでに回答されているものと似ています。ただし、これには代わりにプロファイラーを使用します。

コンソールに移動して、プロファイルと CPU プロファイルを選択します。

ここに画像の説明を入力

  • 1 つのプロファイルの記録を開始し、[Inside] ボタンを押します。終わったら止める
  • 2 番目のプロファイルの記録を開始し、[外側] ボタンを押します。終わったら止める

これで、2 つのプロファイルを比較できます。内側の図面については、次の結果が得られました。

ここに画像の説明を入力

ここでは、塗りつぶされた四角形を描画するために約 9.92% を使用していることがわかります (アイドル時間は調整されていません)。

2 番目のプロファイルでは、次のようになりました。

ここに画像の説明を入力

ここでは、「描画」に使用されたのはわずか 1.24% でした。

ここでの比率は 9.92:1.24、つまり 8 倍です。どちらの場合も、何かがメモリ (ビットマップ バッファ) に更新される場合とそうでない場合のパフォーマンスに大きな違いがあることがわかります。

では、オフスクリーン キャンバスはどうでしょうか。オフスクリーン キャンバスのバッファで何かを更新する必要があるため、これらの場合も同様です。保存される「唯一の」ものは、​​最適化されている場合とされていない場合があるブラウザのメイン バッファの更新です。

于 2013-08-01T17:47:06.627 に答える
2

Chrome DevTools を使用すると、タイムラインパネルを使用してページのパフォーマンスを表示できます。

タイムライン パネルの概要

もう 1 つのオプションは、Web インスペクターで [ペイントの四角形を表示] オプションを有効にすることです。再描画された領域の周りに正方形を描画します。Web Inspector > Settings > General > Rendering : ペイント長方形を表示

ペイント長方形を表示

リソース：

ポール アイリッシュは、これに関する非常に優れたブログ記事、Why Moving Elements With Translate() Is Better Than Pos:abs Top/leftを公開しています。

于 2013-07-30T04:14:16.700 に答える