ホームページ >ウェブフロントエンド >jsチュートリアル >Rust -> asm.js & webassembly - WEB 用のハイパフォーマンスコンピューティング

Rust -> asm.js & webassembly - WEB 用のハイパフォーマンスコンピューティング

php中世界最好的语言オリジナル: 2017-11-18 15:18:502928ブラウズ

JavaScriptに関しては、フロントエンドの世界は常に変化していると以前に述べました。以前の記事で、Emscripten を使用して C 言語をコンパイルし、次に asm.js と WebAssembly を使用することを説明しました。この方法により、フロントエンドコードの実行速度が大幅に向上しますが、実際のプロジェクトでは C 言語が使用できないためです。高度な機能が多く、実装できない機能も多く、大規模なプロジェクトの開発には向かず、C++は複雑すぎるため、最終的にはRustを使用することにしました。

最初は Go、Rust、Swift のどれを使用するか迷っていましたが、Go は現在 WebAssembly へのコンパイルをサポートしていないことがわかりました。Swift はすべて LLVM コンパイラーで作られているため、サポートできるはずです。情報によると、

https://stackoverflow.com/questions/46572144/compile-swift-to-webassemblyをサポートするには自分でLLVMをコンパイルする必要があるようです。さらに、Rust のいくつかの機能がとても気に入っています。Rust は非常に複雑で、Scala や Haskell に似ていると聞きました。しかし、私は Scala に精通していて、Haskell も少し学習したので、Rust を試してみることにしました。

https://github.com/ChristianMurphy/compile-to-web ここでは、現在 WebAssembly にコンパイルできる言語を表示できます。

追記、ちなみに、asm.js と Rust はどちらも Mozilla によって作成されています。

Rust管理ツールrustupをインストールします

rustupは、コンパイラrusc、パッケージ管理ツールcargoなどを含むRust関連ツールのインストールと管理に使用されます。安定版、ベータ版、夜間版、など、異なるバージョン間の切り替えは nvm と同様です。

curl https://sh.rustup.rs -sSf | sh

Emscripten Rustコンパイラをインストールします

rustupを使用して最新の試用版(Nightlyバージョン)をインストールします:

rustup toolchain add nightly
rustup target add wasm32-unknown-emscripten --toolchain nightly

cmakeをインストールします

プラットフォームに応じて選択します:

brew install cmake                  # MacOS, brew
sudo port install cmake             # MacOS, MacPorts
sudo apt-get install cmake          # Debian Linux

Emscriptenをインストールします

前の記事を参照するか、直接参照してください次のコマンドを実行してください:

wget https://s3.amazonaws.com/mozilla-games/emscripten/releases/emsdk-portable.tar.gz
tar -xvf emsdk-portable.tar.gz
cd emsdk-portable
./emsdk update
./emsdk install sdk-incoming-64bit

このステップには時間がかかります。注文を実行した後、友達と食事に行ったので、具体的な時間はわかりません。

次のパスを PATH に追加します。

~/emsdk-portable
~/emsdk-portable/clang/fastcomp/build_incoming_64/bin
~/emsdk-portable/emscripten/incoming

ターミナルで emcc -v を実行して、インストールが成功したかどうかを確認します。

Webpack で Rust を実行する

新しい Rust/Javascript ハイブリッドプロジェクトを作成する:

cargo new webasm --bin --vcs none
cd webasm
npm init
rustup override set nightly

Webpack、webpack-dev-server、rust-wasm-loader、

npm i -D webpack webpack-dev-server rust-wasm-loader

をインストールする

{
  "name": "webasm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "compile": "webpack --progress",
    "serve": "http-server",
    "start": "webpack-dev-server --content-base ./build"
  },
  "author": "magicly",
  "license": "ISC",
  "devDependencies": {
    "http-server": "^0.10.0",
    "rust-wasm-loader": "^0.1.2",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  }
}

package.json スクリプトを追加する:

<!DOCTYE html>
<html>
 
<head>
  <title>Hello WebAssembly</title>
