写点什么

WebAssembly 是什么?

  • 2019-08-16
  • 本文字数:1796 字

    阅读完需:约 6 分钟

WebAssembly是什么?

导语 相信不少人听说过 WebAssembly,它是由 Google、Microsoft、Mozilla、Apple 等几家大公司合作发起的一个关于面向 Web 的通用二进制和文本格式的项目。现在就让我们一步步揭开 WebAssembly 的神秘面纱,并亲自动手将 WebAssembly 应用在实际业务中。

WebAssembly(wasm)到底是什么

WebAssembly到底是何方神圣?来自官方的定义如下:



翻译成中文的话,WebAssembly(wasm)就是一个可移植、体积小、加载快并且兼容 Web 的全新格式。


实际上,WebAssembly 是一种新的字节码格式,旨在成为高级语言的编译目标,目前可以使用 C、C++、Rust、Go、Java、C#等编译器(未来还有更多)来创建 wasm 模块(见下图)。该模块以二进制的格式发送到浏览器,并在专有虚拟机上执行,与 JavaScript 虚拟机共享内存和线程等资源。



wasm 模块总是与 JavaScript“胶水”代码一起使用,在必要的时候可以执行一些有用的操作。WebAssembly 可以看做是对 JavaScript 的加强,弥补 JavaScript 在执行效率上的缺陷。


为什么要有 WebAssembly

自从 Brendan Eich 创造了 JavaScript 语言以来,一直都没有静态变量类型。由于 JavaScript 的动态变量,上一秒可能是 Array,下一秒就变成了 Object,那么引擎所做的优化就失去了作用,这也是导致运行效率降低的原因。


为了解决这个问题,WebAssembly 的前身,asm.js 诞生了。但是无论 asm.js 对静态类型的问题解决的再好,它始终逃不过要经过 Parser 和 ByteCode Compiler,这也是 JavaScript 代码在引擎执行过程中最耗时的两步。


因此在 2015 年,我们迎来了 WebAssembly。WebAssembly 是 C、C++、Rust、Go、Java、C#等语言的编译目标,经过编译器编译之后的二进制代码,无需经过 Parser 和 ByteCode Compiler 这两步,比 asm.js 更快。WebAssembly 强制使用静态类型,在语法上完全脱离 JavaScript,同时具有沙盒化的执行环境,安全性更好。


WebAssembly 的优势

让我们分别对比下 WebAssembly 版本和原生 JavaScript 版本的递归无优化的 Fibonacci 函数,下图是这两个函数在值为 45、48、50 时的性能对比:



显而易见 WebAssembly 几乎比 JavaScript 快一倍,这对于需要高计算量、对性能要求高的应用场景如图像/视频解码、图像处理、3D/WebVR/AR 等,优势非常明显。我们可以将现有的用 C、C++等语言编写的库直接编译成 WebAssembly 运行到浏览器上,并且可以作为库被 JavaScript 引用。那就意味着我们可以将很多后端的工作转移到前端,减轻服务器的压力,这是 WebAssembly 最为吸引人的特性。


让我们再用个动图直观感受下 WebAssembly 与 JavaScript 的运行速度,相比之下 WebAssembly 确实快很多。如果想自己跑跑看或是看源码的开发者,可以移驾 Guy Bedford 的 repo - Wasm Demo



除此之外,WebAssembly 还会引入 GC / DOM / Web API 等一系列特性,DOM 和 Web API 很重要,这意味着 WebAssembly 可直接和 html 以及浏览器进行交互,从技术角度来看可以完全取代 JavaScript。

WebAssembly 能取代 js 吗

自从有了 WebAssembly 以来,一直有一股声音说可以取代 JavaScript 了。他们的观点是传统的解释型语言在执行时免不了要进行词法分析 -> 语法分析 -> 预解析 -> 解释执行等过程,性能太差。但是现代浏览器的 JS 引擎在进化的过程中引入了许多优化手段如字节码缓存,可以省掉每次解释执行时重新遍历语法树的过程,虚拟机可直接取指 -> 解码 -> 运行。Chrome V8 的 JIT 在运行过程中直接生成并缓存机器码,下次执行时可由计算机直接执行,连解码的过程都省掉了。虽然 JavaScript 跟 C、C++等静态语言相比执行速度还有很大差距,但是大多数 Web 应用的性能瓶颈已经不是 JavaScript 语言本身了,反而是网络资源的加载,这一点 WebAssembly 并无优势。


