说说WebAssembly

Posted 2021-04-25 程序猿与人

今天打算在这儿聊聊WebAssembly，来学习一下。

什么是WebAssembly

WebAssembly(简称Wasm)是一种新的字节码格式，是二进制文本格式， 可以运行在浏览器里，它算是新的编程语言，但是我们不会去直接写webAssembly，我们一般用一种高级编程语言去写一个程序，然后通过编译，变成WebAssembly，从而让我们的代码运行在浏览器里。所以可以说WebAssembly是编译对象。

WebAssembly的特别之处

高效快捷和有很多开发潜力

• 在高级编程语言被编译成WebAssembly之后，因为它是二进制文本格式， 接近于机器码，所以可以快速装载运行在浏览器里，大概过程比较简洁，包括解码，编译，执行。但是javascript需要加载的时间就长了一些了，解析，编译，优化编译，再优化和垃圾回收。在这里我就不做详细分析了。如果有需求，我可以再写一篇做详细分析

• 虽然WebAssembly会性能更好，但是我觉得WebAssembly的目的不是取代javascript，更多的是创造了更多的机会，比如，游戏直接可以运行在浏览器里，桌面应用也可以运行在浏览器里等等

WebAssembly目前的应用

WebAssembly目前还是比较新的，还处在大家探索发觉的阶段。所以很少有众所周知的哪个大应用运用了WebAssembly。除了WebAssembly 的官网上demo了一个unity的游戏 (https://webassembly.org/demo/) 和网上很多developer自己开发的开源项目，我唯一知道的就是一个最近新出的设计软件Figma，用上了WebAssembly，提高了在浏览器加载软件的速度(https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/)

编译WebAssembly

让我们来举个例子去了解一下如何编译WebAssembly

用C写一个print hello world 的function，通过WebAssembly运行到浏览器上

• 第一步先安装一下 Emscripten SDK, 是为了把高级语言编译成WebAssembly， 参考这里详细安装教程: https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html

“Emscripten is a toolchain for compiling to asm.js and WebAssembly, built using LLVM, that lets you run C and C++ on the web at near-native speed without plugins.”

• 接下来我们开始用C写两个方法，一个是直接打印hello world，另外一个是点击一个按钮去打印hello world

Emescripten 转化的代码时候永远都是call main() function的，其他方法就被忽略了。所以我们要放一个 EMSCRIPTEN_KEEPALIVE 在我们的clickMe 方法前面，前提是要先import  emscripten.hlibrary

• 写完C代码之后，我们就在terminal里面执行 emcc hello.c -s WASM=1 -O3 -o hello.js

这段命令是为了生成文件hello.js 和hello.wasm，hello.js 里包含了C和 wasm之间进行转换的粘合代码

• 我们再terminal里继续执行另外一个命令  emcc -o hello.js hello.c -O3 -s WASM=1 -s NO_EXIT_RUNTIME=1 -s "EXTRA_EXPORTED_RUNTIME_METHODS=["ccall"]"

这行命令的主要目的是为了能在js里面去call C的function

• 接下来我们建一个hello.html 文件

html干的事情基本就是显示一个按钮，然后点击按钮通过Module.ccall</code?>去调用C的clickMe function

• 接下来可以建一个服务器

npm install http-server -g http-server . -p 8000

这样就可以去localhost看见写的网页了，看见console log上会print hello world， 如果点按钮 click me 还会打印一个hello world

 

WebAssembly的未来

让我们来试着畅想一下WebAssembly的未来

• 所有的桌面软件都可以在网页里打开，我们现在在电脑上用的软件，都可以通过WebAssembly运行到网页上去，以后再也不用下载软件占电脑空间，只需打开网页。

• 以后所有的游戏也不需要下载了，只需打开网页，就都可以顺畅的玩儿起来

• 所以比较大胆的畅想就是，在未来，一个操作系统上只需要一个浏览器。

参考链接

https://webassembly.org/

https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm

https://www.wasmrocks.com/