I.はじめに
JavaScriptの誕生の始まり、今人気のあるプログラミング言語になるためにするので、Web開発の後ろに昇格。Webアプリケーションは、より複雑になるが、次第にはJavaScriptの問題を暴露しました：
（1）大規模ウェブプロジェクト困難の開発に文法すぎるフレキシブルリード。
（2）の性能の欠如は、シーンのいくつかのニーズを満たすために。
第二に、なぜ必要WebAssembly
上記課題を解決するために、JavaScript言語は、次のような場所でいくつか、があります。
（1）マイクロソフト活字体は、 JSコードの堅牢性を高めるために、静的な型チェック機構を追加することによって、JS緩い構文を向上させることができます。
（2）Googleのダーツは、直接パフォーマンスを向上させるためにダートのプログラムを実行するために、ブラウザの新しい仮想マシンを導入しています。
Firefoxの（3）asm.jsは、 JSのサブセットを取っている、asm.jsのためのJSエンジンは、パフォーマンスの最適化を行います。
より多くの長所と短所を試してみてください。どこで：
（1）活字体のみJSは、JSが最終的に動作するようにコンパイルする必要が緩い構文の問題を解決するため、パフォーマンスが改善されませんでした。
（2）ダートはクロムプレビュー版で実行することができ、何の主要なブラウザは、人々の開発に多くのダートをサポートしていません。
（3）単純すぎる文法asm.js、非常に限られた、オープンな発見率があります。
ビッグスリーのブラウザは、独自のソリューションを提案し、相補互換性のある、ウェブの目的に反し、JSが直面する問題を解決するための規範の新しいセットは、素晴らしいことだので、もし統一された仕様は、ウェブが今日行くことができますされています。
だから、webAssemblyが登場し、webAssemblyは主流のブラウザはすでにwebAssemblyをサポートする、新しいバイトコード形式です。JS及び実行異なる解釈が必要であり、根本的なマシンコード、バイトコードwebassembly非常に類似した高速ローディング動作、JSに対してこうして性能が大幅に向上解釈されます。それwebAssemblyは、プログラミング言語ではなく、バイトコードの基準は、必要性が高レベルの言語を実行するためにwebAssembly仮想マシンにバイトコードをコンパイルするために、ブラウザベンダーが行う必要がありwebAssemblyに応じて仮想マシンの仕様を実装することです。
三、webAssembly原則
webAssembly原理を調べるために、我々は、コンピュータが実行する方法を把握する必要があります。
コンピュータの電子部品により、処理エレクトロニクスを容易にするためにのみ2つの状態、すなわち直接、開閉、1と0のため、唯一のコンピュータ1,0に知られている、論理1及び0必要によって表されるデータが存在しますコンピュータ上で稼働しているマシンコードにロードされました。読めないマシンコードは、高級言語、C、C ++を通じて人々ので、Javaは、移動して、他には書き込まれ、マシンコードにコンパイル。
別のコンピュータのCPUアーキテクチャので、X86、AMD64、ARMを含むマシンコード規格異なる、共通のCPUアーキテクチャ、自己コードに高水準言語をプログラミングするとき、ターゲットアーキテクチャを指定する必要があります。
webassemblyバイトコードを消去マシンコード異なるアーキテクチャである、webassemblyバイトコードは、直接任意のCPUアーキテクチャ上で実行されないが、原因マシンコードに非常に近いため、非常に迅速なアーキテクチャに対応するマシンコードに変換することができますしたがって、マシンコードに近いwebAssembly速度は、それは非常に多くのように聞こえるJavaバイトコード。
尊敬JSでは、webAssemblyは、次のような利点があります。
（1）小型。ブラウザ上で実行されるコンパイルされたバイトコードの唯一のローディングため、同じ論理がJSファイル記述ストリングの体積よりはるかに小さいです。
（2）高速読み込み。小さなファイルサイズに起因して、ロードし、操作の前に待機時間を短縮インスタンス化するwebAssembly速く、実装を説明する必要性と相まって。
（3）少数の互換性の問題。webAssemblyはほとんど変化がちょうどやってのプロセスと互換性のあるバイトコードにコンパイルされた高レベル言語から、変更が発生した場合でも、良いです後に開発された、非常に低レベルのバイトコード仕様です。webAssembly発生するともJSの互換性の問題は、JSインターフェイスをブリッジされます。
異なるプラットフォームへの変換作業機械コードを達成するために、各高レベル言語ソースコードが繰り返し、高水準言語のみ中間言語基礎となる仮想マシン（LLVM）を知る（LLVM IR）を生成する必要があり、LLVMを達成することができます。
（1）LLVM IR異なるCPUアーキテクチャは、マシンコードを生成します。
（2）性能とは、マシンコードのコンパイルのサイズを最適化します。
またLLVMコンパイラはまた限り高レベル言語はLLVM IRに変換することができることを意味するwebAssemblyバイトコードにLLVM IR機能を達成し、webAssemblyをバイトコードにコンパイルすることができ、現在バイトコードレベルの言語をコンパイルwebAssembly彼らは以下のとおりです。
（1）AssemblyScript：フロントエンドのための文法や学習のための活字体一貫した、低コストのフロントエンドは、webAssembly最良の選択を記述します。
（2）C \ C ++：公式の詳細を確認する方法をお勧めドキュメントを。
（3）錆：文法の複雑な、高い学習コストは、フロントエンドには、それは会うことができませんでした。詳細についての使用を参照ドキュメントを。
（4）Kotlin：文法とJavaは、非常によく似たJS、低コストの言語学習は、詳細な参照文書を。
（5）golang：文法シンプル、低コストの学習。しかし、まだ正式に段階的にリリースされていないwebAssemblyのために、詳細な参照文書を。
LLVM IRの部分を変換するための高レベルの言語のために通常担う各CPUアーキテクチャの一部に対応する機械コードにコンパイルLLVM IR、コンパイラのフロントエンドと呼ばれるが、エンドコンパイラバックと呼ばれ、今よりバックエンドとして、より高レベルのプログラミング言語の選択LLVM、高レベルの言語は、ちょうどLLVM IRプログラムの実行性能に文法翻訳を維持しながら、より高い開発効率をどのように提供するかに焦点を当てます。
四、webAssembly書きます
4.1なぜAssemblyScript webAssembly開発言語として
他の言語C、さびなどに比べwebAssemblyを書くためAssemblyScript、利点がある：フロントエンドのために新しい言語を学ぶための追加コストなしのため、およびwebAssemblyブラウザは活字体のコンパイラでコンパイルすることができますサポートしていないため、通常実行することができますJSコード。これにより、JSのwebAssemblyからのスムーズな移行を達成します。
アクセスの4.2構築のWebPACK
すべての新しいウェブ開発技術と、最終的に構築するために、スムーズなwebAssembly開発プロセスを提供するために、その後、具体的な手順WebPACKの導入を開始しました。
1、インストール依存、TS AssemblyScript源はwebAssemblyにコンパイルされるようになっています。
{
"devDependencies": {
"assemblyscript": "github:AssemblyScript/assemblyscript",
"assemblyscript-typescript-loader": "^1.3.2", "typescript": "^2.8.1", "webpack": "^3.10.0", "webpack-dev-server": "^2.10.1" } }
2、ローダーに参加し、webpack.config.jsを変更します。
module.exports = {
module: {
rules: [
{
test: /\.ts$/,
loader: 'assemblyscript-typescript-loader',
options: {
sourceMap: true, } } ] }, };
コンパイラが導入された組み込みの型や関数AssemblyScript活字体を支えることができるように3、活字体のコンパイラ設定tsconfig.jsonを変更します。
{
"extends": "../../node_modules/assemblyscript/std/portable.json",
"include": [
"./**/*.ts"
]
}
4、直接AssemblyScript組み込みの設定ファイルから継承した構成。
五、webAssemblyツール
上記に加えてwebAssemblyバイナリツールボックス、webAssemblyコミュニティならびに頻繁に使用されるツール。
（1）Emscripten：wasmへの可能性のあるC、C ++コード、asm.js.
（2）Binaryenは：単純なIRを提供し、IRはWASMに変換され、コンパイラを最適化する際WASMを提供し、仮想マシンWASM、WASM圧縮機能、前述AssemblyScriptは、彼に基づいています。
六、webAssembly JSのAPI
現在webAssemblyのみJSを通じてロードして実行、将来はロードして実行webAssembly JSとすることにより、ロードするブラウザようなものであってもよいし、JSはここwebAssemblyを呼び出す方法です。
JSトーンがWebAssembly 3つの主要なステップに分割：ローディングバイトコード>バイトコードコンパイラ>インスタンス化され、3特定操作である上記ステップの後にコールするJS WebAssemblyインスタンスによって取得されました：
1は、ネットワーク要求するブラウザの読み込みバイトコードを、nodejsためのバイトコードは、ファイルにfsのモジュールを読み込むことができます。
2は、バイトコードを取得した後JSによってwebAssemblyのAPIにより、ArrayBufferへの変換後にコンパイルする必要があります webAssembly.compile約束がでコンパイル解決されますwebAssembly.module必要とされ、このモジュールを直接呼び出すことはできません。
図3は、モジュールの必要性を得た後webAssembly.instance JSモジュールはコールのように使用することができた後、インスタンス化するAPIモジュール、インスタンスを取得しました。
手順2と3の1つは、1つのステップ、前述で組み合わせることができる WebAssembly.instantiate これらのものの両方を行うため。
WebAssembly.instantiate(bytes).then(mod=>{
mod.instance.f(50);
})
七、webAssembly JSを呼び出します
前の例は、WebAssemblyモジュールを呼び出すためにJSを使用することですが、いくつかのシナリオの下でWebAssemblyブラウザAPIモジュール内で呼び出す必要があり、以下はWebAssemblyでJSを呼び出す方法について説明します。
WebAssembly.instantiate関数は第二引数WebAssembly.instantiate（バイト、importObject）をサポートし、この効果importObjectパラメータは、あなたがWebAssemblyのJS JS JSモジュールを呼び出す必要がWebAssembly渡されます。具体的な例として、フィボナッチ数列を計算する前述の変換はWebAssembly JSコード変換モジュールをロードする必要と、WebAssemblyポップで算出された結果でWebのwindow.alert関数を呼び出されます。
WebAssembly.instantiate(bytes,{
window:{
alert:window.alert
}
}).then(mod=>{
mod.instance.f(50);
})AssemblyScriptで書かれたソースコードを変更する必要があるにも対応します。
// 声明从外部导入的模块类型
declare namespace window {
export function alert(v: number): void; } function _f(x: number): number { if (x == 1 || x == 2) { return 1; } return _f(x - 1) + _f(x - 2) } export function f(x: number): void { // 直接调用 JS 模块 window.alert(_f(x)); }以前よりも出力の数行以上をコンパイルするワストのASCのASC f.tsコマンド・ファイルによって修正されたソースコードの再利用上記AssemblyScript。
(import "window" "alert" (func $src/asm/module/window.alert (type 0))) (func $src/asm/module/f (type 0) (param f64) get_local 0 call $src/asm/module/_f call $src/asm/module/window.alert)この余分なロジックは、モジュールAssemblyScript着信コールのコードワストのJSの一部です。
これらの共通のAPIに加えて、WebAssemblyはまた、いくつかのAPIを提供し、あなたはこれを使用することができます ファイルをd.ts WebAssembly JSのAPIのすべての詳細を参照してください。
八、単にブラウザより
ブラウザ外実行に加えて、だけでなく、他の操作環境で下地としてwebAssemblyバイトコード、。
1、直接実行wasmバイナリファイル
Macシステムが正常にインストールされたことをbinaryenインストール醸造で、あなたはwasmシェルf.wasmファイルで直接実行することができた後、前述のBinaryenは、コマンドラインで直接wasmバイナリを実行するためのツールを提供します
nodejsで実行されている2、
現在、V8 JSエンジンがWebAssembly、Chromeのサポートを追加しました、そしてWebAssemblyもNode.jsの環境で実行できるようにNode.jsのは、V8エンジンとして使用されています。
WebAssemblyは、同じ仮想マシンで実行したときにV8エンジンJS、WebAssemblyとJSをJSとWebAssembly間の相互通話を実現するのは簡単で、WebAssemblyは別の仮想マシンで実行するのではなく、実行されます。
上記の例は、Node.jsのには、次のコードを使用することができます実行します
const fs = require('fs');
function toUint8Array(buf) { var u = new Uint8Array(buf.length); for (var i = 0; i < buf.length; ++i) { u[i] = buf[i]; } return u; } function loadWebAssembly(filename, imports) { // 读取 wasm 文件，并转换成 byte 数组 const buffer = toUint8Array(fs.readFileSync(filename)); // 编译 wasm 字节码到机器码 return WebAssembly.compile(buffer) .then(module => { // 实例化模块 return new WebAssembly.Instance(module, imports) }) } loadWebAssembly('../temp/assembly/module.wasm') .then(instance => { // 调用 f 函数计算 console.log(instance.exports.f(10)) });WebAssembly Nodejs環境で実行する意味は、無視することができるであろうネイティブモジュールのパフォーマンスがWebAssemblyよりも優れている間Nodejsは、実行するネイティブモジュールをサポートしているため。あなたがCである場合は、錆あなたが呼び出すことができるネイティブモジュールのNodejsに直接コンパイルすることができ、WebAssembly書き込みます。
九、webAssembly見通し
WebAssembly主にパフォーマンスのボトルネックJSを解決するための上記コンテンツが表示され、それはWebAssembly必要とする用途に適しているシーン計算集約型のような、。
（1）ブラウザ内のオーディオとビデオの処理、flv.js 性能を書き換えるWebAssembly使用が大幅に改善された後。
（2）webAssembly書き換え、関係する計算の多数デフDOMを反応コアモジュールと反応すると、パフォーマンスを向上させることができます。JSエンジンJavaScriptCoreにおけるサファリブラウザはまたRNはまた、アプリケーションのパフォーマンスを向上させることができ、webAssemblyをサポートするために使用されています。
（3）3Dウェブゲームのパフォーマンスのボトルネックで大躍進、サギエンジンはwebassembly利用を模索し始めています。
X.の概要
標準では、ファイナライズされているとWebAssemblyは主流のブラウザを達成されますが、次のような問題がありますが。
（1）ブラウザの互換性は、ブラウザのサポートの最新バージョン、および異なるブラウザJS webAssembly相互に矛盾トーンAPIのサポート、良いではありません。
（2）生態系の不完全なツールの未熟は、あなたが滑らかな書き経験webAssembly言語を見つけることができない、予備的な段階にとどまっています。
（3）ほとんど情報を学習するだけでなく、採掘ピットを探求するより多くの人々を必要としています。
短いWebAssemblyではない、あまりにも成熟した今、あなたのチームはパフォーマンスの問題耐え難いない場合は、今すぐ製品にWebAssembly使用は、時間ではありません、これは開発チームの効率に影響を与える、またはピットに遭遇する可能性があるため、容易に解決することはできません発育を阻止しました。
XIリファレンス
1、http://www.ruanyifeng.com/blog/2017/09/asmjs_emscripten.html
2、https://www.ibm.com/developerworks/cn/opensource/os-cn-clang/index.html
3、https://developer.mozilla.org/zh-CN/docs/WebAssembly/Understanding_the_text_format
4、https://developer.mozilla.org/zh-CN/docs/WebAssembly/Using_the_JavaScript_API