在这里就不科普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的更多相关文章

  1. 命令行方式运行yii2程序

    测试环境,yii 2.0.3版本 web访问方式,控制器放在controllers目录下 ,浏览器访问如下地址 http://127.0.0.1/index.php?r=[controller-nam ...

  2. 命令行方式运行hadoop程序

    1,写一个java代码.*.java.(这里从example 拷贝一个过来作为测试) cp src/examples/org/apache/hadoop/examples/WordCount.java ...

  3. Scrapy：运行爬虫程序的方式

    Windows 10家庭中文版,Python 3.6.4,Scrapy 1.5.0, 在创建了爬虫程序后,就可以运行爬虫程序了.Scrapy中介绍了几种运行爬虫程序的方式,列举如下: -命令行工具之s ...

  4. Java魔法堂：以Windows服务的形式运行Java程序

    一.前言 由于防止维护人员误操作关闭Java控制台程序,因此决定将其改造为以Windows服务的形式运行.弄了一个上午总算搞定了,下面记录下来,以供日后查阅. 二.Java Service Wrapp ...

  5. Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率..

    Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率.. 1. hybrid App 1 1.1. Hybrid Ap ...

  6. 连表查询都用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%我不知道在 ...

  7. [SAP ABAP开发技术总结]程序自己以JOB方式运行

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. 【node.js】本地模式安装express：'express' 不是内部或外部命令，也不是可运行的程序或批处理文件。

    今天闲来无事想起了node.js,因此到网上下载了一个node.js的安装程序进行安装.其中: 安装程序:node-v0.11.13-x64.msi PC系统:Windows 7 自定义安装路径:D: ...

  9. 使用apache daemon让java程序在unix系统上以服务方式运行

    通过使用apache_commons_daemon,可以让Java程序在unix系统上以服务器的方式运行. 当然,通过wrapper也是可以达到这样的目的,wrapper还可以指定java应用中用到的 ...

随机推荐

  1. docker学习内容

    有个博客写的蛮好的,转一下 https://blog.csdn.net/xiaochendefendoushi/article/details/80979905 等我用到的时候再仔细瞧瞧

  2. string::crbegin string::crend

    const_reverse_iterator crbegin() const noexcept;功能:crbegin是最后一个字符,crend第一个字符的前一个.迭代器向左移动是“+”,向右移动是“- ...

  3. SSE

    最近尝试了一下服务器端的推送,之前的做法都是客户端轮询,定时向服务器发送请求.但这造成了我的一些困扰: 1:轮询是由客户端发起的,那么在服务端就不能判别我要推送的内容是否已经过期,因为我很难判断某个信 ...

  4. new一个对象的过程

    不用死记硬背,理解才是硬道理.只需要写个例子,然后输出看一下就清楚了 首先我们看下new Person输出什么? var Person = function(name, age) { this.nam ...

  5. Codeforces Round #589 (Div. 2) E. Another Filling the Grid(DP, 组合数学)

    链接: https://codeforces.com/contest/1228/problem/E 题意: You have n×n square grid and an integer k. Put ...

  6. Ubuntu本地软件源制作

    操作 获取需要的deb包 #执行安装后,安装的包会保存在/var/cache/apt/archives 目录下 apt-get install vim #查看 正在处理用于 man-db (2.8.7 ...

  7. 树莓派安装alsa-lib库

    安装alsa-lib库 apt-get install libasound2-dev dpkg -L libasound2-dev 参考:https://blog.csdn.net/happygril ...

  8. JSON数据的缓存

    前端有时候会遇到JSON数据的缓存,后台给我们JSON数据是一个对象,直接缓存起来它存的是字符串 "[object Object]".这是因为在缓存时会隐式调用toString方法 ...

  9. Java后台开发精选知识图谱

    1.引言: 学习一个新的技术时,其实不在于跟着某个教程敲出了几行.几百行代码,这样你最多只能知其然而不知其所以然,进步缓慢且深度有限,最重要的是一开始就对整个学习路线有宏观.简洁的认识,确定大的学习方 ...

  10. Linux设备驱动程序 之 poll和select

    使用非阻塞IO的应用程序经常使用select,poll,epoll系统调用:它们的功能本质上是一样的:都允许进程决定是否可以对一个或者多个打开的文件做非阻塞的读取或者写入:这些电泳也会阻塞进程,直到给 ...