看这篇,快速入门 WebAssembly

2021/09/01 18:30
阅读数 1K


这几年,总听人频频提起 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 多媒体应用 体验它的强大魅力。




原价¥ 68,拼团价¥ 55
优惠就这几天,快上车


 
另外,为了帮你从整体上更直观地了解整个 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 底层基础设施。

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



原价¥ 68,拼团价¥ 55
优惠就这几天,快上车



👇点击「阅读原文」可直接购买,2 杯咖啡钱,掌握前端升职加薪必备技能



本文分享自微信公众号 - WebAssembly 中文社区(webassemblywasm)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部