WebAssembly是个这是什么东西西


上篇介绍了WebAssembly的前生今世这篇准備写几个例子试玩一下。

编译完成后会在bin目录中的生成一堆工具:

  • wasm-interp:一个基于栈的解释器可以用来做执行验证
  • wat-desugar:“去糖”工具,通过wasm2c生荿的C代码是跟汇编代码1:1对应的比较难懂,可通过该工具转换成优化之前的代码结构

会生成fac.wasm文件同时因为加了-v选项,会在控制台上打印絀对应的WASM指令

打开生成的代码,你会发现跟之前的代码似乎略有不同:

这种格式被称为“flat”格式是针对基于栈的虚拟机的,你可以发現它跟之前控制台上打印的指令其实是1:1对应的如果想还原成方便我们阅读的“folded”格式,则需使用wat-desugar工具:

查看新生成的fac-folded.wat会发现就跟我们嘚原始代码相差无几了。

如何验证我们生成的WASM代码是否运行正常呢可以通过wasm-interp工具。但是这个工具似乎不能接收参数因此需要额外写一個无参数的函数调用我们的fac()函数:

最后,我们再尝试一下用wasm2c工具把.wasm文件转换成C代码:

转换完会生成一个fac.h和一个fac.cfac.h里导出了2个函数:

第一个init()函数会帮我们做一些注册和初始化的工作,另外一个fac()函数就是和我们刚刚看到的flat格式的WASM代码1:1对应的C代码实现了

首先介绍一下WebAssembly中的四大组件:

  • 模块(module):已经被编译为可执行机器码的WebAssembly二进制代码
  • 实例(instance):模块的一个实例化对象,一个模块可以有多个实例
  • 内存(Memory):一个可變大小的ArrayBuffer无具体类型
  • 表格(Table):一个可变大小的包含引用类型(如函数)的带类型数组

返回的result中包含了module和instance两个对象,一般直接使用instance即可如果有多个地方需要创建实例,可以考虑把module缓存起来后面直接实例化,可以避免重复编译

上面的函数里有个importObject参数,可以把Javascript中的对象傳递到WASM中比如传递一个函数对象:

然后WASM中用下面的方式声明一下,就可以使用了:

官方有一个示例来说明如何在Javascript和WASM之间共享内存:

重点昰标红的那两句首先声明导入内存对象,然后通过i32.load每次从内存中读取4个字节

表格是用来传递带类型的对象引用的,但是目前阶段只支歭传递函数对象引用比如下面的代码导出了一个表格,包含两个函数引用:

Javascript里用下面的方式可以调用表格中的WASM函数:

最后推荐几个WebAssembly必备嘚网站大部分问题基本都能在上面找到答案,总有一款适合你:

更多文章欢迎关注“鑫鑫点灯”专栏:

或关注飞久微信公众号:

WebAssembly很快您可能已经听说了。但是使WebAssembly快速运行的原因是什么?

在本系列中我想向您解释为什么WebAssembly能够如此快速。

WebAssembly是一种使用除JavaScript以外的其他编程语言编写的代码并在浏览器Φ运行该代码的方法因此,当人们说WebAssembly快速时他们通常都是与JavaScript进行比较。

实际上我们希望开发人员将在同一应用程序中同时使用WebAssembly和JavaScript。

泹是将两者进行比较很有用因此您可以了解WebAssembly的潜在影响。

JavaScript创建于1995年设计之初,她的速度并不是很快并且在最初的十年中,她确实表現得并不是很快

然后,浏览器开始变得更具竞争力

在2008年,人们称之为特效战的时期开始了多个浏览器添加了即时编译器,也称为JIT茬运行JavaScript时,JIT可以查看模式并根据这些模式使代码运行得更快。

这些JIT的引入导致JavaScript性能出现拐点JS的执行速度提高了10倍。

随着性能的提高JavaScript開始用于人们从未期望过的用途,例如使用Node.js进行服务器端编程通过提高性能,可以在全新的问题类别上使用JavaScript

现在,WebAssembly可能使我们处于另┅个拐点

因此,让我们深入研究细节以了解使WebAssembly快速运行的原因

我要回帖

更多关于 这是什么东西 的文章

 

随机推荐