WebAssembly を使用して Web アプリケーションを 20 倍高速化した方法

この記事では、JavaScript の計算を WebAssembly に置き換えることによってブラウザ アプリケーションを高速化するケースについて説明します。

WebAssembly - それは何ですか?

つまり、これはスタックベースの仮想マシン用のバイナリ命令フォーマットです。 Wasm (略称) はプログラミング言語と呼ばれることが多いですが、そうではありません。 命令形式はブラウザ上でJavaScriptとともに実行されます。

WebAssembly は、C/C++、Rust、Go などの言語でソースをコンパイルすることで取得できることが重要です。 ここでは、統計的タイピングといわゆるフラット メモリ モデルが使用されます。 前述したように、コードはコンパクトなバイナリ形式で保存されるため、コマンド ラインを使用してアプリケーションを実行するのとほぼ同じ速度になります。 これらの機能により、WebAssembly の人気が高まりました。

リマインダー： 「Habr」のすべての読者が対象 - 「Habr」プロモーション コードを使用してスキルボックス コースに登録すると 10 ルーブルの割引。

スキルボックスは次のことを推奨します。 実践コース 「モバイルデベロッパーPRO」.

現在、Wasm は、Doom 3 などのゲームから Autocad や Figma などの Web 移植アプリケーションに至るまで、多くのアプリケーションで使用されています。 Wasm はサーバーレス コンピューティングなどの分野でも使用されます。

この記事では、Wasm を使用して分析 Web サービスを高速化する例を示します。 わかりやすくするために、C で書かれた動作するアプリケーションを取り上げ、WebAssembly にコンパイルしました。 結果は、JS のパフォーマンスの低いセクションを置き換えるために使用されます。

アプリケーションの変革

この例では、遺伝学者を対象とした fastq.bio ブラウザ サービスを使用します。 このツールを使用すると、DNA シーケンス (解読) の品質を評価できます。

以下に、実際のアプリケーションの例を示します。

プロセスの詳細は非専門家にとっては非常に複雑であるため説明する価値はありませんが、要するに、科学者は上記のインフォグラフィックを使用して、DNA 配列決定プロセスがスムーズに進んだかどうか、またどのような問題が発生したかを理解することができます。

このサービスには、代替となるデスクトップ プログラムがあります。 しかし、fastq.bio を使用すると、データを視覚化することで作業をスピードアップできます。 他のほとんどの場合、コマンド ラインを使用できる必要がありますが、すべての遺伝学者が必要な経験を持っているわけではありません。

すべてがシンプルに機能します。 入力は、テキスト ファイルの形式で表示されるデータです。 このファイルは、特殊なシーケンス ツールによって生成されます。 このファイルには、DNA 配列のリストと各ヌクレオチドの品質スコアが含まれています。 ファイル形式は .fastq であり、これがこのサービスの名前の由来です。

JavaScriptでの実装

fastq.bio を使用する際のユーザーの最初のステップは、適切なファイルを選択することです。 File オブジェクトを使用して、アプリケーションはファイルからデータのランダムなサンプルを読み取り、そのバッチを処理します。 ここでの JavaScript の仕事は、単純な文字列操作を実行し、メトリクスを計算することです。 それらの XNUMX つは、さまざまな DNA 断片上のヌクレオチド A、C、G、および T の数です。

必要なインジケーターを計算した後、Plotly.js を使用して視覚化され、サービスは新しいデータ サンプルで動作を開始します。 チャンク化は、UX の品質を向上させるために行われます。 すべてのデータを一度に操作すると、シーケンス結果を含むファイルが数百ギガバイトのファイル領域を占有するため、プロセスがしばらくフリーズします。 このサービスは、0,5 ～ 1 MB のサイズのデータ​​を受け取り、それらを段階的に処理してグラフィック データを構築します。

それはどのように動作するのです：

赤い四角形には、視覚化を取得するための文字列変換アルゴリズムが含まれています。 これは、サービスの中で最も計算量が多い部分です。 Wasm に置き換えてみる価値はあります。

WebAssembly のテスト

Wasm の使用の可能性を評価するために、プロジェクト チームは、fastq ファイルに基づいて QC メトリクス (QC - 品質管理) を作成するための既製のソリューションを探し始めました。 検索は C、C++、または Rust で書かれたツール間で実行されたため、コードを WebAssembly に移植することができました。 さらに、ツールは「未加工」であってはならず、科学者によってすでにテストされたサービスが必要でした。

