首页 > 编程语言 >WebAssembly能不能取代JavaScript?15张卡通图给你答案!

WebAssembly能不能取代JavaScript?15张卡通图给你答案!

时间:2023-06-25 13:31:40浏览次数:41  
标签:WebAssembly IR 15 JavaScript 编译器 机星 浏览器


一切能用JavaScript实现的,终将用JavaScript实现。

一切能编译为WebAssembly的,终将编译为WebAssembly。

前端er们,WebAssembly用上了吗?在浏览器中快速运行非JavaScript语言,比如C、C++、Rust,是不是很香?今天,我们就来用15张小画图说WebAssembly

有必要先介绍一下小画的创作者。她叫Lin Clark,曾是Mozilla公司的首席研究工程师,精通WebAssembly和Rust。值得一提的是,她的母亲曾为阿波罗登月任务编写汇编语言。如今,Lin是WebAssembly社区响当当的人物,是不是有传承那味儿了?

WebAssembly能做什么?

WebAssembly能不能取代JavaScript?15张卡通图给你答案!_javascript

有了WebAssembly,JavaScript不再是浏览器端的唯一语言。WebAssembly让你能够在网页中快速运行C、C++、Rust等。

再见JavaScript?

WebAssembly能不能取代JavaScript?15张卡通图给你答案!_编译器_02

WebAssembly并不是要取代JavaScript,二者绝非水火不容。实际上,许多应用程序同时使用WebAssembly和JavaScript。不过,如果硬要对比二者的速度,那么WebAssembly显然是增强型。

JavaScript的性能瓶颈在哪里?

WebAssembly能不能取代JavaScript?15张卡通图给你答案!_编译器_03

JavaScript的一些根本特性使它速度受限,比如动态类型。直到2008年,JIT(即时编译器)出现,才让JavaScript的性能有了飞跃式提升。

WebAssembly能不能取代JavaScript?15张卡通图给你答案!_css3_04

性能提升使得JavaScript开始被用于服务器端。WebAssembly的出现有望使性能曲线再次实现飞跃。

时间都去哪儿了?

JIT出现之前,JavaScript花在各任务上的相对时长是这样的。

WebAssembly能不能取代JavaScript?15张卡通图给你答案!_编程语言_05

有了JIT,JavaScript花在各任务上的相对时长变成了这样。

WebAssembly能不能取代JavaScript?15张卡通图给你答案!_编译器_06

相比之下,WebAssembly竟然是这样的!

WebAssembly能不能取代JavaScript?15张卡通图给你答案!_js_07

如何让计算机听我发号施令?

想象有机星人来到地球,你被派去和机星人谈判。要怎么交流呢?

WebAssembly能不能取代JavaScript?15张卡通图给你答案!_css3_08

你或许需要一位口译官,抑或需要一位笔译官。

口译官可以当场逐字逐句地翻译,这其实就是解释器所做的事情。

WebAssembly能不能取代JavaScript?15张卡通图给你答案!_编译器_09

笔译官则会将内容写下来,让双方自己理解。这其实就是编译器所做的事情。

WebAssembly能不能取代JavaScript?15张卡通图给你答案!_js_10

解释器刚运行起来时速度较快,但是效率不高,因为同样的代码可能需要重复解释。编译器则恰恰相反。正因为两者各有千秋,所以JIT结合了二者各自的优势。

那么,WebAssembly是如何做到与机星人交流的呢?我们来分析一下机星人的大脑构成。

WebAssembly能不能取代JavaScript?15张卡通图给你答案!_js_11

  • ALU是算术逻辑单元,相当于机星人大脑负责思考的部分。
  • register是寄存器,相当于机星人大脑的短时记忆区。
  • RAM是内存,相当于机星人大脑的长期记忆区。

如果给机星人发送二进制指令,它就会这样解读。

WebAssembly能不能取代JavaScript?15张卡通图给你答案!_编译器_12

问题是,机星人的大脑构造可能不一样,比如既有可能是x86结构,又有可能是ARM结构。而我们也会使用不同的语言,比如C、C++或者Rust。要两两匹配地进行翻译,工作量实在太大!

WebAssembly能不能取代JavaScript?15张卡通图给你答案!_编译器_13

为此,人们增加了IR,即中间表示。编译器的前端先将高级语言变成IR,编译器的后端则负责将IR变成汇编码。

WebAssembly能不能取代JavaScript?15张卡通图给你答案!_css3_14

那么,WebAssembly的位置在哪里呢?

每一类计算机处理器都有自己的机器码类型。在取得IR代码后,通过一个专门的编译器来运行,这个编译器将IR代码转换为一种专用字节码并放入后缀为.wasm的文件中。

