ブラウザーの描画工房

同じ図形をCanvasとHTML要素で動かす。個数を変えて、フレーム間隔を実測してみよう。

入力や実験結果は送信・保存しません。ページへの通常のアクセス記録は残ります。

1. 条件を選んで10秒間動かす

描画方式図形の数

測定待ち。個数を増やす前に、500個で試してみましょう。

—rAFの平均回数 / 秒

—平均フレーム間隔 ms

—95パーセンタイル ms

0測定した間隔の数

グラフは直近120件、縦軸は0〜100ms（超える値は上端）。細い線は16.7msの目安です。平均と95パーセンタイルは今回の測定全体から計算します。

方式・個数	平均間隔	95%値	実測時間

直近6回をこのページを開いている間だけ表示。画面サイズを同じにし、ほかのタブやアプリの動作も揃えると比較しやすくなります。

requestAnimationFrame（rAF）が呼ばれた時刻の差を測っています。平均回数は「間隔の数 ÷ 経過秒」。95%値は、測定間隔の95%がその値以下になる境界です。

モニターの更新頻度や省電力設定にも影響されます。実際に画面へ表示されたフレーム数や、GPU性能そのものの測定ではありません。タブを隠すと停止します。

Canvasは1枚の描画面へ四角形を毎回描き直します。HTML方式は四角形ごとに要素を作り、位置を更新します。図形のサイズ・移動規則・個数は共通です。

Canvasの解像度倍率は最大2。要素作成などの初期準備は測定に含めません。この実装での比較であり、どちらが常に速いかを決めるものではありません。