結果として、次のような選択が行われました。 シーケンス。 このアプリケーションは非常に人気があり、オープンソースであり、ソース言語は C です。

Wasm に変換する前に、デスクトップ用の seqtk のコンパイル原理を確認する価値があります。 Makefile によると、必要なものは次のとおりです。

# Compile to binary
$ gcc seqtk.c 
   -o seqtk 
   -O2 
   -lm 
   -lz

原則として、Emscripten を使用して seqtk をコンパイルできます。 そこにない場合は、私たちが対応します。 Dockerイメージ.

$ docker pull robertaboukhalil/emsdk:1.38.26
$ docker run -dt --name wasm-seqtk robertaboukhalil/emsdk:1.38.26

必要であれば、 自分で組み立てることができます、しかし時間がかかります。

コンテナ内では、gcc の代わりに emcc を簡単に使用できます。

# Compile to WebAssembly
$ emcc seqtk.c 
    -o seqtk.js 
    -O2 
    -lm 
    -s USE_ZLIB=1 
    -s FORCE_FILESYSTEM=1

最小限の変更:

Emscripten は、バイナリ ファイルに出力する代わりに、.wasm および .js を使用してファイルを生成します。このファイルは、WebAssemby モジュールの実行に使用されます。

USE_ZLIB フラグは、zlib ライブラリをサポートするために使用されます。 このライブラリは配布され、WebAssembly に移植されており、Emscripten はそれをプロジェクトに組み込みます。

Emscrippten 仮想ファイル システムがアクティブ化されます。 これ POSIX 風の FS、ブラウザ内のRAMで実行されます。 ページが更新されると、メモリがクリアされます。

仮想ファイル システムが必要な理由を理解するには、コマンド ラインから seqtk を実行する方法と、コンパイルされた WebAssembly モジュールを実行する方法を比較する価値があります。

# On the command line
$ ./seqtk fqchk data.fastq
 
# In the browser console
> Module.callMain(["fqchk", "data.fastq"])

ファイル入力ではなく文字列の seqtk を書き換えないように、仮想ファイル システムへのアクセスを取得する必要があります。 この場合、データ フラグメントは、main() seqtk の呼び出しを持つ仮想 FS 内の data.fastq ファイルとして表示されます。

新しいアーキテクチャは次のとおりです。

この図は、ブラウザのメイン スレッドでの計算の代わりに、 ウェブワーカー。 この方法を使用すると、ブラウザの応答性に影響を与えることなく、バックグラウンド スレッドで計算を実行できます。 WebWorker コントローラーはワーカーを開始し、メインスレッドとの対話を管理します。

seqtk コマンドは、マウントされたファイルに対して Worker を使用して実行されます。 実行完了後、Worker は Promise の形式で結果を生成します。 メインスレッドがメッセージを受信すると、その結果を使用してグラフが更新されます。 などを数回繰り返します。

WebAssembly のパフォーマンスについてはどうですか?

パフォーマンスの変化を評価するために、プロジェクト チームは XNUMX 秒あたりの読み取り操作数のパラメーターを使用しました。 どちらの実装も JavaScript を使用するため、インタラクティブなグラフの構築にかかる時間は考慮されません。

すぐに使えるソリューションを使用した場合、パフォーマンスは XNUMX 倍向上しました。

これは素晴らしい結果ですが、やはり最適化の余地もあります。 実際のところ、多くの QC 解析結果は seqtk で使用されないため、削除しても問題ありません。 こうすると、JS に比べて結果が 13 倍向上します。

これは、printf() コマンドをコメントアウトするだけで実現できました。

しかし、それだけではありません。 実際のところ、この段階では、fastq.bio はさまざまな C 関数を呼び出して分析結果を受け取り、それぞれの関数が独自の特性セットを計算するため、ファイルの各フラグメントが XNUMX 回読み取られます。

この問題を回避するために、20 つの機能を XNUMX つに結合することが決定されました。 その結果、生産性がXNUMX倍に向上しました。

このような優れた結果が常に達成できるわけではないことは注目に値します。 場合によってはパフォーマンスが低下するため、ケースごとに評価する価値があります。

結論として、Wasm はアプリケーションのパフォーマンスを向上させる機会を提供しますが、賢明に使用する必要があると言えます。

スキルボックスは次のことを推奨します。

• XNUMX年間の実践コース 「私はプロのウェブ開発者です」.
• オンラインコース 「0からのC#開発者」.
• 実践一年コース 「0からPROまでのPHP開発者」.

出所： habr.com