揭开WebAssembly 的神秘面纱

WebAssembly 介绍

在上世纪90年代推出JavaScript几经波折,源于各大巨头的竞争和妥协,最后成了唯一一个各大浏览器都支持的动态语言。但是不得不说JS的语言语法繁琐丑陋难于进行大型项目的开发;同时作为一个动态语言不可以避免的有性能为题。为了解决这些问题,出现一些很成功的项目,比如微软的TypeScrip语言、谷歌的Dart语言,Mozilla(firfox)的asm.js,但是都没有真正的解决问题,或者得不到一致支持。所以W3C 牵头推出了WebAssembly。由W3C WebAssembly工作组维护,最新的主流浏览器Chrome,Firefox,Safari,Edge,移动浏览器都对其提供了支持。

揭开<a href='/tag/webassembly.html'>WebAssembly</a> 的神秘面纱

JS V8引擎也支持WebAssembly,所以可以在Node.js中无缝嵌入使用分。

虽然我们说WebAssembly目的是解决了JS的性能等问题,但并不是要取代JavaScript,而且现在WebAssemble的运行还要强烈依赖于JS,不排除将来浏览器直接支持,但是目前还需要两者一起协同工作。两者互操作,可以不怎么较大改变目前Web工作架构和流程的情况下最佳方式,即可利用JavaScript的灵活性和易用性,也能通过WebAssembly的强大功能和性能来补充它。

安全性

WebAssembly代码运行在JS虚拟机的沙盒环境中,具有与JavaScript相同的安全策略,浏览器确保相同的源和权限策略。

高性能

WebAssembly的引入就是为了提高速度它是一种编译语言,这意味着程序将在执行之前转换为二进制文件。在理论上它可以达到与C等本机编译语言同等的性能。

与JavaScript(动态和解释性编程语言)相比,呈几何级的性能提高。。

WebAssembly的原理

WebAssenbly的执行包括两部分:编译器前端和后端。前端部分实现将高级语言(CC++和Rust)编译成LLVM IR码。后端负责将LLVM IR编译成各架构(x86,AMD64,ARM)对应的机器码。

揭开<a href='/tag/webassembly.html'>WebAssembly</a> 的神秘面纱

揭开<a href='/tag/webassembly.html'>WebAssembly</a> 的神秘面纱

实际中常用的是Emscripten,他可以将CC++应用程序移植到WebAssembly,原生C/C++代码编译为两个文件.wasm文件和.js文件。

wasm文件包含实际的WASM代码,.js文件包含允许JavaScript代码运行WASM的所有框架。

Emscripten还支持很多的任务,比如将OpenGL调用转换为WebGL;为DOM API和其他浏览器和设备API提供绑定;提供可在浏览器中使用的文件系统实用程序等等。默认情况下,这些东西不能直接在WebAssembly中访问。

Rust代码则无需第三方工具,可以直接编译为WebAssembly目标代码。

WebAssembly的用途

WebAssembly特适合那些需要非常高性能的Web产品。目前已经有很多公司用它来在网上提供更好在线服务。比如Figma,一个在线设计应用程序,可以它来创建我在日常工作中使用的一些图形。只需浏览器既可以实现在线设计作图,非常方便快捷,而且主要是速度非常快。

揭开<a href='/tag/webassembly.html'>WebAssembly</a> 的神秘面纱

Figma基于React构建的,但应用程序的主要功能部分是WebAssembly图形编辑器,它由C++应用编写,并转译为WebAssembly,使用WebGL在Canvas中呈现。

知名CAD设计软件,AutoCAD也发布了在Web应用程序中运行的流行设计产品,使用WebAssembly呈现其复杂的编辑器,该编辑器(从桌面客户端代码库迁移)是使用C++构建的。


揭开<a href='/tag/webassembly.html'>WebAssembly</a> 的神秘面纱

Web在线游戏也用WebAssembly结合WebGL技术,下面是WebAssembly官方示例坦克对战:

揭开<a href='/tag/webassembly.html'>WebAssembly</a> 的神秘面纱

WebAssembly现状和发展趋势

WebAssembly目前版本为1.0。官方仅支持3种语言CC++和Rust,预计会推出的语言有Go,Java和C#(需要对GC垃圾收集的支持)。

