ホームページ > 記事 > ウェブフロントエンド > Rust -> asm.js & webassembly - WEB 用のハイ パフォーマンス コンピューティング
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 | shEmscripten Rustコンパイラをインストールしますrustupを使用して最新の試用版(Nightlyバージョン)をインストールします:
rustup toolchain add nightly rustup target add wasm32-unknown-emscripten --toolchain nightlycmakeをインストールしますプラットフォームに応じて選択します:
brew install cmake # MacOS, brew sudo port install cmake # MacOS, MacPorts sudo apt-get install cmake # Debian LinuxEmscriptenをインストールします前の記事を参照するか、直接参照してください次のコマンドを実行してください:
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 nightlyWebpack、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: './src/index.js', output: { filename: 'bundle.js', path: dirname + '/build', }, module: { rules: [ { test: /\.rs$/, use: { loader: 'rust-wasm-loader', options: { <span>// The path to the webpack output relative to the project root</span> path: '', release: true <span>// 没有的话性能巨差,差不多只有1/10</span> } } } ] }, <span>// The .wasm 'glue' code generated by Emscripten requires these node builtins,</span> <span>// but won't actually use them in a web environment. We tell Webpack to not resolve those</span> <span>// require statements since we know we won't need them.</span> externals: { 'fs': true, 'path': 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('./main.rs') wasm.initialize({ noExitRuntime: true }).then(module => { <span>// Create a Javascript wrapper around our Rust function</span> const add = module.cwrap('add', 'number', ['number', 'number']) console.log('Calling rust functions from javascript!') console.log(add(1, 2)) })
新しいsrc/を作成しますIndex.js を作成し、WebAssembly モジュールをロードするコードを記述します:
rrreee次に、npm start を実行し、http://localhost:8080/ にアクセスして、Rust コードを呼び出した効果を確認します。ホットアップデートにも対応しており、Rustコードを直接変更して保存すると、最新の効果をページ上で確認できます。
前回の記事でコードをテストしました。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 のハイパフォーマンス コンピューティング」です。困っている友達はそこに行って見てください。
推奨書籍:
以上がRust -> asm.js & webassembly - WEB 用のハイ パフォーマンス コンピューティングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。