WebAssembly:随风潜入夜

What?

  WebAssembly 是一种二进制格式的类汇编代码,可以被浏览器加载和并进一步编译成可执行的机器码,从而在客户端运行。它还可以作为高级语言的编译目标,理论上任何语言都可以编译为 WebAssembly。

  我们知道汇编语言就是机器码的一种直译版本,它是一套指令的集合,必须与特定机器匹配。WebAssembly 虽然也可以看成汇编代码,但有一点不同,它是与特定机器无关的,它的指令被称为虚拟指令,并非真正的处理器指令。也就是说 WebAssembly 是一个平台无关的通用编译目标,可以运行在各种设备上,包括手机和物联网。

  WebAssembly 起源于 Mozilla 的一个项目:ASM.js,这玩意儿简单的说就是 JS 的一个轻简版子集,去除了动态类型、对象、垃圾回收等损耗性能的部件。它的作用是成为 C/C++ 的编译目标,从而能将大中型游戏引入浏览器,事实证明效果不错。然而 ASM.js 毕竟仍然是 JS,它不具备原生代码的一些功能,如 SIMD、线程、共享内存等,因此 ASM.js 进一步发展,就成了 WebAssembly。

  WebAssembly 的实质是 AST,而非字节码(bytecode),使用 AST 的原因是因为 AST 比字节码更容易压缩,也更容易翻译。

  作为浏览器厂商四巨头(谷歌、苹果、火狐、微软)合作共谋的产物,WebAssembly 的应用前景不可小觑。

Why?

  随着高计算量 Web 应用(3D图形、游戏、VR等)的出现,JavaScript 的速度又一次显得不够用了。WebAssembly 的目的就是让浏览器多一种运行更快速的代码。

  WebAssembly 比 JS 快这是显然的,一个接近 native code,另一个是动态类型的解释型语言,完全没法比。简单比较一下 JS 和 WebAssembly 的运行时过程就知道 WebAssembly 究竟快在哪儿了:

WebAssembly 不仅运行更快,传输也更快,因为它是二进制格式的,压缩率更高,体积更小。引用 Opera CTO 罗志宇的说法,WebAssembly 就是对 JS 性能问题的终极填坑方案。

在浏览器中引入 native code 的尝试其实早就有了,但是几乎没有一个成功的,无论是 Java Applet,还是谷歌的 Portable Native。Brendan Eich 对此的看法是,这些方案试图重建一个系统来替代 JS,这种革命式的改造在无权威的互联网世界是行不通的,因为 JS 已经在 web 端形成了自然垄断地位,如果仅仅为了改善性能问题,就彻底推翻重构,无异于削足适履,浏览器厂商是不干的。

  作为实用主义者,Brendan Eich 认为现实总是以渐进的方式改良,因此 WebAssembly 被设计为与 JS 协同使用,它既不会,也不可能替代 JS。

How?

  生成 WebAssembly 的方式有多种,可以直接手写,因为 WebAssembly 提供了文本形式,写起来跟汇编差不多。更通行的方式是将用其它语言——目前主要是静态语言(C、C++、Rust等)编写的代码编译成 WebAssembly(.wasm),编译工具最主要的是 LLVM。如果要支持动态语言,如 Python、Ruby 甚至 JS,那么编译器必须引入更多的扩展。

  LLVM 编译的基本工作机制是:首先使用一种针对特定语言的插件(类似于 webpack 中的 loader)将该语言编译为一种中间态形式(IR),然后再由 LLVM 对 IR 进一步编译、优化,从而得到.wasm。当然也有其它的编译工具,如 Emscripten、Binaryen 等。工具链的便捷程度是影响 WebAssembly 发展的一个重要因素。

得到 .wasm 文件之后怎么用呢?目前 .wasm 需要由 JS 引入后才能运行,JS 中有一个用于操作二进制代码的 API:ArrayBuffer,JS 使用 ArrayBuffer 加载 .wasm,然后调用编译方法,然后再创建实例。WebAssembly 还没有集成 Web API,要调用 Web API,就必须借助 JS。未来计划允许 WebAssembly 直接调用 Web API,并且让 .wasm 模块像 ES6 模块一样易于使用。

  目前 Chrome、FF、Edge、Safari 最新版都已支持 WebAssembly,对于不支持 WebAssembly 的浏览器,会有 polyfill 把 WebAssembly 重新翻译为 JavaScript。

Pros?

  1、WebAssembly 使得 web 应用具备了原生应用的性能;

  2、WebAssembly 提供了一种符合 W3C 标准的技术,从而可以取代私有的、非标的、安全性差的插件,如 flash 和 Silverlight;

  3、从古至今,浏览器只支持一种程序语言:JS,WebAssembly 使得有更多语言能够用于打造 web 应用;

  4、WebAssembly 是一个渐进式的方案,而非疾风骤雨,势不两立的革命,因此更具有现实可操作性。

Cons?

  现在还不好说,咱们拭目以待吧。

