Rust -> asm.js & webassembly - High performance computing for WEB
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: './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,
}
}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('./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))
})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.
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.
Recommended reading:
The above is the detailed content of Rust -> asm.js & webassembly - High performance computing for WEB. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
How to implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
How to use JavaScript and WebSocket to implement a real-time online ordering system
Dec 17, 2023 pm 12:09 PM
Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order
How to implement an online reservation system using WebSocket and JavaScript
Dec 17, 2023 am 09:39 AM
How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
How to use insertBefore in javascript
Nov 24, 2023 am 11:56 AM
Usage: In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).
JavaScript and WebSocket: Building an efficient real-time image processing system
Dec 17, 2023 am 08:41 AM
JavaScript is a programming language widely used in web development, while WebSocket is a network protocol used for real-time communication. Combining the powerful functions of the two, we can create an efficient real-time image processing system. This article will introduce how to implement this system using JavaScript and WebSocket, and provide specific code examples. First, we need to clarify the requirements and goals of the real-time image processing system. Suppose we have a camera device that can collect real-time image data
