DOM data-* 更新プロファイラ
200件前後の一覧で、CSSに参照される
data-*
と、JS専用の
data-*
の全件更新を比較します。更新値は同一値なので、原則として見た目は変わりません。
注意:
DevToolsを開くと計測値が変わります。実機では通常表示で複数回実行し、中央値を見るのが無難です。
件数
反復
一覧を再生成
JS専用 data-* 全件更新
CSS参照 data-* 全件更新
両方を連続実行
class toggle同値更新
textContent同値更新
ログ削除
CSVコピー
更新後に forced layout read を実行する
rAF 2回で描画反映後の目安も測る
一覧
0件
計測ログ
時刻
テスト
件数
反復
更新ms
layout read ms
rAF後ms
合計ms
read値