1770485380
2026-02-07 17:05:00
私たちは皆、ウェブページがフリーズし、続いて果てしなく爽やかでイライラしたため息をつき、時折足を踏み鳴らしながらも、結局回転する車輪が見え続けるという経験をしたことがあるでしょう。多くの場合、これは JavaScript のメインスレッドのボトルネックが原因で発生します。
メイン スレッドは単一車線の高速道路であり、ブラウザーはすべてを厳密な順序で処理します。クリックの処理、スクロールの管理、アニメーションのレンダリング、ロジックの実行を行います。一度に実行できる処理は 1 つだけなので、大量の計算が加わると大規模な渋滞が発生します。メインスレッドが過負荷になると、UI 全体が停止します。
最近、WebAssembly (Wasm) についてよく話してきたので、Wasm がここでの優れたソリューションであることは驚くべきことではありません。 Wasm の生のパワーを Web Workers と組み合わせることで、これらの重い計算をバックグラウンド レーンに移動できます。これにより、メインスレッドの負担が軽減され、ユーザーは中断されることなくスクロールやクリックを続けることができます。
JavaScript での計算に Wasm で C を使用する利点を示すために、このチュートリアルは、高パフォーマンスの計算を構築するのに役立ちます。 フィボナッチ計算機。次に、Web Worker を利用した Wasm を使用してフィボナッチ数列を再帰的に実行し、JavaScript を使用して計算して、タイミングがどのように積み重なるかを確認します。
集中的な計算をバックグラウンド スレッドにオフロードすることで、プロセッサの負荷が高い場合でもユーザー インターフェイスの機能と流動性を維持する方法を示します。再帰的フィボナッチ アルゴリズムは実際に動作するアプリケーションには適していませんが、このプロジェクトは Web アプリケーションの応答性を維持するための青写真として機能します。
始めましょう。
まず、必要なものがすべて揃っていることを確認してください。
プロジェクト構造を作成します。
プロジェクトでターミナルを開き、wasm-worker-demo に移動します。そのフォルダーに移動したら、「index.html」、「main.js」、「worker.js」、「compute.c」と入力し、ファイルが表示されていることを確認します。正しい場所にいることを確認したら、Emscripten SDK をダウンロードする必要があります。
Emscripten SDK は C/C++ を Wasm にコンパイルします。それなしでは先に進むことはできません。ターミナルで次のコマンドを入力します。
これにより、emsdk という名前のフォルダーが現在のディレクトリに追加されます。
コマンドcd emsdkを使用してemsdkフォルダーに移動します。
Emscripten の最新バージョンをインストールします:./emsdk install 最新
端末で SDK を使用できるように、SDK をアクティブ化します。 ./emsdk activate 最新
最後のステップは、この端末セッションの環境変数を設定することです:source ./emsdk_env.sh
コマンド emcc -v で設定が正確であることを確認します。
ターミナルのメイン プロジェクト フォルダーに戻ります。
ファイルの構築を開始する準備ができました。
Wasm 計算ロジックを C で構築する
compute.c ファイルから始めましょう。このデモで使用するアルゴリズムは再帰的フィボナッチ数列です。コーディングスクールに通ったことのある人にとっては悪夢のようなものです。このアルゴリズムは、運用レベルのアプリケーションには非効率的ですが、このデモには最適です。何十億もの関数呼び出しが作成され、CPU が限界まで押し上げられます。
スクリプト: C から Wasm
Emscripten は、C コードを .wasm バイナリと .js “glue” ファイルにコンパイルします。 .wasm バイナリは、C コードのコンパイルされたバージョンです。これには、ブラウザがネイティブに近い速度で実行できる低レベルの命令が含まれています。 .js「glue」ファイルは言語間のブリッジとして機能し、バイナリをロードするために必要なコードを提供し、JavaScript が WebAssembly モジュール内の関数を呼び出せるようにします。
このコマンドをターミナルに入力して、.wasm ファイルと .js ファイルを構築します。 1 分以内に、それらがプロジェクトに表示されるのが確認できるはずです。
これらのファイル フラグを使用するのは次の理由からです。
- -O3: 高度な最適化。これは、人間が可能な限りコードを高速化するようにコンパイラーに指示します。
- -s MODULARIZE=1: 出力を Promise ベースのモジュールにラップし、安全にロードしやすくします。
- -s EXPORTED_FUNCTIONS: 最適化中に Calculate_fibfunction を削除しないよう Emscripten に指示します。
ウェブワーカー
ワーカーを使用すると、メインスレッドの外部で計算を実行できます。この規模の高速計算はブラウザの注意をハイジャックし、タスクが完了するまで UI をフリーズさせる可能性があるため、この Wasm をメインスレッドで実行することは望ましくありません。これを回避するために、Web Worker を使用します。 Web ワーカーは、ユーザー インターフェイスから完全に独立した独自の分離スレッドで実行される専用のバックグラウンド スクリプトです。
以下のコードは、Emscripten の「glue」スクリプトをロードし、WebAssembly モジュールの準備が完全に完了するのを待つことにより、バックグラウンド環境を初期化します。ロードされると、C ベースのcalculate_fib 関数が使用可能な JavaScript 変数 viacwrap にマップされます。次に、メイン スレッドから数値を受け取るようにイベント リスナーを設定し、単独で計算を実行し、ユーザー エクスペリエンスを中断することなく結果を送り返します。
サーバーの実行
http-serve コマンドを使用してサーバーを実行できます。に移動すると、Web ページが表示されます。入力ボックスに数字を入力し (49 未満の数字から始めます)、計算タイマーを監視します。
すべてをまとめると
ワーカーが計算を処理している間、main.js スクリプトはコマンド センターとして機能します。ワーカーを生成し、データを送信し、結果の準備ができたら画面を更新します。これにより、バックグラウンドでわずか数ピクセル離れたところで大規模な計算が行われているときでも、ユーザー インターフェイスの動作と応答性が維持されます。
以下のコードはワーカー インスタンスを作成し、最終結果をキャッチするリスナーを設定します。ボタンをクリックすると、開始時刻が記録され、入力値がワーカーにポストされ、応答を待って合計実行時間を計算します。
ブラウザに取り込む
これで、index.htmlコードが完成しました。これは、ブラウザでの計算を容易にする基本的な HTML です。
結果
25 未満の小さな数値の場合、WASM エンジンの起動にかかる少額の起動コストは、このような迅速なタスクには価値がないため、実際には JavaScript の方が高速です。ただし、25 に到達し、計算が重くなると、WebAssembly の真の価値が輝き始めます。
50 歳になると、計算は膨大になり、永遠に終わらないかもしれません。ただし、ここが最も重要な部分です。これを Web ワーカー上で実行しているため、ブラウザは生きたままになります。アプリケーションが最終的に制限に達する前に、ボタンをクリックしたり、スクロールしたり、JavaScript バージョンの実行を試みたりすることもできます。これは、WASM が単に速度だけを重視しているわけではないことを証明しています。 UI の応答性を維持することが重要です。
YouTube.COM/THENEWSTACK
テクノロジーの進歩は速いので、エピソードを見逃さないでください。 YouTube チャンネルに登録すると、すべてのポッドキャスト、インタビュー、デモなどをストリーミングできます。
購読する
スケッチで作成されたグループ。
Jessica Wachtel は、InfluxData の開発者マーケティング ライターであり、時系列データの世界をより理解しやすくアクセスしやすくするコンテンツを作成しています。ジェシカはソフトウェア開発と技術ジャーナリズムのバックグラウンドを持っています。
ジェシカ・ワクテルの続きを読む
#WebAssembly #と #Web #Workers #が #のフリーズを防ぐ方法