JavaScriptを補完してウェブを高速化する「WebAssembly」をChromeがついに実装したので実行速度を試してみた
「WebAssembly」は、JavaScriptの生みの親のブランダン・アイクが「ゲームチェンジャー」と表現するほど期待されているウェブ向けのバイナリフォーマットです。モバイル端末やIoT端末の普及が見こまれる中、マシンパワーの劣る端末でも効率よく実行できるように、ウェブの標準言語と言ってよいJavaScript以外の言語をコンパイルするためのユニバーサルなローレベルバイトコードが求められていましたが、ブラウザ開発者はそれぞれ独自にツールを開発する状況でした。
そんなJavaScriptを補完してウェブを高速化するWebAssemblyが、開発者向けブラウザ「Google Chrome Canary」のバージョン51.0.2677.0以降で試験的に実装されることになりました。
V8 JavaScript Engine: Experimental support for WebAssembly in V8
http://v8project.blogspot.jp/2016/03/experimental-support-for-webassembly.html
というわけで早速、Chrome Canaryを試してみます。まずは以下のページから最新版のChrome Canaryをダウンロードします。
Chrome ブラウザ
https://www.google.co.jp/chrome/browser/canary.html
「Chrome Canaryをダウンロード」をクリック。
「同意してインストール」をクリックして、インストーラーをデスクトップなどの好きな場所に保存します。
ダウンロードしたインストーラーを実行。
セキュリティ警告が出た場合は、「実行」をクリック。
インストールが完了すると、デスクトップにショートカットが作成されてChrome Canaryが自動的に起動します。
最初に「Chromeの設定」ページが開きますが、「スキップ」をクリックすればOK。
念のため、アドレスバーに「chrome://help」と入力して、概要でバージョンがWebAssemblyに対応した51.0.2677.0以降であることを確認しておきましょう。
まずは、WebAssemblyを有効にする作業から。アドレスバーに「chrome://flags/#enable-webassembly」と入力。
すると、フラグの設定画面が表示されます。
「Experimental WebAssembly」の下にある「有効にする」をクリック。
画面下の「今すぐ再起動」をクリック。
「Experimental WebAssembly」の下に「無効にする」と表示されればOK。これでWebAssemblyが有効になりました。
WebAssemblyがasm.jsに比べてどれくらい実行速度が速いのかは、以下のサイトの「Angry Bots Demo」を試してみれば分かります。
WebAssembly
https://webassembly.github.io/demo/
サムネイルの下の「Play WebAssembly」「Play asm.js fallback」のボタンをクリックすれば、それぞれWebAssembly、asm.js環境下でのゲームデモが始まります。まずは、「Play WebAssembly」をクリック。
なお、デモページで警告が表示される場合はWebAssemblyが有効化されていないので、あらためてChrome Canaryを設定し直す必要があります。
ゲームをロードするまでしばらく待ちます。
スタート画面が起動しました。
Angry Bots Demoはシューティングゲーム。WebAssemblyを使う場合はヌルヌル快適にプレイできました。
一方で、asm.jsを使うと描画にひっかかりがあり、下の状態でブラウザがフリーズしてしまいました。
Chrome Canary(バージョン51.0.2679.0)でのWebAssemblyの実行速度はasm.jsに比べてかなり速いことが確認できました。Chrome Canaryでの実装を経て、一般的なGoogle Chromeでも近々、WebAssemblyが正式にサポートされることになりそうです。
