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. Codevs 3409 搬运礼物

    3409 搬运礼物 CodeVS原创  时间限制: 1 s  空间限制: 64000 KB  题目等级 : 青铜 Bronze 题解       题目描述 Description 小浣熊松松特别喜欢交 ...

  2. JS自制SEO框架（js案例）

    学习了JS一段时间,自己封装了一些日常码代码需要用到的框架,需要的小伙伴可以参考一下该框架主要功能有:阻止事件冒泡.阻止默认事件.获取元素.添加事件.删除事件.单个事件代理,多个事件代理.清除clas ...

  3. 阿里云物联网 .NET Core 客户端 | CZGL.AliIoTClient：1. 连接阿里云物联网

    文档目录: 说明 1. 连接阿里云物联网 2. IoT 客户端 3. 订阅Topic与响应Topic 4. 设备上报属性 4.1 上报位置信息 5. 设置设备属性 6. 设备事件上报 7. 服务调用 ...

  4. 16.join 用法(拼接列表时里面必须为str类型)

    s1='alex' s2='+'.join(s1) print(s2,type(s2))#a+l+e+x <class 'str'> l1=['小红','小刚','小明'] 前提:列表中的 ...

  5. PJzhang:robots协议的实际场景

    猫宁!!! 参考链接: https://bbs.360.cn/thread-15062960-1-1.html https://ziyuan.baidu.com/college/courseinfo? ...

  6. 即时通讯新手入门：一文读懂什么是Nginx？它能否实现IM的负载均衡？

    本文引用了“蔷薇Nina”的“Nginx 相关介绍(Nginx是什么?能干嘛?)”一文部分内容,感谢作者的无私分享. 1.引言   Nginx(及其衍生产品)是目前被大量使用的服务端反向代理和负载均衡 ...

  7. 51Nod 1098 最小方差 (数论)

    #include <iostream> #include <cstdio> #include <algorithm> using namespace std; ty ...

  8. 最近工作用到压缩，写一个zip压缩工具类

    package test; import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream ...

  9. ZROI 普及组模拟赛02总结

    ZROI 普及组模拟赛02总结 先放[网址][http://zhengruioi.com/contest/96] 可能是有一段时间没有打这种正式的比赛了,今天打的很奇怪... T1 模拟水题 既然是普 ...

  10. 关于css中父元素与子元素之间margin-top的问题

    之前在使用经常遇到下面的问题: html: <div class="top"> <div class="one">I'm the fir ...