前端高性能计算之三:Rust -> asm.js & webassembly

前一篇我们探索了用Emscripten编译C代码到asm.jsWebAssembly,使前端代码执行速度大大提升,但是实际项目中由于C语言缺乏很多高级特性,不利于开发大型项目(说C可以开发操作系统kernel这种大型项目的同学不好意思,我没那么nb),而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

安装Emscripten Rust编译器

用rustup安装最新体验版(Nightly Version):

安装cmake

根据平台自行选择:

安装 Emscripten

参考前一篇,或者直接执行下面命令:

这一步花的时间比较久,据说要2个多小时,我是执行完命令就出去跟朋友吃饭了,所以具体时间不知道。

添加下列路径到PATH中:

终端执行emcc -v检查是否安装成功。

用Webpack运行Rust

新建一个Rust/Javascript混合项目:

安装Webpack, webpack-dev-server, rust-wasm-loader,

增加package.json脚本:

build目录下新建文件index.html

配置webpack.config.js

新建src/main.rs文件,添加我们要从js中调用的函数:

新建src/index.js,写代码加载WebAssembly模块:

然后执行npm start,访问http://localhost:8080/就可以看到调用rust代码的效果了。并且还支持热更新哦,直接修改rust代码,保存,页面就能看到最新效果。 rust-webassembly-console

测试了一下前一篇里的代码,直接运行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,不过我目前用不到(感觉没啥用)。

Refers

1 收藏 评论

可能感兴趣的话题



直接登录
跳到底部
返回顶部