参考资料:

https://www.smashingmagazine.com/2017/05/abridged-cartoon-introduction-webassembly/#

https://medium.com/javascript-scene/why-we-need-webassembly-an-interview-with-brendan-eich-7fb2a60b0723

时间: 2024-08-24 14:19:08

WebAssembly:随风潜入夜的相关文章

WebAssembly,可以作为任何编程语言的编译目标,使应用程序可以运行在浏览器或其它代理中——浏览器里运行其他语言的程序?

Mozilla.谷歌.微软和苹果已经决定开发一种面向Web的二进制格式.该格式名为WebAssembly,可以作为任何编程语言的编译目标,使应用程序可以运行在浏览器或其它代理中. 几年前,我们在InfoQ上讨论过面向Web的通用字节码的优点(见<讨论:我们是否需要一种通用的Web字节码?>),概括了创建这样一种格式的困难.其中提及的一个主要问题是主要的浏览器制造商无法达成一致:Mozilla在推asm.js,谷歌支持PNaCI,苹果在开发FLTJIT,而微软没有对其中的任何一种表示出兴趣.但现

[WASM] Write to WebAssembly Memory from JavaScript

We write a function that converts a string to lowercase in WebAssembly, demonstrating how to set the input string from JavaScript. WASM Fiddle: https://wasdk.github.io/WasmFiddle/?h1s69 Demo Repo: https://github.com/guybedford/wasm-intro We want to c

再次 WebAssembly 技术探讨

上次说到你可以将C代码编译成web调用的js文件,当时,很兴奋.哈哈,我也误以为是系统级别的C编程呢! 哎,今天,告诉你一个残酷的事实是,只是C语言级别,不是系统级别.因为WebAssembly目标是跨平台,所以,怎么能有系统API掺和进来呢.当然,哪天等到各个系统厂商都把自己的系统调用揉进了WebAssembly的SDK库里时候,诸位就可以继续做梦了!哈哈哈. 今天,我们继续WebAssembly下源码C语言教程吧,这次要复杂些了. 除了基本类型,比如int, 那字符串呢? 嘿嘿,今天就来回答

[WASM] Call a JavaScript Function from WebAssembly

Using WASM Fiddle, we show how to write a simple number logger function that calls a consoleLog function defined in JavaScript. We then download and run the same function in a local project. WASM Fiddle: https://wasdk.github.io/WasmFiddle/?cvrmt Demo

WebAssembly系列2-为什么我们需要WebAssembly—采访Brendan Eich

在2015.06.17, JavaScript之父Brendan Eich宣布了一个新项目:将新的底层功能(low level primitives)带入web中[1],?这将使在浏览器或其他JavaScript环境中采用类似于C & C++等语言编写的项目的编译更加容易.如果是第一次听到这个想法,可参见阅读"What is WebAssembly"的基本描述[3]. WebAssembly团队包括来自Google, Microsoft, Mozilla, Apple, 以及W

Qt for WebAssembly

To complete the list of Qt framework items, let’s talk a bit about our ongoing research of Qt for WebAssembly. We have earlier looked into Qt for Native Client and emscripten and the current work for WebAssembly continues along the same path. Since 2

EOS 新增的 WebAssembly 解释器,是什么鬼?

Daniel Larimer 在最近的博客中透露,EOS 新增了官方的 WebAssembly 解释器,用来解释执行 WebAssembly 智能合约,加上之前的编译执行,EOS 智能合约有了两种执行方式. 对于很多没有中间语言的(字节码)的编程语言来说,根本不存在解释执行与编译执行的选项,比如传统 C/C++ 只能编译执行,直接将代码编译成为可执行的二进制机器码,我们电脑上 .exe 文件就是编译的成果.再比如 python 和 javascript 只能解释执行,用户拿到的就是原始的代码,解

WebAssembly简单指导---译

开发者指导 本页面提供一步一步的操作将一个简单的程序编译成webassembly 前提要求 为了编译成webAssembly,需要提前安装一些工具: Git.在Linux和OSX下已自带了Git,在Windows下需要安装 Git for Windows CMake.在Linux和OSX下可以使用像apt-get 或 brew 这样的包管理工具来安装,在Windows下下载CMake installer; 编译工具. 在linux下安装GCC,在OSX下安装Xcode.在Windows下安装 V

How Javascript works (Javascript工作原理) (六) WebAssembly 对比 JavaScript 及其使用场景

个人总结: 1.webassembly简介:WebAssembly是一种用于开发网络应用的高效,底层的字节码.允许在网络应用中使用除JavaScript的语言以外的语言(比如C,C++,Rust及其他)来编写应用程序,然后编译成(提早)WebAssembly. 这是 JavaScript 工作原理的第六章. 现在,我们将会剖析 WebAssembly 的工作原理,而最重要的是它和 JavaScript 在性能方面的比对:加载时间,执行速度,垃圾回收,内存使用,平台 API 访问,调试,多线程以及