为了账号安全,请及时绑定邮箱和手机立即绑定

技术分享:WebAssembly能否重新定义前端开发模式?

标签:
资讯

讲师简介:翟奔, GrapeCity GCDS项目组资深开发工程师,擅长前端、.NET Desktop技术,致力于工具链开发,喜欢尝试各种前沿技术并分享。

如果提及近年来让人最为兴奋的新技术,非****WebAssembly 莫属。作为一种低级的类汇编语言,WebAssembly以紧凑二进制的格式存储,为C/C++, Rust等拥有低级内存的模型语言提供了新的编译目标。正因如此,WebAssembly体积更小,可以以接近原生性能的速度运行。

WebAssembly 技术本身具有非常多的优点,虽始于浏览器但已经开始不断地被各个语言及平台所集成,在实际的工业化落地中,区块链、边缘计算、游戏及图像视频等多个领域都依靠 WebAssembly 创造出了让人称赞的产品。

WebAssembly的应用场景

· 编译器(编译链)

· 多媒体剪辑

· 游戏

· 图像识别

· VR+虚拟现实

· 直播视屏特效

· 游戏、应用分发服务

· 服务器端运行不受信任的代码

· 移动端混合应用

· P2P应用

· …

WebAssembly的主要特性

· 快速、高效、可移植

· 可读、可调试

· 安全,遵循浏览器同源策略和授权策略,运行在沙箱环境中

· 与其他web技术兼容(JS)

WebAssembly VS Javascript

既然提到了Web技术,就不得不提另一款在Web项目开发中大放异彩的脚本语言Javascript。1995 年,Brendan Eich 用了不到 10 天就创建了 Javascript,其最初主要应用于表单验证,而非以速度见长。随着各类应用功能的复杂化,受限于 JavaScript 语言本身动态类型和解释执行的设计,其性能问题逐渐凸现。

2008年,围绕着浏览器性能开展的大战终于在各大浏览器厂商间爆发,在先后经历了即时编译器(JITs),以及用Node.js和Electron构建应用程序的时期后,WebAssembly有望成为JS引擎突破下一性能瓶颈的转折点。

为此,这两者经常被用于比较,甚至一度出现WebAssembly 终将替代 Javascript的言论。的确,作为类汇编语言,WebAssembly解决了Javascript最常为人诟病的性能问题,也正是基于此,WebAssembly注定不适合开发人员手写代码,只能为其他语言提供一个编译目标。

因此,这两种技术的关系不是竞争,反而更像是合作共赢。通过 Javascript API,你可以将 WebAssembly 模块加载到你的页面中。也就是说,你可以通过 WebAssembly 来充分利用编译代码的性能,同时保持 Javascript 的灵活性。

image.png

二者性能对比

下图为我们展现了JS引擎运行程序和运行Wasm的耗时对比:

image.png

JS引擎运行程序时,需要经历源码转换(parse)、生成字节码(compile + optimize)、编译器优化(re-optimize)、代码执行(execute)和内存清理(GC)这五个阶段:

· parse : 将源码转换成抽象语法树,传递给解释器。

· compile + optimize : 解释器生成字节码,并通过编译器(JIT)编译优化部分字节码,生成机器码。

· re-optimize : 当发现优化代码无法被编译器优化时,重现转给解释器。

· execute : 执行代码的过程。

· GC: 清理内存的时间。

大部分情况下,JS在执行阶段将字节码编译成机器码,这一阶段十分耗时。(这是由于JS的动态性所导致,相同的代码会被不同的类型重新编译)。而Wasm不需要被解析,也不需要在运行时动态检测数据类型,由于它已经是字节码了,所以只需要简单解码,即可包含所有的类型信息。

正是因为Wasm的大部分优化工作已经在LLVM的前端部分完成了,所以编译优化的工作很少,这便是其高性能的主要体现。

编译模型(LLVM)

image.png

LLVM(Low-Level-Virtural-Machine), 底层虚拟机架构,优点包括:

  1. 模块化设计(三段式:前端、优化器、后端),代码更为清晰和便于排查问题,前端负责语法解析,生成字节码;优化器负责优字节码;后端负责生成相应平台的机器码

  2. 语言无关的中间代码,可以无限扩展而又不伤害可调试性

  3. 作为工具和函数库,易于实现新的基于编程语言的优化编译器或VM

WebAssembly 与LLVM结合

image.png

WebAssembly与LLVM结合,不需要为各个语言额外添加前端编译工具,中间的IL可以不断地优化,仅需添加一个“后端”,就可以让大部分语言编译成wasm。这个“后端”不同于之前提到的后端,它不会直接生成机器码,它生成的wasm,会由浏览器wasm运行时负责编译运行。

这就是WebAssembly的编译原理, 既然WebAssembly的核心目标是与Javascript等Web技术兼容, 那么其兼容到底程度如何?下面,我们将通过项目实战来验证。

项目实战:WebAssembly + Javascript

在进入项目实战之前,大家需要理解一个核心概念,即JavaScript为何能完全控制WebAssembly代码,并执行下载和编译运行:

核心概念

· Module(模块):该模块表示一个已经被浏览器编译为可执行机器码的wasm二进制序列。模块是无状态的,它可以被缓存在IndexedDB中或者在workers之间共享,也能够像JS一样导入导出。

· Memory(内存):连续大小可变的字节数组,能够被Wasm和JS同步读写。它可以用来在JS和Wasm之间传递数据,进行通信。

· Table(表格):带类型的大小可变的数组,表格里存储了不能作为原始字节存储在内存里的对象的引用。

· Instance(实例):一个模块及其在运行时的所有状态,包括内存,表格,以及导入的值。

可见,JavaScript API为开发者提供了创建模块、内存、表格和实例的能力。

通过一个WebAssembly实例,JavaScript能够调用该实例暴露的函数,把JavaScript函数导入到WebAssembly实例中,WebAssembly也能调用JavaScript函数。

另外,WebAssembly不能直接读写DOM,只能调用JavaScript,并且只能传入整形和浮点型的原始数据作为参数。因此,JavaScript能够完全控制WebAssembly代码实现下载、编译、运行, JavaScript开发者也可以把WebAssembly想象成一个生成高性能函数的JavaScript特性。

代码示例

wasm(Rust):

image.png

wasm_bindgen主要用来生成一些胶水代码,简化开发者在JS和wasm之间的方法调用。

JS:

image.png

项目结构

image.png

IDE

VSCode+插件Rust

执行步骤

  1. Install Rust:[https://www.rust-lang.org/tools/install] 打开cmd,输入cargo确认安装是否正确。

  2. 安装wasm编译工具:$ cargo install wasm-pack

  3. 创建rust-wasm工程: $ cargo new –-lib wasmlib

  4. Build: $ wasm-pack build

结语

通过简单介绍 WebAssembly 的应用场景和主要特性,我们能更好地够理解 WebAssembly 技术的演变过程。在11月11日的技术分享中,我们将基于 Webpack+Rust示例继续探讨 WebAssembly,并通过项目实战演示WebAssembly与JavaScript代码相结合的实现过程。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消