requestAnimatonFrame??

概要

ビジュアル更新コードを記述する場合、settimeoutとsetIntervalを使用するのに慣れていますが、速度が遅いです.
developer google comにおいて、

画面が視覚的に変化した場合、=>開発者はブラウザの正しい時間(フレームの開始時)に操作を実行したいと考えています.

JSがフレーム起動時に実行される唯一の方法=requestAnimationFrame

なぜsettimeout、setIntervalを使用できないのですか?

コールバックは、フレーム内のある時点(終了時)で実行され、フレームが失われ、つまずき現象が発生することが多い.

ex)最適化されたフレームレートでデバイスを実行しない問題、フレームダウンの問題、tabがアクティブなtabではないか、またはアニメーションがこのフレームから離れても実行を継続する問題.

mdn Timeouts and intervals

간단한 DOM 애니메이션 CSSアニメーションによる作成

why? より高速な

は、JSではなくブラウザの内部コードを直接計算するため、より高速です.

より複雑なタスクであり、DOMに直接アクセスできないオブジェクト(2 D Canvas API,WebGL)が含まれている場合、アニメーションFrame()を要求するのがより良いオプションである

日本窓requestAnimationFrameを使用するべきですか?

ブラウザが再び表示される前に、アニメーションを実行する環境を考慮することなく、指定したコードブロックを=>適切なフレームレートで実行します.

window.requestAnimationFrame():実行するアニメーションをブラウザに知らせ、次の再描画前にアニメーションを更新する関数を呼び出します.

使用方法

window.requestAnimationFrame(callback);

これを理解しますか?ブラウザレンダリングから始めましょう

Browser Rendering Process

現在のユーザー操作に関連するコンテンツ表示の優先度を指定します.

高速Web環境を提供するには、ブラウザが多くのタスクを実行する必要があります.

連続ループ上で動作し、理想速度は60フレーム

オブジェクトモデル

を作成

ブラウザがページをレンダリングするには、まずDOMツリーとCSSOMツリーを作成する必要があります.

DOM (Document Object Model) :

CSSOM (CSS Object Model) :

がテストページから直接捕獲する確認した結果は

である.

CSSスタイルシートの処理には0.2 msが必要であり、ページ上の7要素が影響を受ける=>ただしCSOM、DOMは互いに独立したデータ構造

である.

レンダーツリー作成、レイアウト、および塗りつぶし

CSSOMとDOMツリーを組み合わせてレンダリングツリーを作成する(表示される各要素のレイアウトを計算し、ピクセルをスクリーンにレンダリングするペイントプロセスの入力として)

.

Reflow:レイアウトステップ=>表示するノードとそのスタイルを計算し、アプライアンスのビューポートでノードの正確な位置とサイズを計算します.

paint:Raster画=>レンダリングツリーの各ノードを画面上の実際のピクセルに変換する最後のステップ

ドキュメントのサイズ、適用されるスタイル、およびアプライアンスによっては、レンダリングツリーの作成、レイアウト、および塗りつぶしに要する時間が異なる場合があります.

ex)ドキュメントが大きいほど、ブラウザが実行するタスクが多くなり、スタイルが複雑になるほど、シェーディングに要する時間が多くなります.

requestFrameのデフォルトの使い方

≪パラメータ・タイムスタンプ|Parameter Timestamp|emdw≫:requestAnimationFrameの実行を開始した後の時間を示すタイムスタンプを提供します.

デバイスの速度にかかわらず、一定の時間と速度で動作することができ、

に非常に役立ちます.

let startTime = null, currentTime = null;

function draw(timestamp) {

  if(!startTime){
  	startTime = timestamp;
  }
  
  currentTime = timestamp - startTime;
  
  requestAnimationFrame(draw);
 
}

draw();

Reference

mdn requestAnimationFrame
developers google web dev