2024年前端最新WebAssembly及其 API 的完整介绍(1)，2024年最新android事件分发面试

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

相反，我们可以使用WebAssembly.compileStreaming / WebAssembly.instantiateStreaming方法来实现与上述相同的功能，其优点是可以直接访问字节码，而无需将响应转换为ArrayBuffer。

let exports

WebAssembly.instantiateStreaming(fetch(‘sample.wasm’))

.then(obj => {

exports = obj.instance.exports

})

注意，WebAssembly.instantiate和WebAssembly.instantiateStreaming会返回实例以及已编译的模块，它们可用于快速启动模块的实例。

let exports;

let compiledModule;

WebAssembly.instantiateStreaming(fetch(‘sample.wasm’))

.then(obj => {

exports = obj.instance.exports;

//access compiled module

compiledModule = obj.module;

})

导入对象

---

实例化 WebAssembly 模块实例时，可以选择传递一个导入对象，该对象将包含要导入到新创建的模块实例中的值，有 4 种类型：

• global values

• functions

• memory

• tables

可以将导入对象视为提供给模块实例的工具，以帮助它实现其任务。如果没有提供导入对象，编译器将分配默认值。

Global

---

WebAssembly.Global 对象表示一个全局变量实例, 可以被JavaScript 和importable/exportable 访问 ,跨越一个或多个WebAssembly.Module 实例. 他允许被多个modules动态连接.

可以使用WebAssembly.Global()构造函数创建全局实例。

const global = new WebAssembly.Global({

value: ‘i64’,

mutable: true

}, 20)

语法

var myGlobal = new WebAssembly.Global(descriptor, value)

global 构造函数接受两个参数。

descriptor

GlobalDescriptor 包含2个属性的表:

• value: A USVString 表示全局变量的数据类型. 可以是i32, i64, f32, 或 f64

• mutable: 布尔值决定是否可以修改. 默认是 false

value

可以是任意变量值，需要其类型与变量类型匹配. 如果变量没有定义, 使用0代替

const global = new WebAssembly.Global({

value: ‘i64’,

mutable: true

}, 20);

let importObject = {

js: {

global

}

};

WebAssembly.instantiateStreaming(fetch(‘global.wasm’), importObject)

全局实例应该传递给importObject，以便在 WebAssembly 模块实例中可以访问它。

Memory

---

当 WebAssembly 模块被实例化时，它需要一个 memory 对象。你可以创建一个新的WebAssembly.Memory并传递该对象。如果没有创建 memory 对象，在模块实例化的时候将会自动创建，并且传递给实例。

JS引擎创建一个ArrayBuffer来做这件事情。ArrayBuffer 是 JS 引用的 JavaScript 对象。JS 为你分配内存。你告诉它需要多少内存，它会创建一个对应大小的ArrayBuffer

ArrayBuffer 做了两件事情，一件是做 WebAssembly 的内存，另外一件是做 JavaScript 的对象。

1. 它使 JS 和 WebAssembly 之间传递内容更方便。

2. 使内存管理更安全。

Table

---

WebAssembly.Table() 构造函数根据给定的大小和元素类型创建一个Table对象。

这是一个包装了WebAssemble Table 的Javascript包装对象，具有类数组结构，存储了多个函数引用。在 JS 或者WebAssemble中创建Table 对象可以同时被JS 或WebAssemble 访问和更改。

引入Table的主要原因是提高了安全性。我们可以使用set()、grow()和get()方法来操作表。

事例

---

为了演示，我将使用WebAssembly Studio应用程序将C文件编译为.wasm。

我已经在wasm文件中创建了一个函数来计算一个数字的幂。我将必要的值传递给函数，然后用JavaScript接收输出。

同样，我在wasm中进行了一些字符串操作。 需要注意，wasm没有字符串类型。 因此，它将使用ASCII值。 返回到 JS 的值将指向存储输出的内存位置。 由于内存对象是ArrayBuffer，因此我要进行迭代，直到收到字符串中的所有字符为止。

JavaScript文件

let exports;

let buffer;

(async() => {

let response = await fetch(‘…/out/main.wasm’);

let results = await WebAssembly.instantiate(await response.arrayBuffer());

//or

// let results = await WebAssembly.instantiateStreaming(fetch(‘…/out/main.wasm’));

let instance = results.instance;

exports = instance.exports;

buffer = new Uint8Array(exports.memory.buffer);

findPower(5,3);

printHelloWorld();

})();

const findPower = (base = 0, power = 0) => {

console.log(exports.power(base,power));

}

const printHelloWorld = () => {

let pointer = exports.helloWorld();

let str = “”;

for(let i = pointer;buffer[i];i++){

str += String.fromCharCode(buffer[i]);

}

console.log(str);

}

C 文件

#define WASM_EXPORT attribute((visibility(“default”)))

#include <math.h>

WASM_EXPORT

double power(double number,double power_value) {

return pow(number,power_value);

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

ility(“default”)))

#include <math.h>

WASM_EXPORT

double power(double number,double power_value) {

return pow(number,power_value);

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-Ym8wDHBb-1715598870219)]