WebAssembly能不能取代JavaScript?15张卡通图给你答案!_编程语言_15

.wasm文件中的字节码还不是机器码,它只是支持WebAssembly的浏览器能够理解的一组虚拟指令。当加载到支持WebAssembly的浏览器中时,浏览器会验证该文件的合法性,然后这些字节码会继续编译为机器码。

如今,各大主流浏览器都已支持WebAssembly。现在就尝试使用WebAssembly吧!

本文中的插图由Lin Clark创作,源网址如下:

https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/

本文对插图的使用经Lin Clark同意,且遵守CC BY-SA 3.0协议。

https://creativecommons.org/licenses/by-sa/3.0/


WebAssembly能不能取代JavaScript?15张卡通图给你答案!_编程语言_16

标签:WebAssembly,IR,15,JavaScript,编译器,机星,浏览器
From: https://blog.51cto.com/u_15767091/6545222

相关文章

  • CS 131 Computer Vision: Foundations and Applications Fall 2014-2015
     CS131ComputerVision:FoundationsandApplications Fall2014-2015EventTypeDateDescriptionCourseMaterialsLecture1Tuesday September26Courseintroduction Computervisionoverview Courselogistics Introductionslides [pptx] [pdf] Logisticsslid......
  • JavaScript
    JavaScriptHTML(结构层)CSS(表现层)JavaScript(行为层)什么是JavaScriptJavaScript是一门世界上最流行的脚本语言。一个合格的后端人员,必须要精通JavaScript历史ECMScript它可以理解为是JavaScript的一个标准。最新版本已经到es6版本。但是大部分浏览器还只停留在支持es5代......
  • JavaScript中最好的明暗模式主题切换
    了解如何使用JavaScript、CSS自定义属性、本地存储和系统设置为您的网站构建终极主题Toggle™️。无需框架!我曾经不同意浅色和深色模式切换。“切换开关是用户系统偏好设置!”我会天真地感叹,选择让prefers-color-schemeCSS媒体查询控制我个人网站上的主题。没有切换。没有选择......
  • F-15
    #include<iostream>#include"minecraft.h"#include<string>TxMinecraftmc;usingnamespacestd;structweizhi{ intx; inty; intz; intid; intdata; int_x; int_y; int_z; voidset(TxMinecraftmc){// cout<<_x&l......
  • CF1553F. Pairwise Modulo
    终于过了,感觉还是有点东西的。首先我们有一个很好想的\(O(n(\lnA+\sqrt{A})\logn)\)的做法。首先这个式子能写成\(p_i=\sum\limits_{j=1}^i\sum\limits_{k=1}^i\left(a_j-a_k\left\lfloor\dfrac{a_j}{a_k}\right\rfloor\right)\)的形式。前面求和那部分是简单的,我们主要去......
  • mc F-15
    #include<iostream>#include"minecraft.h"#include<string>usingnamespacestd;TxMinecraftmc;structblock{ intx; inty; intz; intid; intdate; };intmain(intargc,char**argv){boolcon=mc.ConnectMinecraft("zk.m......
  • CF1815E Bosco and Particle
    有个粒子初始在\(0\)位置,\(1\cdotsn\)位置分别为有一个对撞器,如果在\(0\)位置则向右,如果在\(n+1\)位置则向左。每个对撞器有一个\(01\)串,初始所有对撞器的指针都在开头,当粒子走到\(i\)位置时,对撞器所指的值为\(0\)则不改变方向,否则反向,指针指向下一个位置,如果在串......
  • JavaScript对象
    JavaScript对象Object类型,我们也称为一个对象。是JavaScript中的引用数据类型它是一种复合值,它将很多值聚合到一起,可以通过名字访问这些值对象也可以看做是属性的无序集合,每个属性都是一个key/value对对象除了可以创建自有属性,还可以通过从一个名为原型的对象那里继承属性除......
  • 2024备考Week15
    一、本周总结:使用时间:(达到每周目标35h)总计35h,数学13h11min,专业课9h48min,英语4h37min,政治5h48min。二、存在问题:1.数学、专业课(DS+OS+CO+CN)做题训练不够,思考不够深入,计算不够熟练和准确,后期一定要开始加强了;2.碎片化时间和整块时间没有合理安排,碎片化时间应该安排英语/政治,整块时......
  • JavaScript学习笔记:Web Components
    组件的概念组件是对可重用的HTML与JS功能的封装。在没有组件的时候,同样的HTML结构会在文档中多次出现,使代码变得复杂。在使用组件封装后,就像使用一个HTML标签那样使用这些HTML结构,HTML文档变得清晰易维护。它主要由三项技术实现:CustomElement:自定义元素,JavaScriptWEBAP......