前端圈

分享与交流前端开发相关知识

Web组件从零到英雄-第1部分

最近有关Web组装的说法很多。它会如何杀死javascript,如何不会杀死javascript,以及许多其他有争议的意见。
但是,即使经常听到有关Web程序集的消息,很少有人真正知道什么是Web程序集以及Web程序集的好处,何时应该使用它,甚至根本不使用它。

因此,为了使它成为一个不太混乱的主题,我将写一系列文章,内容涉及Web汇编的基本知识,以及制作一个简单的Web汇编应用程序。

在第一篇文章中,我将介绍什么是Web汇编,为什么它比常规javascript更快(以一种非常肤浅的方式。但是我将为想要深入理解此问题的人提供一些链接),最后展示一些应用程序示例运行它。

什么是Web Assembly

“ WebAssembly(缩写为Wasm)是基于堆栈的虚拟机的二进制指令格式。Wasm被设计为可移植目标,用于编译高级语言(如C / C ++ / Rust),从而可以在Web上为客户端和服务器应用程序进行部署”。

此描述直接来自Web程序集的网站主页(https://webassembly.org/

因此,通过查看此描述,我们可以发现Web汇编不是一种编程语言。但是,如果它不是编程语言,那又是什么呢?

Web程序集是编译器目标

什么是编译器目标?

为了了解编译器目标,首先我们必须了解什么是编译器。粗略地说,编译器是翻译器,通常将我们提供给它的代码翻译为较低级别的代码。这就是Web程序集,是从一个“高级”编译的结果(甚至认为c / c ++ / Rust不如javascript或python那样高级,与机器代码相比,它们仍然是高级语言)。

那么,Web Assembly是否会杀死JavaScript?

绝对不。甚至不是故意的。Wasm的主要目标是成为JavaScript联盟,处理更重,更复杂的计算。Web程序集的目标不是替换javascript的主要证明之一就是它甚至没有访问DOM API的权限,这意味着它无法更改我们在html文件中看到的内容。

为什么它比javascript更快

速度的秘密取决于两个关键因素。

1- Javascript复杂度

Javascript是一种旨在易于人类理解的语言。什么是双刃刀片,是因为虽然使用javascript确实很容易读写代码(或至少比大多数语言更容易),但这种便捷是有代价的。为了使javascript具有“可破解性”,并具有多种执行同一操作的方式,它甚至必须做一堆验证才能完成最简单的操作。例如

您认为javascript为了返回以下结果需要做什么?

const add = (a,b) => {
  return a + b;
}

它应该做一些非常简单的事情,对吧?错误

为了知道对参数a和b应该做什么,它必须进行大量验证。

ab字符串吗?如果是这样,它将串联它们

const result = add('hello ', 'my friend');

//result will be equal to 'hello my friend';

b的数,和一个的字符串?如果是这样,它将把数字变成一个字符串,然后连接ab

const result = add(1, ' is a nice number');

//result will be equal to '1 is a nice number';

甚至是ab数字?在这种情况下,将添加数字,并返回一个数字值

const result = add(1, 1);

//result will be equal to '2';

验证列表看起来像下面的图片,摘自Alex Danilo讲的关于Google I / O中的Web组件17

使用WebAssembly(Google I / O ’17)进行Web编译

《Web组件从零到英雄-第1部分》

较低级别的语言(例如,Web程序集支持的语言)则不是这种情况,因为它们不进行这些验证,并且运算符往往具有一种词汇含义,而不是多种含义,例如在javascript中,同一运算符/指令通常具有多个含义。

如果我们仅通过添加两个参数来完成所有这些复杂操作,请想象更复杂的操作需要哪种验证。运行全部代码会使您的应用程序变慢

2- Wasm代码必须比javascript执行更少的步骤才能由浏览器运行

即使认为javascript是一种解释性语言,也不必为了使其运行而进行编译,现代浏览器仍使用JIT(及时编译器)对其进行优化,从而使其性能明显优于其他方式。

此优化过程分为多个步骤,具体取决于浏览器。但是,如果您想深入了解优化过程,其中的一些缺陷以及为何Web程序集可以解决该优化过程无法解决的问题,则应查看Lin Clark关于该主题的精彩演讲

Lin Clark:WebAssembly的卡通简介| JSConf欧盟2017

如果您不想深入研究细节,请相信我(以及下图),当我告诉您Wasm代码通过较少的步骤将文件下载与执行分开时,它会更快。

《Web组件从零到英雄-第1部分》

用例

01- Wasm中的视频编辑器演示

《Web组件从零到英雄-第1部分》

第一个示例只是一个简单的Web编辑器的演示,该示例在Web程序集中运行,并显示在同一编辑器的同一页面中,但完全在javascript中运行。在页面中显示并比较了两种实现的性能

02- 菲格玛

《Web组件从零到英雄-第1部分》

Figma是最广为人知的Web组装案例之一,因为它是在生产中使用它的第一批应用程序之一,并且可能是最相关的应用程序之一。他们甚至写了一篇关于他们使用网络汇编文章

03- Google地球

《Web组件从零到英雄-第1部分》

Google Earth还使用网络程序集,以便可以在网络中渲染复杂的3d形状。与figma类似,他们也有一篇文章说明了Web组装的用法

现在我们终于知道了什么是Wasm,为何如此之快以及一些已经在使用它的工具🎉🎉🎉🎉🎉

  •  
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注