Home >Web Front-end >JS Tutorial >Rust -> asm.js & webassembly - High performance computing for WEB

Rust -> asm.js & webassembly - High performance computing for WEB

php中世界最好的语言Original: 2017-11-18 15:18:502952browse

We have said before that for javascript, the front-end world is ever-changing. In the previous articles, I told you to use Emscripten to compile C language and then use asm.js and WebAssembly. This method can greatly improve the execution speed of the front-end code, but due to the actual project The C language lacks manyadvanced features, many functions cannot be implemented, which is not conducive to the development of large-scale projects, and C++ is too complex, so I finally chose to use Rust.

At first, I was confused about whether to use Go, Rust or Swift. Later I found that Go does not currently support compilation to WebAssembly. Swift should be able to support it, because they are all made of LLVM compilers, but I haven't found any good information. It seems that I need to compile LLVM myself to support https://stackoverflow.com/questions/46572144/compile-swift-to-webassembly. In addition, I really like some features of Rust. I heard that Rust is very complicated and is more similar to Scala and Haskell. However, I am quite familiar with Scala and have also learned some Haskell, so I decided to give Rust a try.

https://github.com/ChristianMurphy/compile-to-web Here you can view the languages that can currently be compiled to WebAssembly.

PS, it is said that asm.js and Rust are both made by Mozilla.

Install the Rust management tool rustup

rustup is used to install and manage Rust-related tools, including the compiler rustc, package management tool cargo, etc., and supports the installation of different versions such as stable, beta, nightly, etc. As well as switching between different versions, similar to nvm.

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

Install Emscripten Rust compiler

Use rustup to install the latest trial version (Nightly Version):

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

Install cmake

Select according to the platform:

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

Install Emscripten

Refer to the previous article, or directly execute the following command:

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

This step takes a long time, it is said to take more than 2 hours, I executed it After finishing the order, I went out to eat with friends, so I don’t know the specific time.

Add the following path to PATH:

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

Execute emcc -v in the terminal to check whether the installation is successful.

Run Rust with Webpack

Create a new Rust/Javascript hybrid project:

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

Install Webpack, webpack-dev-server, rust-wasm-loader,

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

Add package.json script:

{
  "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"
  }
}

Create a new file index.html in the build directory:

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

Configure 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,
  }
}

New src/ main.rs file, add the function we want to call from 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
}

Create a new src/index.js, write code to load the WebAssembly module:

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))
})

Then execute npm start and access http: //localhost:8080/You can see the effect of calling rust code. It also supports hot updates. You can modify the rust code directly, save it, and you will see the latest effect on the page.

Rust -> asm.js & webassembly - High performance computing for WEB

Tested the code in the previous article. It only takes more than 300 ms to directly run the rust-optimized code. This is basically the same as the C code, but with It actually takes about 2.7s to run wasm. I don’t know if it’s not configured properly, or if it’s because Rust compiled into wasm is not optimized properly. Rust's support for WebAssembly may not be particularly mature yet. You can follow https://github.com/rust-lang/rust/issues/38804 to follow up.

In addition, Rust has a package https://crates.io/crates/webplatform, which can be used to operate DOM, but I can’t use it currently (it feels useless)

The above article is I hope that my understanding of high-performance computing in WEB can help friends in need. I have previously published two articles "asm.js & webassembly-WEB's high-performance computing" and "asm.js & webassembly-WEB's high-performance computing". 》, friends in need can take a look.

Rust -> asm.js & webassembly - High performance computing for WEB

Related articles