Rust -> asm.js & webassembly-WEB的高性能计算-js教程-PHP中文网

首页

web前端

js教程

Rust -> asm.js & webassembly-WEB的高性能计算

php中世界最好的语言

Nov 18, 2017 pm 03:18 PM

javascript

我们之前说过，对于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: &#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,
  }
}

新建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(&#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))
})

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

Rust -> asm.js & webassembly-WEB的高性能计算

测试了一下前一篇里的代码，直接运行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的高性能计算》，有需要的朋友可以去看一下。

推荐阅读：

WebWorkers-前端的高性能计算

asm.js & webassembly-WEB的高性能计算

JavaScript提交表单校验三种方法分享

以上是Rust -> asm.js & webassembly-WEB的高性能计算的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。