Javascriptの処理をより高速に行う記述方法【ループ処理編】

SEO担当者の頭を悩ませるPageSpeedInsightのスコアを改善するための施策の一つとして、Javascriptコードの最適化があげられます。

今回はJavascriptの処理をより高速に実行するための最適な記述方法についてご紹介いたします。

①ループ処理

配列や複数要素をループする際の処理で気を付ける点としては、条件式部分にあります。

//NG
const array = ['A','B','C','D','E'];
for ( let i = 0;i < array.length; i++) {
  console.log(array[i].id);
}

//OK
const array = ['A','B','C','D','E'];
const arrayLength = array.length;
for ( let i = 0;i < arrayLength; i++) {
  console.log(array[i].id);
}

上記のコードの「i < array.length」指定は、1回1回のループ処理ごとにarrayのlengthを読みに行くため、効率が非常に悪いです。この場合は一度array.lengthを変数に代入して、「i < 変数名」 と記述するようにしましょう。