Chrome Canvas Profile Capture

CanvasProfiles.md

Canvas Profiles の使い方

Chrome の DevTools に搭載されている Canvas Profiles (Canvas Capture) を使うと、Canvas API の発行状況が可視化されます。

Canvas Profiles を使うための準備

chrome://flags/#enable-devtools-experiments を開き、
デベロッパー ツールのテストを有効にする をクリックし、Chrome を再起動してください。

DevTools の設定(歯車のアイコン)をクリックして、 左側の Experiments から Canvas inspection をチェックし、設定画面を閉じます。

Profiles タブを開くと、Capture Canvas の項目が増えています。

Canvas Profiles の使い方

Canvas Profiles には大きく分けて2つの使い方があります。

1. スナップショットを取る(一定時間キャプチャーする)
2. 録画する(連続でキャプチャーする)

スナップショットを取る

Take Snapshot をクリックするか、
ブルーの枠の部分をクリックし Single Frame に切り替えて、 左上の録画アイコン(●)をクリックすると、20〜40 フレームほどのキャプチャーが行われます。

録画する

Single Frame を Consecutive Frames に切り替えて、 左上の録画アイコン(●)をクリックすると、連続でキャプチャーが行われます。もう一度クリックすると停止します。

負荷軽減のヒント

Draw call が多い場合

Draw call = 描画負荷です。ドローコールはできるだけ減らす必要があります

Draw call の発行タイミングはブラウザが管理/掌握していますが、こちらからもある程度の干渉が可能です。

• 適当な位置にドットを打つことで強制再描画する
• save(), restore() を無駄撃ちすることで Canvas2DContext の状態変化をレンダリングバックエンドに通知し、描画崩れを強制回避する

Canvas API を適当に(まばらに)発行すると Draw call が増える傾向があります。
間髪を入れず(function call でブツブツ切らずに)まとめて発行することで、ある程度の削減が可能です。

• Canvas APIを五月雨的に呼ぶのは避け、コマンドパターンを使い(描画命令を中間コードの形で溜めておいて)一気に流し込みましょう。

Canvas API call が多い

Canvas API Call = 描画負荷です。

特に以下のような無駄に save() や restore() が連続している箇所は、注意する必要があります

save()
save()
save()
save()
...
restore()
restore()
restore()
restore()

黒い画面が連続している, 連続した clearRect がある

黒い画面が連続描画されている場合は何かがおかしいです。Create.js で吐き出している場合は、元の flash の構造を再検討してください。

画面上変化がないのに Draw call が多発している

パーシャルドロー(ダーティレクト: 必要な部分を再描画する)を搭載していないレンダラでは、1px程度のドットを描画するだけで全体の再描画が発生します。

以下の点を確認してください

• moveTo, lineTo x 3 で無駄なドットを打っていないか
• fillRect で 1px 未満の小さなドットを打っていないか (0.2px 四方など目視では気がつけないような)
• Canvas2DContext の状態(alpha, transform, scale 等)を微妙に変化させていないか
• やたらと clip していないか