DOMで避けるべきこと

• DOMアクセスのループは避ける
  • 一度変数に格納してから
• 可能ならばセレクタAPIを使う
• DOMはid属性で活用
• DOM生成の回数はなるべく減らす

DOMアクセスのループは避ける

アンチパターン

for (var i = 0; i < 1000; i += 1){
    $('#button01').innerHTML += i + ", ";
}

ベストプラクティス

var i, content = "";
for ( i = 0; i < 1000; i += 1){
    content += 9 + ",";
}

// 最後にDOMにアクセス
$('#button01').innerHTML += content;

可能ならばセレクタAPIを使う

ネイティブのquerySelector()とquerySelectorAll()は 自分でDOMメソッドを使って選択を実行するより早い。

document.querySelector("ui .column");
document.querySelectorAll("#main .col-12");

DOMはid属性で指定

セレクタAPIを使わず自分で選択するときには クラス名よりid名のほうがパフォーマンスが高い。

これについては簡単なので詳細省略。

DOM生成の回数はなるべく減らす

アンチパターン

$('#button01').css(...);
$('#button01').animate(...);

このように同じ要素に対してDOM操作を繰り返す場合 一旦変数に格納して行う。

ベストプラクティス

var btn = $('#button01');
btn.css(...);
btn.animate(...);