0

0

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

php中世界最好的语言

php中世界最好的语言

发布时间:2017-11-18 15:18:50

|

3208人浏览过

|

来源于php中文网

原创

我们之前说过,对于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

Tome
Tome

先进的AI智能PPT制作工具

下载

新建一个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:



 

  Hello WebAssembly

 

< div id="container">

配置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: {
            // The path to the webpack output relative to the project root
            path: '',
            release: true // 没有的话性能巨差,差不多只有1/10
          }
        }
      }
    ]
  },
  // The .wasm 'glue' code generated by Emscripten requires these node builtins,
  // but won't actually use them in a web environment. We tell Webpack to not resolve those
  // require statements since we know we won't need them.
  externals: {
    'fs': true,
    'path': true,
  }
}

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

fn main() {
    println!("Hello, world!");
}
 
// Functions that you wish to access from Javascript
// must be marked as no_mangle
#[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 => {
  // Create a Javascript wrapper around our Rust function
  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 -> 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提交表单校验三种方法分享

相关文章

数码产品性能查询
数码产品性能查询

该软件包括了市面上所有手机CPU,手机跑分情况,电脑CPU,电脑产品信息等等,方便需要大家查阅数码产品最新情况,了解产品特性,能够进行对比选择最具性价比的商品。

下载

相关标签:

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 5万人学习

Django 教程
Django 教程

共28课时 | 3.7万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号