要素を取得してきたときに変数に格納する理由

変数を取得したときにわざわざ変数に格納しなくてもそんなに回数使わないならいいのではないかと考えていたが、パフォーマンスに割と影響を与えるということがわかったのでメモ。

html

<div id="sampleId">
  <span>a</span>
  <span>a</span>
  <span>a</span>
  <span>a</span>
  <span>a</span>
</div>  

js

let elem;
elem = document.getElementsByTagName('span');

//lengthを毎回取得
let statTime1 = new Date();
for (let i = 0; i < 100; i++) {
  for (let j = 0; j < elem.length ; j++) {
    console.log(elem[j])
  }
}
let endTime1 = new Date();


//lengthを予め定義
var statTime2 = new Date();
len = elem.length
for (let i = 0; i < 100; i++) {
  for (let j = 0;j < len; j++) {
    console.log(elem[j])
  }
}
var endTime2 = new Date();

console.log(endTime1 - statTime1 + 'ms'); //567ms
console.log(endTime2 - statTime2 + 'ms'); //465ms

処理の最初と最後にDateオブジェクトを生成することで、その差分から処理速度が計算できる。

length要素を毎回取得しに行くので、その分パフォーマンスが悪くなる。変数に格納すると、キャッシュされ、同じように監視する必要がなくなり、パフォーマンス性が上がることが、上記のことからわかった。