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. 如何在Linux服务器上部署禅道

    最近换了新的项目团队,由于新团队比较年轻化,没有实行正规的项目管理,于是我自告奋勇要为团队管理出一份力,帮助团队建立敏捷化的项目管理,经过多方考究和对比后,选择了目前较受欢迎的开源项目管理软件:禅道. ...

  2. 关于如何隐藏UITabbar的问题

    关于如何隐藏UITabbar的问题,曾经困扰过很多人. 1,设为Hidden, 这种方法虽然将TabBar隐藏掉,但是下面是一片空白,没有起到隐藏的实际功效 2,设置tabbar.frame = CG ...

  3. 简单搭建webMagic爬虫步骤

    1.简介 WebMagic是一个简单灵活的Java爬虫框架.基于WebMagic,你可以快速开发出一个高效.易维护的爬虫. 官网:http://webmagic.io/ 中文官网:http://web ...

  4. SpringMvc源码入门

    servlet httpServletRequest httpServlet

  5. Maven聚合工程怎么变回普通的Maven工程

    问题 Maven聚合工程的父工程的packaging是pom,如果我们将其改为jar,会立刻报错: Project build error: 'packaging' with value 'jar' ...

  6. 转 JS 中的 this

    转载至:https://segmentfault.com/a/1190000009215974 this的指向问题应该是让每一个前端er都头疼的问题,我也一样,曾经遇到甚至都是一顿乱猜.最近在研读一些 ...

  7. Codeforces 1143B（思维、技巧）

    自己水平太低,不丢人. 结论是最后选取的数后缀一定是若干个9,暴举即可.然而暴举也有暴举的艺术. ll n; ll dfs(ll n) { if (n == 0) return 1; if (n &l ...

  8. Linux网路命令netstat

    Linux网路命令netstat netstat命令是一个监控TCP/IP网络的非常有用的工具,它可以显示路由表.实际的网络连接以及每一个网络接口设备的状态信息. 参数 参数 用法 详解 -a或--a ...

  9. 我的NopCommerce之旅(4): 定时任务之邮件

    一.功能简介 用户购买物品生成订单后,系统将发送邮件提醒给用户 二.操作步骤 后台配置一个系统的默认发送邮箱 启动定时任务,这里包括多个任务,只需要启动邮件任务 查看邮件发送情况 三.数据库分析 [d ...

  10. mint 有线网络未管理的解决

    sudo gedit /etc/NetworkManager/NetworkManager.conf 修改managed=true 参考链接:http://forum.ubuntu.org.cn/vi ...