【入門編】 OffscreenCanvasによるメインスレッド負荷軽減 – Webブラウザの仕組み実践ガイド

こんにちは！Webブラウザの深淵を覗き込み始めたあなたへ。

Web開発の世界へようこそ。今日は、ブラウザが裏側でどうやって「絵」を描いているのか、そして、なぜあなたのWebサイトが時々「カクついて」しまうのか。その解決策である「OffscreenCanvas（オフスクリーンキャンバス）」という魔法についてお話ししましょう。

難しそうに聞こえるかもしれませんが、大丈夫。普段の生活で例えながら、一緒に紐解いていきましょう。

—

1. 「メインスレッド」は、ひとりで頑張る料理人

ブラウザの中には「メインスレッド」という、いわば「Webページというお店の唯一の料理人」がいます。

この料理人は、ものすごく忙しいんです。

HTMLを読んで、メニュー（画面の構成）を作る。
CSSを読んで、盛り付け（デザイン）を考える。
JavaScriptを読んで、お客さん（ユーザー）の注文（クリックやスクロール）をさばく。

もし、この料理人が「複雑なアニメーションの描画」という、とんでもなく手間のかかる料理を始めたらどうなるでしょうか？他のお客さんの注文が止まってしまいますよね。これが、Webサイトでよくある「画面がカクつく」「クリックしても反応しない」という正体です。

2. そこで登場！「OffscreenCanvas」という影武者

OffscreenCanvasは、メインの料理人とは別に、「裏方のキッチン（ワーカースレッド）」を雇うことを可能にします。

メインの料理人はホール（画面）の接客に集中し、重い描画処理は裏方のキッチンに丸投げしてしまう。これなら、メインスレッドがどんなに忙しくても、アニメーションはスイスイ動きます。これが「OffscreenCanvas」の正体です。

—

3. 実践！メインスレッドを解放しよう

では、実際にどうやって「裏方のキッチン」を雇うのか、コードを見てみましょう。

準備：メイン側の処理（index.js）

ここでは、Canvas要素を「転送（Transfer）」して、裏方にバトンタッチします。

// メインのスクリプト
const canvas = document.getElementById(‘myCanvas’);

// transferControlToOffscreen() でキャンバスの操作権を裏方に渡します
// これ以降、メイン側からはこのキャンバスをいじれなくなります（まさにバトンタッチ！）
const offscreen = canvas.transferControlToOffscreen();

// 裏方のワーカーに「このキャンバスで描画してね！」と送ります
const worker = new Worker(‘worker.js’);
worker.postMessage({ canvas: offscreen }, [offscreen]);

実行：裏方の処理（worker.js）

裏方のキッチンでは、受け取ったキャンバスを使って黙々と絵を描きます。

// worker.js
self.onmessage = (event) => {
const canvas = event.data.canvas;
const ctx = canvas.getContext(‘2d’);

// ここでどれだけ重い描画ループを回しても、
// メインスレッドの接客には一切影響しません！
function draw() {
ctx.fillStyle = ‘skyblue’;
ctx.fillRect(0, 0, canvas.width, canvas.height);

// アニメーションを繰り返す
requestAnimationFrame(draw);
}

draw();
};

—

4. 開発者として覚えておいてほしいこと

ここで少しだけ、現場の「リアルな知見」を共有しますね。

「なんでもかんでも」ではない: 小さな描画なら、メインスレッドで描いたほうが通信コスト（メインと裏方のやり取り）がかからず速いこともあります。「重い処理」かどうかを見極めるのが、腕の見せ所です。
DOMとの決別: OffscreenCanvasは「DOMから切り離された」ものです。つまり、裏方のワーカーからは `document` や `window` といったDOM操作系の機能にはアクセスできません。あくまで「描画に特化した職人」だと考えてください。

最後に：つまずくのは当たり前です

最初は「なんでDOMが触れないんだ！」とイライラするかもしれません。でも、それがブラウザの安全性であり、高速化の秘訣なんです。

Web制作において、「画面がカクつく」というのは、料理人が忙しすぎてパンクしているサイン。そんな時は、今回お話しした「役割分担（OffscreenCanvas）」を思い出してください。

あなたの作るWebサイトが、誰にとっても滑らかで心地よい体験になりますように。応援していますよ！