目前四种浏览器Chrome,Edge,Firefox和WebKit的WebAssembly CG成员已经达成共识,即初始(MVP),WebAssembly API和二进制格式的设计已完成现在只需在线试用验证就可以使用。

使用WebAssembly对浏览器API进行任何调用时,目前还需要JS进行交互,用JS作为入口。未来WebAssembly可能被浏览器内置支持,并使其能够直接调用DOM,Web Workers或其他浏览器API等。

WebAssembly实战

这部分我们将一个实例来说明,WebAssemble的开发过程,涉及到C代码及编译、Emscripten,及node.js。

揭开<a href='/tag/webassembly.html'>WebAssembly</a> 的神秘面纱

安装Emscripten

通过克隆emsdk 的GitHub仓库来安装Emscripten:

git clone github:/juj/emsdk.git

然后

cd emsdk

确保安装了最新版本的Python。

然后运行安装附带的Install Certificates.command程序。

./emsdk install latest

揭开<a href='/tag/webassembly.html'>WebAssembly</a> 的神秘面纱

下载并安装软件包,然后运行

./emsdk activate latest

将其添加到shell路径:

source ./emsdk_env.sh

C程序编译为WebAssembly

我们创建一个简单的C程序,那就是大家都熟悉的经典Hello World程序,并最终实现在浏览器中运行。

#include <stdio.h>

int main(int argc, char ** argv) {

printf("Hello World\n");

}

gcc编译它:

gcc -o cc hellocc.c

并运行./cc会打印"Hello World"。

让我们使用Emscripten编译这个程序,在浏览器中运行它:

emcc hellocc.c -s WASM = 1 -o test.html

Emscripten给我们生成了一个html页面,它已经打包了编译后WebAssembly程序,准备运行。我们还需要从Web服务器打开它,而不是从本地文件系统打开它。

启动本地Web服务器,例如http-server全局npm包(如果没有,使用npm install -g http-server安装它)它已安装)。这里是:

揭开<a href='/tag/webassembly.html'>WebAssembly</a> 的神秘面纱

如上显示,程序在控制台中运行并打印"Hello World"。

这是运行编译为WebAssembly的程序的一种方法。另一个选择通过js来调用。

使用JavaScript调用WebAssembly函数

为了实现从JavaScript调用WebAssembly函数,让我们调整先前定义的Hello World,给他引入emscripten:头:

揭开<a href='/tag/webassembly.html'>WebAssembly</a> 的神秘面纱

#include <emscripten/emscripten.h>

int EMSCRIPTEN_KEEPALIVE hello(int argc, char ** argv) {

printf("Hello!\n");

return 8;

}

如果无没有main()或启动时执行的其他代码调用,则需要添加EMSCRIPTEN_KEEPALIVE标志保护函数不被自动剥除(因为编译器会优化生成的编译代码并删除未使用的函数)。

这个小函数输出为hello World!并返回数字8。

我们用emcc再次编译:

emcc test.c -s WASM = 1 -o test.html -s \

"EXTRA_EXPORTED_RUNTIME_METHODS = ['ccall','cwrap']"

编译的参数中,我们添加了EXTRA_EXPORTED_RUNTIME_METHODS标志,告诉编译器将ccall和cwrap函数保留在Module对象上,之后,我们会在JS中调用。

现在我们启动Web服务器,一旦页面打开,在控制台中调用Module.ccall Module.ccall('hello', 'number', null, null),结果会打印 "Hello World!"并返回8:

揭开<a href='/tag/webassembly.html'>WebAssembly</a> 的神秘面纱

Module.ccall中的4个参数分别指:C函数名,返回类型,参数类型(数组)和参数(也是数组)。

例如,如果函数接受2个字符串作为参数,我们需要通过这样调用它:

Module.ccall('hello','number',['string','string'],['hello','world'])

可以使用的类型有null,string,number,array和boolean。

我们还可以使用Module.cwrap函数为hello函数创建一个JavaScript打包,这样我们可以使用JS函数多次调用该函数:

const hello = Module.cwrap('hello',number,null,null)
揭开<a href='/tag/webassembly.html'>WebAssembly</a> 的神秘面纱

{{collectdata}}

网友评论0