十分钟搞懂WebAssembly

十分钟搞懂WebAssembly

WASM支持将C/C++/Go/Rust等语言实现的代码编译为浏览器可执行的机器码,从而支持浏览器以接近原生应用的性能运行相关应用。在边缘计算领域,WASM也在尝试建立自己的用例,为边缘应用提供统一的运行环境。原文:Introduction to WebAssembly (WASM)[1]

WebAssembly于2015年首次发布,第一次演示是在Firefox、Chrome和Edge上执行Unity的Angry Bots游戏。但仅仅过了4年,它就成为了官方标准,是继HTML、CSS和JavaScript之后的第四种Web语言。到目前为止,94%的浏览器已经支持了WebAssembly。它能够在浏览器中实现接近本机的执行速度,使得我们有可能将桌面应用(如AutoCAD)甚至电子游戏(如《Doom 3》)移植到Web。

如今几乎每个人都在谈论WebAssembly。这篇文章将带你了解什么是WebAssembly以及它是如何工作的。

在这里插入图片描述

JavaScript有什么问题?
什么是WebAssembly?
这是一种类似于C/C++那样的新的编程语言吗?
WebAssembly是如何工作的?
WASM是Web应用的未来吗?

我们将回答所有这些问题,并鼓励你开始使用Web汇编(web assembly),它有可能极大的改变我们今天所知道的网站!

所以,做好准备,让我们开始吧!⚡

JavaScript有什么问题?

在这里插入图片描述
JavaScript是由Brenden Eich在1995年为Netscape浏览器设计的,在那个年代,它可以为静态网页实现一些交互。

JavaScript是解释型语言,也是动态类型语言。如果变量类型是在运行时决定的,那么就是动态类型语言。那么动态类型语言的问题是什么呢?

相对于动态类型语言,还有静态类型语言,C++就是一种静态类型语言,其变量类型是在定义的时候就决定了的。

int x = 5 ;

通过一条指令,编译器就能知道变量x的类型和内存位置。但是对于JavaScript中相同的操作,每次执行程序时,引擎都必须检查它是整数还是浮点数,或者任何其他有效的数据类型。所以JavaScript中的每条指令都要经过几次类型检查和转换,这会影响到它的执行速度。

下面是JavaScript在运行代码时花费的时间🤓。
在这里插入图片描述
下面是WebAssembly花费的时间。
在这里插入图片描述
与JavaScript相比,WebAssembly简化了整个编译过程。

JavaScript不是为CPU密集型和高性能应用程序开发的。

什么是WebAssembly?

浏览器只能运行JavaScript,但如果我们有一个虚拟微处理器,它可以将任何高级语言转换成可以在所有主流浏览器上运行的机器码,那会怎么样呢?这正是Web汇编(web assembly)所做的事情。

下面是一个用C++编写并被转为WASM的加法函数的例子。

VirtualProcessor原理图,它将C++代码转换为浏览器可理解的二进制代码。
在这里插入图片描述
这是一种类似于C/C++那样的新的编程语言吗?
WASM不是一种编程语言🙂。简而言之,它是一种将用一种编程语言编写的代码转换为浏览器可理解的机器代码的技术。

WASM (WebAssembly的缩写)被设计为其他语言的编译目标,允许服务器端代码(如C或C++代码)被编译成WASM并在浏览器中执行。

WebAssembly是如何工作的?

要了解Web汇编(web assembly),我们首先需要了解什么是通用汇编(general assembly)。

什么是汇编语言和汇编程序?

  • 每个处理器都有一个类似x86或ARM的架构。此外,处理器只能理解机器码。
  • 编写机器码是件乏味的事情,所以我们用汇编语言来编写。
  • 汇编程序将汇编语言中的指令转换为处理器能理解的机器码。

以下表示了用C语言编写的应用程序是如何在你的电脑上运行的。

在这里插入图片描述

类似于通用汇编,在WebAssembly中,用高级语言(如C++)编写的代码被转换为浏览器可理解的机器码。

WebAssembly入门

WebAssembly是一个具有WASM扩展名的文件,可以把它看作一个可以导入JavaScript程序的模块。

在这里插入图片描述

记住,WASM不能直接与DOM交互,因此我们需要同时使用JavaScript和WASM。

我们可以在浏览器中运行C、C++等语言实现的应用程序,其性能接近原生应用.

文章原文链接: https://www.jianshu.com/p/e4d002780cf8

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值