WebAssembly 如何提升 JavaScript 的性能?

前端早读课 2020-09-17 07:30

这几年,总听人频频提起 WebAssembly,说实话,我还挺感兴趣的。

在大多数前端人的印象中,它可能都是“新技术、很抽象”又或是“不太了解、没用过”。

如果让非要严谨的来定义的话,就是:“ WebAssembly 是基于栈式虚拟机的虚拟二进制指令集(V-ISA),它被设计为高级编程语言的可移植编译目标”。

这么说就很难理解了,那么换个说法。早在 2019 年 12 月,W3C 就正式宣布,WebAssembly 将成为除现有的 HTML、CSS 以及 JavaScript 之外的第四种,官方推荐在 Web 平台上使用的“语言”。

自然而然的,就有不少人在关注:WebAssembly 会取代 JavaScript 吗?他们之间是什么关系?

其实就目前 MVP 标准所提供的特性和能力来看,WebAssembly 与 JavaScript 之间还只能够是协作与补充的关系。WebAssembly 可以在某些场景中弥补 JavaScript 性能不足的短板。而想要在 Web 浏览器中使用 WebAssembly,我们也离不开相关 JavaScript API 提供的帮助。JavaScript 作为“老大哥”,在维持“两者关系”的过程中,仍然有着举足轻重的作用。

但随着 Post-MVP 标准的发展,这种关系可能会变得愈加脆弱,尤其当 WebAssembly ES Module 与 Type Interface 等提案被标准化并由浏览器实现后,WebAssembly 便会从依存走向独立。

举个实际应用中的例子,选择两款市面上最为常见的浏览器,分别测量我们构建的这个 DSP Web 应用在 JavaScript 滤镜和 WebAssembly 滤镜两个选项下的视频播放帧率。

  • Chrome Version 84.0.4147.89 (Official Build) (64-bit)

  • Firefox Version 79.0

实际测试结果的截图如下所示。其中左侧为 JavaScript 版本滤镜函数,右侧为对应的 WebAssembly 版本滤镜函数。

首先是 Chrome:

然后是 Firefox:

可以看到,同样实现逻辑的滤镜函数,在对应 JavaScript 版本和 WebAssembly 版本下有着极大的性能差异。WebAssembly 版本函数的帧画面实时处理速率几乎是对应 JavaScript 版本函数的一倍之多。当然,上述的性能对比结果仅供参考,应用的实际表现是一个综合性的结果,与浏览器版本、代码实现细节、编译器版本甚至操作系统版本都有着密切的关系。

这只是 WebAssembly 应用的冰山一角,实际上,Web 前端正变得越来越开放。如今,我们不仅能够直接使用 HTML、JavaScript 来编写各类跨端应用程序,WebAssembly 的出现更能够让我们直接在 Web 平台上使用那些业界已存在许久的众多优秀 C/C++ 代码库。

除此之外,WebAssembly 还能让 Web 应用具有更高的性能,甚至让 Web 应用能够与原生应用展开竞争,不仅如此,走出 Web,WASI 的出现更是为 WebAssembly 提供了更大的舞台。可以说,在未来的 3~5 年里,WebAssembly 会被逐渐广泛地应用到包括 Web 在内的各个平台和业务领域中。

但 WebAssembly 整个知识体系的内容非常庞大,且较为碎片化,除了官方文档,从网上很难找到有价值的资料,想要系统学习,相当困难。好在,我在极客时间上看到了新推出的《 WebAssembly 入门课》,这应该算国内第一门系统讲解的课程,我看了更新的几篇,确实不错,能让你真正了解“WebAssembly 究竟是什么?怎么用?”,并带你从 0 到 1 实现一个 WebAssembly 多媒体应用,体验它的强大魅力。

👆扫我的二维码,免费试读

结算用口令「wasm66666」,再减 ¥6

到手 ¥49,仅限「前 50 人」有效

最后 3

这门课,可以说真的是及时雨了,满足了我们这群对 WebAssembly 爱好者在市面上找不到系统课程的需求。而且价格相当良心,竟然才¥49,新用户就更便宜了,估计不到¥10块钱吧,活动也就剩最后 3 天了,感兴趣的,赶紧拿下。

另外,为了帮你从整体上更直观地了解整个 WebAssembly 生态的全貌,专栏作者于航,还出了张「核心知识地图」,你可以通过它来了解有关 WebAssembly 的任意一个方面的内容。

说到于航,他是 PayPal 高级软件工程师。可以说是 WebAssembly 技术布道者了,并且还是 FCC (FreeCodeCamp China) 上海技术社区负责人,QCon 和 GMTC 大会讲师、出品人。他是一个真正地喜欢 WebAssembly ,并且产生浓烈的热爱愿意去研究它,到 2018 年还出版了国内第一本 WebAssembly 技术书籍《深入浅出 WebAssembly》,权威性有保障!

对于 WebAssembly 这样的新技术,

我们到底要学什么?

这种新技术,我们弄懂的并不是 WebAssembly 的虚拟机实现,又或者它的虚拟指令的语义语法等,过于细节的内容,而是要首先从整体上,真正理解这门技术,比如:WebAssembly 是什么?能做什么?别人已经做了什么?它是怎么来的?它未来会如何发展?参考下面的路径图👇

这门课是如何讲解 WebAssembly 的?

温馨提示

这个课程的学习,是有基础门槛的,最好拥有了一定的 C/C++ 编码基础,以及 Web 前端(JavaScript / CSS / HTML)编码基础。整体规划上,内容分为 3 个模块:

夯实基础,建立整体认知

核心原理模块:这门课将从“ WebAssembly 是什么?” 这个问题出发,以最基本的 Stack Machine 开始介绍,到最后的 WASI ,逐渐带你从外部体系深入到 WebAssembly 的二进制世界。

从理论到案例,全面覆盖

应用模块:将从 WebAssembly 所“支持”的编程语言讲起,分析投入到生产环境中使用的 WebAssembly 案例,以及 WebAssembly 在物联网、多媒体以及云技术等方面业界正在进行的尝试。最后,会带你浏览一些目前业界最优秀的 WebAssembly 底层基础设施。

手把手带你完成多媒体 Web 应用

实战模块:将会使用 WebAssembly 来优化多媒体资源的处理过程,这里我们将介绍与 WebAssembly 有关的 JavaScript API ,以及常用编译工具链的基本使用方式,带你完成线上的多媒体 Web 应用。

来看看目录,你可以找到你想要的👇

订阅福利

👇扫我的二维码,免费试读

结算用口令「wasm66666」,再减 ¥6

到手 ¥49,仅限「前 50 人」有效

最后 3

点击「阅读原文」可直接购买,记得使用优惠口令「wasm66666」,以最优惠价 ¥49 入手,最后 3 天,抓紧呀。

推荐阅读