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. 面向对象-mixin设计模式的应用（多继承应用场景）

    什么是设计模式? 设计模式只是一种开发思想.不是什么固定的格式. 前人的好的思想,我们后人拿过来用! mixin设计模式: 1.mixin设计迷失可以在不对类的内容的修改前提下,扩展类的功能(添加父类 ...

  2. Serervlet | 慕课课程实战 | 编写登录逻辑

    Users.java package com.po; public class Users { private String username; private String password; pu ...

  3. __getitem__,__setitem__,__delitem__

    __getitem__.__setitem__.__delitem__ 总结: __getitem__,__setitem_,__delitem__ : obj[‘属性’]的方式去操作属性时触发的方法 ...

  4. bzoj2740 串 && bzoj2176 strange string(最小表示法模板)

    https://konnyakuxzy.github.io/BZPRO/JudgeOnline/2740.html 题解讲的很清楚了 (好像等于的情况应该归入case2而不是case1?并不确定) 具 ...

  5. Tourists Codeforces - 487E

    https://codeforces.com/contest/487/problem/E http://uoj.ac/problem/30 显然割点走过去就走不回来了...可以看出题目跟点双有关 有一 ...

  6. [已读]JavaScript模式

    主要是介绍各种继承和设计模式.第一章是讲编程规范,然后里面讲到了使用new Function替代eval

  7. 51nod 1640 天气晴朗的魔法 二分 + 克鲁斯卡算法(kruskal算法) 做复杂了

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1640 一开始想的时候,看到要使得最大值最小,那这样肯定是二分这个最大值了 ...

  8. JVM-GC日志分析

    程序运行时配置如下参数: -Xms20M -Xmx20M -Xmn10M -verbose:gc -XX:+PrintGCDetails -XX:SurvivorRatio= -XX:+PrintGC ...

  9. Yii2 之 UrlManager 实践 (一)

    1.  enablePrettyUrl yii2默认不支持类似 http://<domain>/site/error 的url格式,需要在config.php中启用 enablePrett ...

  10. phpmyadmin解决“高级功能尚未完全设置，部分功能未激活”

    首先在点击主页中的导入, 在“从计算机中上传:”选择/usr/share/doc/phpmyadmin/examples的“create_tables.sql.gz”文件 点击执行 但是我的电脑上还是 ...