JavaScript和WASM之间传递数据HEAP32

一、传递数据原理

1、Module对象

Module对象:Module对象是一个方法容器,通过该对象可以实现操作内存,与浏览器进行交互,以及调用wasm模块对外暴露的方法。

Module对象创建过程:使用fetch方法从远程加载一个标准的wasm模块文件,当模块加载完成后,再通过fetch api标准定义的用于处理响应数据的方法来将这次请求的响应数据转换成ArrayBuffer二进制数据形式。最后,使用这些二进制数据来填充Module对象中名为wasmBinary的属性。

Module对象的使用:当新的script标签被拼接到HTML中时,浏览器便开始从远程位置加载script标签指定的JavaScript脚本文件。加载完成后,浏览器开始执行脚本内部的代码。当脚本内的代码被执行完毕后,该script标签对应的sript.onload方法便会被调用执行。而在这个回调函数的内部,我们便可以通过Module对象与已经加载并初始化好的wasm模块进行交互。

2、共享线性内存

通常情况下,我们会通过“共享线性内存”的方式在wasm模块和Javascript之间传递复杂的数据结构。这块共享的线性内存在wasm模块实例化后便有了固定的起始地址和大小。

随着wasm应用的运行,共享内存可能会由于剩余资源不足而导致内存溢出问题,这时我们可以使用Webassembly MVP标准在javascript标准库中提供的相关接口,对这块共享内存大小做出动态调整。

“分页机制”:Webassembly对内存的管理采用了分页机制,当通过javascript标准接口对这块共享内存进行资源分配操作时,需要以“页”为单位计算实际分配的内存大小。在webassembly标准中规定,一个wasm内存页所占用的实际内存大小为64KB,即65536字节。

MMU(内存管理单元)在现代计算机组成中,内存分页机制是一种重要的内存管理机制。在计算机内部,CPU是通过地址总线寻址方式来直接访问物理内存的。例如一个基于X86架构的CPU其地址总线宽度为32位,即能够支持的最大物理内存大小是4GB。若一个应用程序需要8GB的内存,而实际可用的物理内存只有4GB,开发者不得不重新编写程序,以降低内存使用空间。在现代CPU中引入了MMU(内存管理单元)来解决此类问题。

MMU核心:使用虚拟内存地址来代替物理内存地址。内存分页机制会将虚拟内存地址和物理内存地址按照固定大小分别分割陈“页”和“页帧”两种形式,并保证页和页帧大小相同。页和页帧的出现使得操作系统可以进行非连续的内存分配,因为应用程序所占用的内存在实际物理介质上可能并不是连续存储的,以“页帧”为单位的内存段可能分散在整块物理线性内存的各个地方。另外当操作系统本身可用的物理内存容量不够时,CPU可以将一些不常用的物理内存页帧暂时转移到其他的线性存储设备上,比如硬盘。

“页表”:用例记录虚拟内存和物理内存的映射关系。页表被存放在物理内存中。CPU通过地址总线访问物理内存的速度要慢于直接访问寄存器的速度。因此,为仅以优化地址的解析速度,在CPU

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在WebAssembly(wasm)中,由于其底层是基于字节码的虚拟机,它本身并不支持多线程,但是可以通过JavaScript来实现多线程的功能。具体来说,可以通过Web Worker API来在WebAssembly中开启多个线程。 Web Worker是一种可以在后台运行的JavaScript线程,它可以与其他线程并行工作。通过Web Worker API,我们可以在WebAssembly中创建一个Worker线程,将计算任务分配给Worker线程,从而实现多线程计算。 具体步骤如下: 1. 在主线程中创建一个Worker对象,并将WebAssembly模块传递给Worker线程; 2. 在Worker线程中接收WebAssembly模块,并将其实例化为一个WebAssembly实例; 3. 在Worker线程中定义一个函数,用于接收主线程传递过来的数据,进行计算,并将计算结果返回给主线程; 4. 在主线程中调用Worker线程的postMessage方法,将计算任务传递给Worker线程; 5. 在主线程中定义一个函数,用于接收Worker线程返回的计算结果。 需要注意的是,由于WebAssembly与JavaScript之间的数据传输需要使用TypedArray对象,因此需要保证主线程和Worker线程之间的数据传输类型一致。 下面是一个简单的例子,演示了如何在WebAssembly中开启一个Worker线程: ```javascript // 在主线程中创建一个Worker对象 const worker = new Worker('worker.js'); // 在Worker线程中接收WebAssembly模块,并将其实例化为一个WebAssembly实例 worker.postMessage({ type: 'init', wasmModule: wasmModule }); // 在主线程中调用Worker线程的postMessage方法,将计算任务传递给Worker线程 worker.postMessage({ type: 'calculate', data: data }); // 在主线程中定义一个函数,用于接收Worker线程返回的计算结果 worker.onmessage = function(event) { if (event.data.type === 'result') { // 处理计算结果 } }; ``` 在Worker线程中,我们需要监听message事件,接收主线程传递过来的消息,并根据消息类型进行相应的处理。下面是一个简单的Worker线程示例: ```javascript // 在Worker线程中接收WebAssembly模块,并将其实例化为一个WebAssembly实例 let wasmInstance; onmessage = function(event) { if (event.data.type === 'init') { wasmInstance = new WebAssembly.Instance(event.data.wasmModule); } if (event.data.type === 'calculate') { const data = event.data.data; // 在Worker线程中定义一个函数,用于接收主线程传递过来的数据,进行计算,并将计算结果返回给主线程 const result = wasmInstance.exports.calculate(data); postMessage({ type: 'result', result: result }); } }; ``` 在上面的示例中,我们在Worker线程中定义了一个名为calculate的函数,用于接收主线程传递过来的数据,进行计算,并将计算结果返回给主线程。在实际应用中,需要根据具体的业务逻辑来定义Worker线程中的函数。 需要注意的是,由于WebAssembly目前仍然处于发展阶段,它的多线程支持也在不断改进中,因此在实际应用中需要仔细评估多线程的使用场景和效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值