用js的方式运行c程序之webassemly
在这里就不科普webassemly的作用以及好处了，请自行百度。
那么，怎么通过js的方式在浏览器中运行c程序呢，其中原理如下：
可能另一张图会更详细：
1.安装emscripten
说明文档地址：https://emscripten.org/docs/getting_started/downloads.html
以下步骤为macOs下命令：
step1:克隆项目------------git clone https://github.com/emscripten-core/emsdk.git
step2:进入项目目录--------cd emsdk
step3:安装最新emsdk工具---./emsdk install latest
step4:激活---------------./emsdk activate latest
step5:执行批处理添加环境变量source ./emsdk_env.sh
已经安装好了，看一下版本：
2.写一个c文件(test.c)并转换.wasm
#include <emscripten/emscripten.h>
int EMSCRIPTEN_KEEPALIVE add(int a, int b) {
return a + b;
}
int EMSCRIPTEN_KEEPALIVE fibonacci(int n) {
if (n <= ) {
return n;
} else {
return fibonacci(n - ) + fibonacci(n - );
}
}
注意，红字必须，这是相比常规c文件不同的地方。
转换命令：
emcc test.c -Os -s WASM= -s SIDE_MODULE= -o test.wasm
然后你就在相同目录下得到了一个test.wasm文件。
3.通过js引入.wasm并执行其中函数
这里我封装了一个引入.wasm文件的工具函数，代码如下：
const importObj = {
global: {},
env: {
'memory': new WebAssembly.Memory({initial: , maximum: }),
'__memory_base': ,
'tableBase': ,
'table': new WebAssembly.Table({initial: , element: 'anyfunc'}),
abort:alert
}
};
export async function addModule(url,callback){
fetch(url).then(response =>
response.arrayBuffer()
).then(bytes => WebAssembly.instantiate(bytes,importObj)).then(results => {
var instance = results.instance;
var module = instance.exports;
callback(module);
});
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebAssemblyLearning</title>
</head>
<body> </body> <script type="module">
import {addModule} from './utils/wasm.js';
var num = ;
function getDuring(func,type){
const start = Date.now();
func(num);
console.log(type +'执行斐波那契数列消耗时间:' +(Date.now() - start) + 'ms\n');
};
addModule('./add.wasm',function(module){
getDuring(module._fibonacci,'C程序');
});
function fibonacci(n) {
if (n <= ) {
return n;
} else {
return fibonacci(n - ) + fibonacci(n - );
};
};
console.error('递归次数:'+ num);
getDuring(fibonacci,'JavaScript')
</script> </html>
我们看到，上面通过两种不同的方式执行了一个递归次数为42的斐波那契数列求和函数，对比一下两者的性能：
所以对于追求性能的web程序来说，webassemly将是一个很好的选择。
用js的方式运行c程序之webassemly的更多相关文章
- 命令行方式运行yii2程序
测试环境,yii 2.0.3版本 web访问方式,控制器放在controllers目录下 ,浏览器访问如下地址 http://127.0.0.1/index.php?r=[controller-nam ...
- 命令行方式运行hadoop程序
1,写一个java代码.*.java.(这里从example 拷贝一个过来作为测试) cp src/examples/org/apache/hadoop/examples/WordCount.java ...
- Scrapy：运行爬虫程序的方式
Windows 10家庭中文版,Python 3.6.4,Scrapy 1.5.0, 在创建了爬虫程序后,就可以运行爬虫程序了.Scrapy中介绍了几种运行爬虫程序的方式,列举如下: -命令行工具之s ...
- Java魔法堂：以Windows服务的形式运行Java程序
一.前言 由于防止维护人员误操作关闭Java控制台程序,因此决定将其改造为以Windows服务的形式运行.弄了一个上午总算搞定了,下面记录下来,以供日后查阅. 二.Java Service Wrapp ...
- Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率..
Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率.. 1. hybrid App 1 1.1. Hybrid Ap ...
- 连表查询都用Left Join吧 以Windows服务方式运行.NET Core程序 HTTP和HTTPS的区别 ASP.NET SignalR介绍 asp.net—WebApi跨域 asp.net—自定义轻量级ORM C#之23中设计模式
连表查询都用Left Join吧 最近看同事的代码,SQL连表查询的时候很多时候用的是Inner Join,而我觉得对我们的业务而言,99.9%都应该使用Left Join(还有0.1%我不知道在 ...
- [SAP ABAP开发技术总结]程序自己以JOB方式运行
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 【node.js】本地模式安装express：'express' 不是内部或外部命令，也不是可运行的程序或批处理文件。
今天闲来无事想起了node.js,因此到网上下载了一个node.js的安装程序进行安装.其中: 安装程序:node-v0.11.13-x64.msi PC系统:Windows 7 自定义安装路径:D: ...
- 使用apache daemon让java程序在unix系统上以服务方式运行
通过使用apache_commons_daemon,可以让Java程序在unix系统上以服务器的方式运行. 当然,通过wrapper也是可以达到这样的目的,wrapper还可以指定java应用中用到的 ...
随机推荐
- jQuery基础 (一)—样式篇
jQuery的优势 jQuery有很多特性和工具方法
- Java笔记（第七篇 JDBC操作数据库）
JDBC是连接数据库和java程序的桥梁,通过JDBC API可以方便地实现对各种主流数据库的操作.学习java语言,必须学习JDBC技术,因为JDBC技术实在java语言中被广泛使用的一种操作数据库 ...
- qt 防止应用重复启动
QApplication a(argc, argv); QSharedMemory singleton(a.applicationName()); if(!singleton.create(1)) { ...
- 题解 [BZOJ1832][AHOI2008] 聚会
题面 解析 首先对于其中的两个点\(x,y\)最近的点显然就是他们的\(lca\)(我们把它设为\(p1\)), 然后考虑第三个点\(z\)与\(p1\)的\(lca,p2\). 有以下几种情况: \ ...
- 请求出现Referrer Policy: no-referrer-when-downgrade
请求出现Referrer Policy: no-referrer-when-downgrade,一直请求不成功,原因是请求连接出现问题,我这里的问题是api前少了/,导致字段和域名拼接起来,所以请求U ...
- nextUntil([exp|ele][,fil]) 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
nextUntil([exp|ele][,fil]) 概述 查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止. 如果提供的jQuery代表了一组DOM元素,.nextUntil()方法也能让 ...
- git branch/meger step(3)
# update last repositories git pull git log # create yourself repositories base on last repositories ...
- 洛谷P1436 棋盘分割
洛谷题目链接 动态规划: 我们设状态$f[i][j][o][p][k]$表示一个矩形,左上角顶点坐标为$(i,j)$,右下角顶点坐标为$(o,p)$时分割了$k$次,也就是说现在是$k+1$块 我们考 ...
- ubuntu配置pip3以及scrapy
.安装支持pip3 sudo apt-get install python3-pip .安装scrapy 首先需要安装scrapy依赖项,否则scrapy安装失败,执行如下命令: sudo apt-g ...
- 2019ICPC上海网络赛 A Lightning Routing I 点分树(动态点分治)+线段树
题意 给一颗带边权的树,有两种操作 \(C~e_i~w_i\),将第\(e_i\)条边的边权改为\(w_i\). \(Q~v_i\),询问距\(v_i\)点最远的点的距离. 分析 官方题解做法:动态维 ...