JavaScript

ウェブページの読み込みを早くするプログラムの組み方

 

APIから取得したデータを表示するウェブページにおいて、ページの読み込みを早くするためのJavaScriptプログラムの組み方を紹介します。

目次
  1. 遅いプログラム（Before）
  2. DOM操作の回数を減らす
  3. 改良したプログラム（After）
  4. まとめ

遅いプログラム（Before）

遅いプログラムを三段階に分けてみます。

  1. APIで読み込んだデータを変数に入れる

  2. document.createで要素を生成する

  3. 生成した要素にDOMを追加する

これを表示するデータの数だけループ処理で表示していました。

プログラムは、以下のようになります。

for (i = 1; i < 151; i++) {
    // データを変数に入れる
    let pokeName = data['name']

    // HTMLを生成する
    let div = document.createElement('div');
    let p = document.createElement('p');
    p.innerHTML = pokeName;
    div.appendChild(p);

    // 生成した要素を、#wrapperに追加する
    document.getElementById('wrapper').appendChild(div);
}

 

DOM操作の回数を減らす

このプログラムのボトルネックは「DOM操作の回数が多いこと」です。

appendChild() メソッドが実行されると、描画のための計算が自動的に行われます。

ループ回数が増えるほど計算量も増えます。

これがボトルネックです。

 

次に、改良したプログラムをご紹介します。

改良したプログラム（After）

DOM操作の回数を減らすことが、読み込み速度の向上につながるので、HTMLを文字列として変数に保存し、最後に一度だけDOM操作を行うように変更しました。

改良したプログラムは大きく3つに分けました。

  1. データの作成

  2. HTMLの作成

  3. 表示

以下はサンプルコードです。

// 変数を定義
let pokemonArray = [];
let pokemon = {
    id: "",
    name: "",
};


// データの作成
for (let i = 0; i < 151; i++) {
    // データをオブジェクトに追加
    pokemon.id = data['id'];
    pokemon.name = data['name'];

    // 1モンスター毎に配列に追加
    pokemonArray[i] = pokemon;

    // オブジェクトを初期化
    pokemon = {};
}


// HTMLタグの作成
let html = "";
for (let i = 0; i < pokemonArray.length; i++) {
    html +=
        "<div>" +
        "<span>" + pokemonArray[i].id + "</span>" +
        "<span>" + pokemonArray[i].name + "</span>" +
        "</div>"
        ;
}

// 表示
const div = document.querySelector('#app');
div.innerHTML = html;

 

まとめ

JavaScriptを使ったwebページの読み込み速度を向上させるには、DOM操作の回数を減らすことが重要です。

文字列としてHTMLを作り、最後に一度だけDOM操作を行うことで早く表示できます。

関連記事