而且,当要开发一个新的功能时,无论你是选择用 C、C++、Rust 还是 Java,开发成本都要比 JavaScript 高。遇到不兼容 WebAssembly 的浏览器(见下图),你还得考虑降级为用 JavaScript 实现,这无疑增加了业务复杂性。


写在最后

虽然 WebAssembly 还在持续不断地发展,但已经有不少开发者积极拥抱并把它应用于实际业务中,相信 WebAssembly 和 JavaScript 可以长期共存,充分发挥各自的优势一起大放光彩。

参考资料


2019-08-16 18:497832

评论

发布
暂无评论
发现更多内容

企业应用现代化实用教程 | ​IT架构师必读的DevOps落地行动指南

York

DevOps 云原生 数字化转型 一体化架构 应用现代化

中国掀起数字化浪潮的4个显著变化

优秀

数字化转型 数字化

监控告警怎么搭建比较合理?B站SRE实践总结了4大关键步骤

TakinTalks稳定性社区

高可用 稳定性 SRE 监控告警 大厂实践

汽车电子控制系统的构成

不脱发的程序猿

汽车电子 嵌入式软件 汽车电子控制系统

正式线上环境下微服务平台落地实践

HelloGeek

微服务 微服务架构 Spring Cloud Service Mesh 服务网格 mesh

[教你做小游戏] 用86行代码写一个联机五子棋WebSocket后端

HullQin

CSS JavaScript html 前端 8月月更

云原生2.0构建数字化

科技云未来

C++文件读写操作分析文本文件与二进制文件

CtrlX

c c++ 面向对象 8月月更 opp

网站建设流程

源字节1号

网站开发

FlyFish|前端数据可视化开发避坑指南(二)

云智慧AIOps社区

JavaScript 大前端 低代码 数据可视化 大屏可视化

开放下载 | 飞天技术峰会-云原生加速应用构建分论坛资料开放下载

阿里巴巴中间件

阿里云 阿里云云原生

灵魂拷问:你精神内耗了吗?由TA来治愈吧

脑极体

IPv6过渡技术的推进策略

穿过生命散发芬芳

ipv6 8月月更

科普达人丨一图看懂块存储&云盘

阿里云弹性计算

阿里云 云盘 块存储

融云,把企业文化放在“场景”里

融云 RongCloud

企业文化

程序员过中秋

楠羽

中秋节

Tomcat 的安装与环境配置

楠羽

开源 #开源

加密世界的福音,Galaxy Project上领取专属Zebec OAT

鳄鱼视界

迁移 Nacos 和 ZooKeeper,有了新工具

阿里巴巴中间件

zookeeper 阿里云 云原生 nacos 迁移

华为云助力论坛服务

科技云未来

陈大好:持续创造小而美的产品丨独立开发者 x 开放麦

声网

人工智能

redis持久化持久化的方案与各自存在的问题

想要飞的猪

天翼云通过2022可信云安全首批云工作负载保护平台评估

极客天地

21个赛区,7大赛题,鲲鹏应用创新大赛2022区域赛期待与你相遇

科技热闻

秒云获得阿里云首批产品生态集成认证,携手阿里云共建云原生智能运维生态服务

阿里巴巴中间件

阿里云 云原生 云原生加速器

华为云数字化

科技云未来

火力全开!鲲鹏应用创新大赛2022区域赛即将陆续开赛

科技热闻

Monorepo 能给前端工程带来什么

领创集团Advance Intelligence Group

前端工程师 Monorepo

K8s小白?应用部署太难?看这篇就够了!

北京好雨科技有限公司

Kubernetes 云原生

leetcode 697. Degree of an Array 数组的度(简单)

okokabcd

LeetCode 数据结构与算法

每日一R「13」数据结构(四)闭包

Samson

学习笔记 8月月更 ​Rust

WebAssembly是什么?_语言 & 开发_Paul_InfoQ精选文章