Web前端最全WebAssembly及其 API 的完整介绍,大厂产品经理面试题

总结
  • 对于框架原理只能说个大概,真的深入某一部分具体的代码和实现方式就只能写出一个框架,许多细节注意不到。

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

  • 算法方面还是很薄弱,好在面试官都很和蔼可亲,擅长发现人的美哈哈哈…(最好多刷一刷,不然影响你的工资和成功率???)

  • 在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。

  • 要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!

第一次跳槽十分忐忑不安,和没毕业的时候开始找工作是一样的感受,真的要相信自己,有条不紊的进行。如果有我能帮忙的地方欢迎随时找我,比如简历修改、内推、最起码,可以把烦心事说一说,人嘛都会有苦恼的~

祝大家都有美好的未来,拿下满意的 offer。

有几种方法:

  • 不推荐从头编写 WebAssembly 代码,除非你非常了解基本知识

  • 从 C 编译为 WebAssembly

  • 从 C++ 编译为 WebAssembly

  • 从 Rust 编译为 WebAssembly

  • 使用 AssemblyScript 将 Typescript 编译为WebAssembly。 对于不熟悉C/C ++或Rust 的 Web开发人员来说,这是一个不错的选择

  • 支持更多的语言选项。

此外,还有EmscriptenWebAssembly Studio之类的工具可以帮助您完成上述过程。

JS 的 WebAssembly API


为了充分利用 WebAssembly 的特性,我们必须将其与 JS 代码集成在一起,这可以在JavaScript WebAssembly API的帮助下完成。

模块编译和实例化


WebAssembly代 码驻留在.wasm文件中。这个文件应该被编译成特定于它所运行的机器的机器码。我们可以使用WebAssembly.compile方法来编译 WebAssembly 模块。

WebAssembly.instantiate方法实例化已编译模块。 另外,我们也可以从.wasm文件获得的数组缓冲区传递到WebAssembly.instantiate方法中。 这也适用,因为实例化方法有两个重载。

let exports

fetch(‘sample.wasm’).then(response =>

response.arrayBuffer()

).then(bytes =>

WebAssembly.instantiate(bytes)

).then(results => {

exports = results.instance.exports

})

上述方法的缺点之一是这些方法不能直接访问字节码,因此在编译/实例化wasm模块之前,需要采取额外的步骤将响应转换为ArrayBuffer

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

let exports

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

.then(obj => {

exports = obj.instance.exports

})

注意,WebAssembly.instantiateWebAssembly.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() => {

最后

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
就答题情况而言,第一问100%都可以回答正确,第二问大概只有50%正确率,第三问能回答正确的就不多了,第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法,都是一些可能会遇到的场景,而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了,希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细,发挥出最好的水平,找到一份理想的工作。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值