WebAssembly也叫浏览器字节码技术 这里就不过多的解释了网上很多介绍

主要是让大家知道在js里面如何调用执行它，我之前看WebAssemblyAPI时候反正是看得一脸懵逼

也是为了大家能更快的入手这个比较新的技术吧

这边写的一个dom是官方推荐的c/c++编译的

c代码

 int add (int x, int y) {

   return x + y;

 }

 int square (int x) {

   return x * x;

 }

属性c但是对字节码不熟悉的朋友可能会不理解，为什么没有main函数

这里主要是把这个c代码当成一个模块调用不需要它自己执行所以没有，官方也有有main函数的能直接生成js和html但是太过雍于，

这种方式比较推荐，也是让js能直接调用比较方便

之后使用 emscripten进行编译  emcc math.c -Os -s WASM=1 -s SIDE_MODULE=1 -o math.wasm

然后就有math.wasm文件了，如果没装emscripten的话我博客里面有一篇是关于安装的

有了math.wasm文件后就该用js调用它了

新建math.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>Document</title>

 </head>

 <body>

     <h1>

     </h1>

     <script>

     /**

  * @param {String} path wasm 文件路径

  * @param {Object} imports 传递到 wasm 代码中的变量

  */

         function loadWebAssembly (path, imports = {}) {

           return fetch(path) // 加载文件

             .then(response => response.arrayBuffer()) // 转成 ArrayBuffer

             .then(buffer => WebAssembly.compile(buffer))

             .then(module => {

               imports.env = imports.env || {}

               // 开辟内存空间

               imports.env.memoryBase = imports.env.memoryBase || 0

               if (!imports.env.memory) {

                 imports.env.memory = new WebAssembly.Memory({ initial: 256 })

               }

               // 创建变量映射表

               imports.env.tableBase = imports.env.tableBase || 0

               if (!imports.env.table) {

                 // 在 MVP 版本中 element 只能是 "anyfunc"

                 imports.env.table = new WebAssembly.Table({ initial: 0, element: 'anyfunc' })

               }

               // 创建 WebAssembly 实例

               return new WebAssembly.Instance(module, imports)

             })

         }

         //调用

         loadWebAssembly('./math.wasm')

         .then(instance => {

             const add = instance.exports._add//取出c里面的方法

             const square = instance.exports._square//取出c里面的方法

             console.log('10 + 20 =', add(10, 20))

             console.log('3*3 =', square(3))

             console.log('(2 + 5)*2 =', square(add(2 + 5)))

         })

     </script>

 </body>

 </html>

我这里的路径math.html和math.wasm是同级的

现在就可以打开浏览器查看了 但是fetch方法在本地是不能使用的它是网络请求 所有这里需要来个web服务器

打开终端之间键入 npm install -g serve

下载web服务器

然后serve . 启动

有点的 .

启动完成效果:

然后通过web服务器访问就能看到调用c方法后的计算结果:

