WebAssembly工程化指南-C++篇

最近项目中遇到一个文档解析的场景,目标是在浏览器端能预览markdown文件。

拿到这个需求,相信很多前端同学会想到使用开源的库,比如github上很受欢迎的marked,当然,是一个简单而有效的方案。

但是如果你了解webassembly一点点的话,相信你也会觉得,像这种数据处理的活交给C++来干,没错。

好吧,我们抱着这个猜想开始下面的尝试吧。

搭建环境

为了把C++代码编译成能在浏览器上运行的wasm,我们需要使用 Emscripten。 安装Emscripten依赖如下几个工具:Git、CMake、GCC、Python 2.7.x。

编译 Emscripten:

git clone https://github.com/juj/emsdk.git
cd emsdk
./emsdk install sdk-incoming-64bit binaryen-master-64bit
./emsdk activate sdk-incoming-64bit binaryen-master-64bit
source ./emsdk_env.sh

创建项目

推荐如下的目录结构:

.
├── build
├── build.sh
├── include
│   └── sundown
│       ├── autolink.c
│       ├── autolink.h
│       ├── buffer.c
│       ├── buffer.h
│       ├── houdini.h
│       ├── houdini_href_e.c
│       ├── houdini_html_e.c
│       ├── html.c
│       ├── html.h
│       ├── html_blocks.h
│       ├── markdown.c
│       ├── markdown.h
│       ├── stack.c
│       └── stack.h
├── src
│   ├── index.cc
│   └── wasm.c
└── web
    ├── index.html
    ├── index.js
    ├── index.wasm
    └── test.md

这里为了测试,我是直接使用了通过C解析markdown文档开源库sundown。就是目录中的include/sundown。

我们需要一个入口文件,取一个名字wasm.c

#include <errno.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <emscripten/emscripten.h>

#include "markdown.h"
#include "html.h"
#include "buffer.h"

#define READ_UNIT 1024
#define OUTPUT_UNIT 64

const char*
EMSCRIPTEN_KEEPALIVE wasm_markdown(char* source)
{
	struct buf *ib, *ob;
	struct sd_callbacks callbacks;
	struct html_renderopt options;
	struct sd_markdown *markdown;

	ib = bufnew(READ_UNIT);
	bufgrow(ib, READ_UNIT);
	size_t char_len = strlen(source);
	bufput(ib, source, char_len);

	ob = bufnew(OUTPUT_UNIT);
	sdhtml_renderer(&callbacks, &options, 0);
	markdown = sd_markdown_new(0, 16, &callbacks, &options);
	sd_markdown_render(ob, ib->data, ib->size, markdown);
	sd_markdown_free(markdown);

	/* cleanup */
	bufrelease(ib);
	bufrelease(ob);

	return (char *)(ob->data);
}

入口文件是调用lib的方法实现md字符解析,输出html格式的字符。完成编码部分,接下来就可以构建了。

这是我的build脚本:

emcc src/wasm.c \
-O3 \
./include/sundown/markdown.c \
./include/sundown/buffer.c \
./include/sundown/autolink.c \
./include/sundown/html.c \
./include/sundown/houdini_href_e.c \
./include/sundown/houdini_html_e.c \
./include/sundown/stack.c \
-s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap", "ccall"]' \
-s TOTAL_MEMORY=67108864 \
-s TOTAL_STACK=31457280 \
-o build/index.js -I./include/sundown \

cp build/index.js build/index.wasm web/

解释下其中的几个参数:

测试

启动一个web Server,因为webAssembly不支持file协议下加载。

emrun --port 3000 ./web

emrun是Emscriptem自带的webServer工具,你也可以使用你喜欢的。

初始化并调用C接口。

<script src="http://127.0.0.1:3000/markdown.js"></script>
<script>
const wasm_markdown = Module.cwrap('wasm_markdown', 'string', ['string']);
console.log(wasm_markdown('# hello wasm'));
// 输出:<h1>hello wasm</h1>
</script>

多线程

先看DEMO,分析在代码之后。

const mdUrl = 'http://127.0.0.1:3000/markdown.js';

class MarkdownParse {
	isInited = false;
	worker = undefined;
	async init(url) {
		if (this.isInited) {
			return;
		}
		return new Promise(rs => {
			const workerScripts = `
				addEventListener('message', async(e) => {
				  if (e.data == "startWorker") {
				    importScripts("${url}");
				    postMessage({ type: 'init' });
				  } else if (e.data.type === 'parseData') {
				  	await markdown.ready;
				  	const data = markdown.parse(e.data.input);
				  	postMessage({ type: 'parseSuccess', data }); 
				  }
				}, false)`;
			this.worker = new Worker(window.URL.createObjectURL(new Blob([workerScripts])));
			this.worker.addEventListener('message', e => e.data.type === 'init' ? rs() : '');
			this.worker.postMessage("startWorker");
			this.isInited = true;
		})
	}
	async parse(input) {
		if (!this.isInited) {
			await this.init(mdUrl);
		}
		return new Promise(resolve => {
			this.worker.addEventListener('message', 
				e => e.data.type === 'parseSuccess' ? 
					resolve(e.data.data) : null
			);
			this.worker.postMessage({ type: 'parseData', input });
		});
	}
};

(async() => {
	const md = new MarkdownParse();
	// // 触发多次解析
	// const html = [
	// 	await md.parse('# Hello Markdown'),	
	// 	await md.parse('- [ ] Todo1'),
	// 	await md.parse('- [ ] Todo2'),
	// 	await md.parse('- [x] Todo3'),
	// 	await md.parse('> Date.now()'),
	// 	await md.parse('`const a = Date.now();`'),
	// ];
	// document.querySelector('#markdown-body').innerHTML = html.join('');

	md.parse('123');
	const text = await (await fetch('test.md')).text();
	const testJS = () => {
		const a = Date.now();
		// marked 是JS版本的markdown解析库
		marked(text);
		return Date.now() - a;
	};
	const testWasm = async() => {
		const a = Date.now();
		await md.parse(text);
		return Date.now() - a;
	};
	const vs = async() => {
		const result = {
			js_parse_time: testJS(),
			wasm_parse_time: await testWasm(),
		};
		result.speed = result.js_parse_time / result.wasm_parse_time;
		// 显示wasm和JS的解析速度对比
		document.querySelector('#markdown-body').innerHTML = JSON.stringify(result);
	}
	await vs();
	// 输出markdown的HTML
	// document.querySelector('#markdown-body').innerHTML = await md.parse(text);

})();

解析下思路,线抽线一个类 MarkdownParse 来实现wasm的加载和初始化以及api。 默认情况下, web worker是不允许跨域的,但是,有方案的。web worker内部提供了一个importScripts方法来加载非同源的JS。

收获&总结

到此我们完成了今天的构建webassembly应用实例,有如下收获:

总结,本文可能只是一个很小的场景,而且单从效率这点来看,JS的200ms对比wasm的50ms,其实对于前端来说,并没有特别惊艳的优势。BUT,这只是一个开始,wasm对前端带来的性能提升会百花齐放,我们拭目以待吧~