发布网友 发布时间:2022-05-15 14:08
共2个回答
懂视网 时间:2022-05-15 18:29
我们之前说过,对于javascript来言,前端的世界千变万化。前几篇文章给大家说过用Emscripten来编译C语言然后用到asm.js和WebAssembly,这种方法是可以始前端代码的执行速度提升很大,但是由于在实际的项目里C语言缺乏很多高级特性,很多功能没法实现,不利于开发大型的项目,而C++又太过于复杂,所以最终我选择了用Rust。一开始也纠结过要用Go还是Rust或者Swift的,后来发现Go目前还不支持编译到WebAssembly,Swift按理说应该可以支持的,因为都是用LLVM做的编译器,不过没有找到好的资料,好像说要自己编译LLVM去支持https://stackoverflow.com/questions/46572144/compile-swift-to-webassembly 。另外对Rust的一些特性很是喜欢,听说Rust很复杂,比较像Scala和Haskell,而偏偏我对Scala还算熟悉,也学过一下Haskell,所以决定尝试一下Rust。
https://github.com/ChristianMurphy/compile-to-web 这里可以查看目前能编译到WebAssembly的语言。
PS, 话说asm.js和Rust都是Mozilla搞的呢。
安装Rust的管理工具rustup
rustup用于安装管理Rust的相关工具,包括编译器rustc、包管理工具cargo等,支持安装不同版本比如stable, beta, nightly等以及在不同版本之间切换,类似于nvm。
curl https://sh.rustup.rs -sSf | sh
安装Emscripten Rust编译器
用rustup安装最新体验版(Nightly Version):
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
这一步花的时间比较久,据说要2个多小时,我是执行完命令就出去跟朋友吃饭了,所以具体时间不知道。
添加下列路径到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
增加package.json脚本:
{ "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" } }
在build目录下新建文件index.html:
<!DOCTYE html> <html> <head> <title>Hello WebAssembly</title> </head> <body> < div id="container"></div> <script src="/bundle.js"></script> </body> </html>
配置webpack.config.js:
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, } }
新建src/main.rs文件,添加我们要从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/index.js,写代码加载WebAssembly模块:
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)) })
然后执行npm start,访问http://localhost:8080/就可以看到调用rust代码的效果了。并且还支持热更新哦,直接修改rust代码,保存,页面就能看到最新效果。
测试了一下前一篇里的代码,直接运行rust优化过的代码只需要300多ms,这个基本跟C代码一样,但是用wasm运行,居然要2.7s左右,不知道是哪里没有配置好,还是说现在Rust编译成wasm没有优化好。Rust支持WebAssembly应该还不是特别成熟,可以关注https://github.com/rust-lang/rust/issues/38804 跟进。
另外Rust有一个包https://crates.io/crates/webplatform, 可以用来操作DOM,不过我目前用不到(感觉没啥用)
以上文章就是我对于WEB的高性能计算的理解,希望能帮助到有需要的朋友,之前也有俩篇文章《asm.js & webassembly-WEB的高性能计算》,《asm.js & webassembly-WEB的高性能计算》,有需要的朋友可以去看一下。
推荐阅读:
热心网友 时间:2022-05-15 15:37
Rust 的缩写是完全可以接受的嘛,也不是非常多,fn mod 这些都是很正常的缩写嘛,之前看到有人说 Rust 丑陋,应该是说指针语法繁杂,现在指针语法已经被统一和消除了(类型上来说貌似只有 & 是特殊的语法),一般使用是不会遇到让人厌恶的情景的。