更多面试题
**《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
可以将导入对象视为提供给模块实例的工具,以帮助它实现其任务。如果没有提供导入对象,编译器将分配默认值。
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 模块实例中可以访问它。
当 WebAssembly 模块被实例化时,它需要一个 memory
对象。你可以创建一个新的WebAssembly.Memory
并传递该对象。如果没有创建 memory
对象,在模块实例化的时候将会自动创建,并且传递给实例。
JS引擎创建一个ArrayBuffer
来做这件事情。ArrayBuffer
是 JS 引用的 JavaScript 对象。JS 为你分配内存。你告诉它需要多少内存,它会创建一个对应大小的ArrayBuffer
ArrayBuffer
做了两件事情,一件是做 WebAssembly
的内存,另外一件是做 JavaScript 的对象。
-
它使 JS 和 WebAssembly 之间传递内容更方便。
-
使内存管理更安全。
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)]