专栏首页eguid开源技术分享一篇文章全面了解WebAssembly!!!以及如何把c/c++编译成WebAssembly,并在浏览器网页中加载运行WebAssembly

一篇文章全面了解WebAssembly!!!以及如何把c/c++编译成WebAssembly,并在浏览器网页中加载运行WebAssembly

WebAssembly简介

官方描述: WebAssembly是一种低级的类汇编语言,具有紧凑的二进制格式,可以接近原生的性能运行,并为诸如C / C ++/rust/go等语言提供一个编译目标,以便它们可以在Web浏览器上运行。它被设计为可以与JavaScript共存,允许两者一起工作。

大白话: WebAssembly是一门新的强类型编程语言,在浏览器中的有独立的虚拟机运行时。其他编程语言可以通过特定的WebAssembly编译器把源代码编译成WebAssembly的二进制字节码.wasm格式(不是机器码)。wasm格式是类似java代码编译成.class文件的中间代码,可以与js搭配和混合使用(可以在WebAssembly中调用js,同时也可以在js中调用WebAssembly)。

WebAssembly参考文档:https://developer.mozilla.org/zh-CN/docs/WebAssembly

可读文本.wat和.wasm二进制字节码补充说明

.wasm是WebAssembly二进制格式,WebAssembly工具链还有一个可读文本格式.wat或.wast。 因为.wasm本身是二进制格式,是无法看到代码或者生成的中间代码的,需要通过.wat或.wast文本格式来查看中间代码,方便调试。 使用https://github.com/webassembly/wabt可以把文本.wat转换为.wasm二进制字节码。

c/c++代码如何编译成.wasm字节码

可以使用Emscripten编译器把 c/c++代码编译成WebAssembly格式的二进制字节码 Emscripten官方:https://emscripten.org/index.html

c代码在线编译演示:https://wasdk.github.io/WasmFiddle/

如何加载和运行.wasm代码

WebAssembly目前还没有集成<script type='module'>或ES6的import语句,目前只能通过XMLHttpRequest或Fetch进行加载.wasm代码。

当前唯一的方式就是创建一个包含WebAssembly模块二进制代码的 ArrayBuffer 并且使用WebAssembly.instantiate()编译它。

Fetch方式加载.wasm字节码

假设网络上有一个叫做simple.wasm的WebAssembly模块。 我们可以使用fetch()全局函数来轻松地获取它,该函数返回一个可以解析为Response对象的promise。 我们可以使用arrayBuffer()函数把响应(response)转换为带类型数组,该函数返回一个可以解析为带类型数组的promise。 最后,我们使用WebAssembly.instantiate()函数一步实现编译和实例化带类型数组。

代码示例1

fetch('module.wasm').then(response =>
  response.arrayBuffer()
).then(bytes =>
  WebAssembly.instantiate(bytes, importObject)
).then(results => {
  // Do something with the compiled results!
});

代码示例2(封装一个通用加载方法)

//封装一个通用加载方法
function fetchAndInstantiate(url, importObject) {
  return fetch(url).then(response =>
    response.arrayBuffer()
  ).then(bytes =>
    WebAssembly.instantiate(bytes, importObject)
  ).then(results =>
    results.instance
  );
}
//复用通用加载方法,简单实用
fetchAndInstantiate('module.wasm', importObject).then(function(instance) {
  ...
})

XMLHttpRequest方式加载.wasm字节码

假设我们的模块叫做simple.wasm。 1、创建一个 XMLHttpRequest() 实例,然后使用它的open() 方法来开启一个请求——设置请求方法为GET并且声明我们想要获取的文件路径。 2、关键之处在于使用responseType属性设置响应类型为’arraybuffer’。 3、接下来使用XMLHttpRequest.send()发送请求。 4、当响应已经完成下载之后,我们使用onload事件处理器来调用一个函数——在这个函数中,我们从response属性中得到数组缓存然后就像使用Fetch那样把它传递给WebAssembly.instantiate() 。

示例代码:

request = new XMLHttpRequest();
request.open('GET', 'simple.wasm');
request.responseType = 'arraybuffer';
request.send();

request.onload = function() {
  var bytes = request.response;
  WebAssembly.instantiate(bytes, importObject).then(results => {
    results.instance.exports.exported_func();//调用simple.wasm中的exported_func()方法
  });
};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端-WebAssembly 对比 JavaScript 及其使用场景

    现在,我们将会剖析 WebAssembly 的工作原理,而最重要的是它和 JavaScript 在性能方面的比对:加载时间,执行速度,垃圾回收,内存使用,平台 ...

    grain先森
  • 别了,JavaScript;你好,Blazor

    Web开发与JavaScript开发向来是同义词。直到WebAssembly的横空出世,WebAssembly (Wasm)是一种在浏览器中可以执行的二进制指令...

    张善友
  • WebAssembly简介

    WebAssembly[1],也称为Wasm,是一种web优化的代码格式和API(应用程序编程接口),可以极大地提高网站的性能和功能。WebAssembly的1...

    CNCF
  • 10分钟入门WebAssembly

    导语 自从JS创建到现在,每10年都会有新的变化,下一个10年的爆点在哪,可能就是WebAssembly !本文将带你抓住爆点,10分钟掌握webassemb...

    腾讯VTeam技术团队
  • WebAssembly:系统编程语言的逆袭 | 洞见

    有人用 JavaScript 做语法词法解析,有人写了 x86 模拟器, 还有人用 JavaScript 写了可自举的 JavaScript 引擎。JavaSc...

    ThoughtWorks
  • JavaScript是如何工作的:与WebAssembly比较及其使用场景

    这次将讲解WebAssembly是如何工作的,更重要的是,它是如何在性能方面与JavaScript进行比较的:加载时间、执行速度、垃圾收集、内存使用、API开放...

    Fundebug
  • 如何在web浏览器中使用ffmpeg进行音视频转码,以avi转码成mp4为例

    ffmpeg是世界最著名最流行的基于c语言开发的音视频库。除了博主写的javacv专栏讲了java如何调用ffmpeg外,基于现代浏览器的WebAssembly...

    eguid
  • 你想要的WebAssembly入门与实践

    Peter谭金杰
  • 把 WebAssembly 用于提升速度和代码重用[每日前端夜话0xBC]

    有这样一种技术,可以把用高级语言编写的非 Web 程序转换成为 Web 准备的二进制模块,而无需对 Web 程序的源代码进行任何更改即可完成这种转换。浏览器可以...

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券