AI原型开发前端组内部分享PPT

By 孙卓怡

原稿件用remark制作,一个可以用markdown语法写PPT的工具。这里因为格式问题只能把PPT内容无样式copy了。


Why

js是弱类型编程语言,初始化变量时无须显式地指出变量地具体类型,整个变量地类型完全由代码解释器在代码地运行过程中进行推断。

C语言等强类型语言可以提前将程序等源代码进行静态编译和优化,最后直接生成相应的经过优化的二进制机器码供CPU执行。

强类型语言的运行效率更高。


历史

ASM.js

PNaCl


ASM.js

ASM.js 它是JavaScript的一个严格子集,是一种可用于编译器的低层级的,高效的目标语言。

为内存不安全语言(如C或C++)描述了一个沙盒虚拟机的运行环境,一种静态和动态验证相结合的方式使得JavaScript引擎能够使用AOT(Ahead-Of-Time,静态编译)的优化编译策略来验证ASM.js的代码。

使用了一种名为”Annotation(注解)”的变量类型声明方式来与JavaScript引擎形成对代码中使用到的变量类型约定


ASM.js本身存在着一定的问题和局限性

只定义了对数值类型变量对Annotation声明方式,对其他常见的如字符串和对象等JavaScript类型我们只能通过比如将这些数据编码成内存中一段连续的32位整数等方式来供ASM.js优化和处理

各大浏览器厂商对ASM.js标准对支持程度和实现方式不尽相同,同样的一段ASM.js代码在各个浏览器上的运行效果可能会有很大的不同


PNaCl(Portable Native Client)

是由Google提出的一种可以在浏览器中执行native code的一种技术。该技术到前身是google提出的NaCl(Native Client), NaCl较之PNaCl缺乏移植性

PNaCl使用LLVM中到bitcode的概念,先将C/C++源代码编译成一种中间码(bitCode),然后可以通过一个translate的工具翻译成不同平台的可执行文件

性能较高


缺点:

只能用于Chrome浏览器

使用场景过于狭窄,高效的音频与视频处理,高性能的计算(如编/解码)需求等应用场景在Web领域并不多见

因为WebAssembly出现谷歌放弃NaCl/PNaCl技术维护


What

编码方式

性能

标准


class: img

pic


编码方式

一种新的编码方式,可以在现代的网络浏览器中运行

它是一种低级的类汇编语言,具有紧凑的二进制格式


性能

高效,接近原生,其目标就是充分发挥硬件能力以达到原生执行效率

为诸如C/C++等语言提供一个编译目标,以便他们可以在web上运行


标准

WebAssembly 在 web 中被设计成无版本、特性可测试、向后兼容的

可以和JavaScript一起协同工作——通过使用WebAssembly的JavaScript API

可以把WebAssembly模块加载到一个JavaScript应用中并且在两者之间共享功能

可以像Web API一样调用浏览器的功能

不仅可以运行在浏览器上,也可以运行在非web环境下


How

开发者引导


API 参考

WebAssembly

本对象是所有与WebAssembly相关功能的命名空间

WebAssembly.Module

一个WebAssembly.Module对象包括了无状态的WebAssembly代码。该代码已经被浏览器编译并且能够通过Workers高效地共享,缓存到IndexedDB中以及多次实例化

WebAssembly.Instance

一个WebAssembly.Instance对象是一个有状态的、可执行的模块的实例。实例对象包含所有的能够从JavaScript调用到WebAssembly代码的导出的WebAssembly函数


WebAssembly.instantiate()

WebAssembly.instantiate() 函数是编译和实例化WebAssembly代码的主要的API,它返回一个Module及其第一个实例

WebAssembly.Memory()

一个WebAssembly.Memory 对象是一个可变长的ArrayBuffer。它拥有能够被实例存取的原始字节内存

WebAssembly.Table()

WebAssembly.Table对象是一个可变长类型数组。它存储诸如函数引用之类的不透明值并且能够被实例存取


WebAssembly.CompileError()

创建一个新的WebAssembly CompileError对象

WebAssembly.LinkError()

创建一个新的WebAssembly LinkError对象

WebAssembly.RuntimeError()

创建一个新的WebAssembly RuntimeError对象


参考

官方文档

深入浅出 WebAssembly


Q&A