</head>
 
<body>
< div id="container"></div>
  <script src="/bundle.js"></script>
</body>
 
</html>

ビルド内新しいファイルindex.htmlを作成します:

module.exports = {
  entry: &#39;./src/index.js&#39;,
  output: {
    filename: &#39;bundle.js&#39;,
    path: dirname + &#39;/build&#39;,
  },
  module: {
    rules: [
      {
        test: /\.rs$/,
        use: {
          loader: &#39;rust-wasm-loader&#39;,
          options: {
            <span>// The path to the webpack output relative to the project root</span>
            path: &#39;&#39;,
            release: true <span>// 没有的话性能巨差，差不多只有1/10</span>
          }
        }
      }
    ]
  },
  <span>// The .wasm &#39;glue&#39; code generated by Emscripten requires these node builtins,</span>
  <span>// but won&#39;t actually use them in a web environment. We tell Webpack to not resolve those</span>
  <span>// require statements since we know we won&#39;t need them.</span>
  externals: {
    &#39;fs&#39;: true,
    &#39;path&#39;: true,
  }
}

webpack.config.jsを設定します:

fn main() {
    println!("Hello, world!");
}
 
<span>// Functions that you wish to access from Javascript</span>
<span>// must be marked as no_mangle</span>
#[no_mangle]
pub fn add(a: i32, b: i32) -> i32 {
    return a + b
}

新しいsrc/main.rsファイルを作成し、jsから呼び出したい関数を追加します:

const wasm = require(&#39;./main.rs&#39;)
 
wasm.initialize({ noExitRuntime: true }).then(module => {
  <span>// Create a Javascript wrapper around our Rust function</span>
  const add = module.cwrap(&#39;add&#39;, &#39;number&#39;, [&#39;number&#39;, &#39;number&#39;])
  
  console.log(&#39;Calling rust functions from javascript!&#39;)
  console.log(add(1, 2))
})

新しいsrc/を作成しますIndex.js を作成し、WebAssembly モジュールをロードするコードを記述します:

rrreee

次に、npm start を実行し、http://localhost:8080/ にアクセスして、Rust コードを呼び出した効果を確認します。ホットアップデートにも対応しており、Rustコードを直接変更して保存すると、最新の効果をページ上で確認できます。

Rust -> asm.js & webassembly - WEB 用のハイパフォーマンスコンピューティング

前回の記事でコードをテストしました。Rust に最適化されたコードを直接実行するのにかかる時間は、基本的には C コードと同じですが、wasm で実行すると実際には 300 ミリ秒かかります。原因はわかりません。設定が適切でないか、Rust の wasm へのコンパイルが最適化されていません。 Rust の WebAssembly のサポートはまだ特に成熟していない可能性があります。フォローアップするには https://github.com/rust-lang/rust/issues/38804 をフォローしてください。

また、RustにはDOMを操作するためのパッケージ https://crates.io/crates/webplatform がありますが、現状では使えません(無駄な気がします)

上記の記事は私の記事ですWEB のハイパフォーマンスコンピューティング困っている友人のお役に立てれば幸いです。以前の記事は「asm.js & webassembly-WEB のハイパフォーマンスコンピューティング」と「asm.js & webassembly-WEB のハイパフォーマンスコンピューティング」です。困っている友達はそこに行って見てください。

推奨書籍:

WebWorkers - フロントエンド向けのハイパフォーマンスコンピューティング

asm.js & webassembly-WEB ハイパフォーマンスコンピューティング

JavaScript 送信フォーム検証の 3 つの方法を共有

以上がRust -> asm.js & webassembly - WEB 用のハイパフォーマンスコンピューティングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript 送信フォームと送信送信の違いの分析次の記事：JavaScript 送信フォームと送信送信の違いの分析

続きを見る

Rust -> asm.js & webassembly - WEB 用のハイ パフォーマンス コンピューティング

関連記事

Rust -> asm.js & webassembly - WEB 用のハイパフォーマンスコンピューティング