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. IT兄弟连 JavaWeb教程 JSP内置对象3

    读取web.xml配置信息的config对象 config对象主要用于取得服务器的配置信息.通过pageContxt对象的getServletConfig()方法获取一个config对象.当一个Ser ...

  2. load View 流程 程序启动流程

    基本流程: loadView / nib文件  来加载view到内存 -> viewDidLoad 函数进一步初始化这些view -> 内存不足时, 调用viewDidUnload 函数释 ...

  3. css定位-position

    前言 定位的目的就是把元素摆放到指定的位置. 定位上下文:定位元素的大小,位置都是相对于定位上下文的. position属性值有5个值 static:所有有元素定位默认的初始值都是static.就是不 ...

  4. mysql之SQL入门与提升（三）

    今天继续讲mysql数据库 先创建一张Persons表 CREATE TABLE Persons(P_Id int NOT NULL,LastName varchar(255) NOT NULL,Fi ...

  5. assembly x86(nasm)子程序1

    T: 将BUF开始的10个单元中的二进制数转换成两位十六进制数的ASCII码,在屏幕上显示出来.要求码型转换通过子程序HEXAC实现,在转换过程中,通过子程序DISP实现显示. 思路: Main主调程 ...

  6. Codeforces 526G Spiders Evil Plan

    由于做的时候看的是中文题面,第一遍写就被卡题意了:还以为每一条都要过x,那么就是一道动态树根选择2y个叶子的奇怪题目 交完0分gg,才发现题目看错了╮(╯▽╰)╭ the node containin ...

  7. nodejs 学习(2) 中间件

    var connect=require('connect'), morgan=require('morgan'),//日志 bodyparser=require('body-parser'), ses ...

  8. 牛客网Java刷题知识点之方法覆盖（方法重写）和方法重载的区别

    不多说,直接上干货! https://www.nowcoder.com/ta/review-java/review?query=&asc=true&order=&page=6 ...

  9. curl请求模拟post发送json

    示例:curl -X POST --header "Content-Type:application/json" --data '{"name":"s ...

  10. autofac 遇到构造函数问题

    None of the constructors found with 'aaaaa' on type ' aaa' can be invoked with the available service ...