JavaScript | 大きな配列を扱うときのパフォーマンス面

JavaScript JavaScript
スポンサーリンク

では、巨大配列をブラウザで扱うときに「進捗を表示しながら安全に処理するサンプル」を作ります。初心者でも理解しやすい形にしています。

例：100万件の配列を2倍して合計を計算（進捗表示付き）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>巨大配列処理デモ</title>
<style>
  #progress {
    width: 100%;
    background-color: #eee;
    border-radius: 5px;
    overflow: hidden;
    margin: 10px 0;
  }
  #bar {
    height: 20px;
    background-color: #4caf50;
    width: 0%;
  }
</style>
</head>
<body>
<h1>巨大配列処理デモ</h1>
<div id="progress"><div id="bar"></div></div>
<p id="status">準備中...</p>

<script>
const size = 1000000; // 100万件
let arr = Array.from({length: size}, (_, i) => i + 1);

let sum = 0;
let chunk = 10000; // 1万件ずつ処理
let i = 0;

function processChunk() {
  const end = Math.min(i + chunk, arr.length);
  for (; i < end; i++) {
    sum += arr[i] * 2;
  }

  // 進捗バー更新
  const percent = Math.floor((i / arr.length) * 100);
  document.getElementById('bar').style.width = percent + '%';
  document.getElementById('status').textContent = `処理中... ${percent}%`;

  if (i < arr.length) {
    // 次のチャンクを次のタイミングで処理（ブラウザが固まらない）
    setTimeout(processChunk, 0);
  } else {
    document.getElementById('status').textContent = `完了! 合計 = ${sum}`;
  }
}

// スタート
processChunk();
</script>
</body>
</html>
HTML

ポイント解説

  1. チャンク処理でブラウザのフリーズを回避
    • 巨大配列を一度にループすると、ブラウザが固まることがあります
    • setTimeout を使って少しずつ処理することで、UI の更新も可能
  2. 進捗バーで状況を可視化
    • 処理中に「何％終わったか」を表示できる
    • ユーザーも待つ間に安心感があります
  3. 巨大配列でも安全に処理
    • 100万件程度ならブラウザでも問題なく処理できる
    • 数千万件を扱う場合は Web Worker やサーバー側処理を検討
  4. メモリ効率
    • 配列をコピーしないように直接計算している
    • map などは使わず in-place 処理

💡 応用ポイント

  • この方法を応用すれば、先ほどの「FastQueue」などの巨大配列処理も、ブラウザで安全に進捗を見ながら操作できます
  • 配列の途中削除や変換も、チャンクごとに処理すればフリーズを防げます

See the Pen Massive Array Processing Demo by MONO365 -Color your days- (@monoqlo365) on CodePen.

前へ次へ
1234567891011121314
スポンサーリンク
タイトルとURLをコピーしました