对于WebAssembly编译出来的.wasm文件js如何调用的更多相关文章

  1. WebStorm ES6 语法支持设置和ES6语法的JS文件编译为ES5语法文件

    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...

  2. 如何调用wasm文件？

    如果用C/C++导出wasm模块,方法名会默认带_前缀:如果是asm.js转成了wasm模块,方法名就不带_前缀. 一.c到js 二.wasm和js 三.小尝试 这里主要汇集了自己初学webAssem ...

  3. TVM编译机器学习到 WASM 和 WebGPU

    TVM编译机器学习到 WASM 和 WebGPU TLDR TVM 深度学习编译器对 WASM 和 WebGPU 的支持.实验表明,TVM 的 WebGPU 后端在将模型部署到 Web 时可以接近原生 ...

  4. WebAssembly编译

    环境:centos 7.9 1.准备环境 sudo yum install docker sudo systemctl start docker.service sudo docker pull tr ...

  5. WebView使用详解（一）——Native与JS相互调用（附JadX反编译）

    念念不忘,必有回响,永远坚持你所坚持的! 一直在用WebView,还没有系统的总结过它的用法,下面就系统的总结下,分享给大家 一.基本用法 1.加载在线URL void loadUrl(String ...

  6. Gulp-自动化编译sass和pug文件

    突然发现在我博客文章中,缺少这一块的记录,那我就补一篇吧. gulp的环境配置和安装:http://www.cnblogs.com/padding1015/p/7162024.html 这里就补充一篇 ...

  7. gcc for windows（mingw）编译多个c文件

    myString.c myString.h main.c 其中,myString.c与myString.h对应,myString.h文件中是一些函数的声明,而myString.c文件中是.h文件中声明 ...

  8. 如何使用命令行编译以及运行java文件

    要想编译和运行java文件,很简单,只需要两个命令: (1) javac:作用:编译java文件:使用方法: javac Hello.java ,如果不出错的话,在与Hello.java 同一目录下会 ...

  9. [vim配置]windows下在vim中使用gcc/g++编译调试c/cpp文件

    在Linux里面混了一个多月,vim编程用得甚爽.无奈前天将Linux里面的编程文件夹误删,而技术不精无法找回,悲痛欲绝.再者,无限怀念windows里面的游戏,并觉得现在在Linux里面也学不到什么 ...

随机推荐

  1. bzoj 2055: 80人环游世界【有上下界有源汇最小费用最大流】

    连有上下界的边(ss,i,(0,m),0),(i',t,(0,m),0),表示从任意点开始和结束 连(i,j,(0,m),d[i][j]),表示可以买票飞过去 连(i,i',(v[i],v[i]),0 ...

  2. [Xcode 实际操作]九、实用进阶-(20)创建位移关键帧动画：通过添加运动关键点制作位移动画

    目录:[Swift]Xcode实际操作 本文将演示如何通过添加运动关键点的方式,来制作位移动画 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIK ...

  3. 自然语言处理（五）——实现机器翻译Seq2Seq完整经过

    参考书 <TensorFlow:实战Google深度学习框架>(第2版) 我只能说这本书太烂了,看完这本书中关于自然语言处理的内容,代码全部敲了一遍,感觉学的很绝望,代码也运行不了. 具体 ...

  4. Mybatis中分页存在的坑1

    站在巨人的肩膀上 https://www.cnblogs.com/esileme/p/7565184.html 环境:Spring 4.2.1 Mybatis 3.2.8 pagehelper 5.1 ...

  5. VC＋＋6.0下新建工程中有17个选项，都是做什么用的？

    要理解每种工程的作用需要很多基础知识,只能简要的和你讲一下: 1.ATL COM AppWizard 用来新建一个COM组件的向导,比如WORD里用的公式编辑器就是一个COM组件. 2.Cluster ...

  6. HDU-1263(STL+排序）

    水果 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submiss ...

  7. hdu6313（ 2018 Multi-University Training Contest 2）

    bryce1010模板 http://acm.hdu.edu.cn/showproblem.php?pid=6313 参考dls的讲解: 以5*5的矩阵为例: 后一列分别对前一列+0+1+2+3+4操 ...

  8. Linux、UNIX设置开机自动运行命令、脚本配置

    一般我们不建议人工部署开机自动启动的脚本.而是建议通过crontab 部署脚本监控,理由如下: 1.自动开机部署脚本不好定位问题,有可能导致主机重启过慢. 2.自动开机部署脚本不好定位问题,有可能导致 ...

  9. 538 Convert BST to Greater Tree 把二叉搜索树转换为累加树

    给定一个二叉搜索树(Binary Search Tree),把它转换成为累加树(Greater Tree),使得每个节点的值是原来的节点值加上所有大于它的节点值之和.例如:输入: 二叉搜索树:     ...

  10. HDU 3359 高斯消元模板题，

    http://acm.hdu.edu.cn/showproblem.php?pid=3359 题目的意思是,由矩阵A生成矩阵B的方法是: 以a[i][j]为中心的,哈曼顿距离不大于dis的数字的总和 ...