WebAssembly について話す

Zhengcaiyun 技術チーム.png

1 はじめに

「効率よく英単語を覚えるにはどうしたらよいか」は、誰もが悩んだことがあると思います. 毎回、決心するたびに、今度は単語を覚えることを主張し、CET 4 または 6 に合格してから、それを取得する必要があります.単語帳と開始：「放棄、放棄、放棄、放棄...」。案の定、始まる前に終わってしまうものもあります。

後になって、英単語には独自のルールがあることを発見した人もいます. 多くの複雑な単語は複数の単語で構成されており、単語の意味は単語の語根にも反映されています. このルールを発見すると、単語を覚えるのがずっと簡単になります。

上記の 2 つの段落を読んだ後、興味があるかもしれませんが、これは今日共有されている技術に関連していますか? 結果は明らかでした。もちろんそうではありませんでしたが、これがテクノロジーに対する私たちの理解の始まりでした。

WebAssembly では、Web - フロントエンドブラウザー、Assembly - アセンブリの 2 つの部分に分割できます。これは、フロントエンドブラウザーに適用されるアセンブリテクノロジです。本当にそうなのか、それがどのように行われ、何をするのか、私たちは疑問に思っています.

2. コンセプト

まず、公式ドキュメント、もう少し専門的です。

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.
复制代码

簡単な翻訳は次のとおりです。

WebAssembly（缩写为Wasm）是基于堆栈的虚拟机的二进制指令格式。Wasm被设计为编程语言的可移植编译目标，支持在web上部署客户端和服务器应用程序。
复制代码

簡単に言えば、プログラミング言語で書かれたコードをブラウザが理解できるマシンコードに変換する技術で、ネイティブに近い効率でウェブブラウザ上でプログラムを実行できるようになります。次の特徴があります。

効率的

WebAssembly には完全なセマンティクスのセットがあります. 実際, wasm は小さくて高速にロードされるバイナリ形式です. その目標は、ハードウェア機能をフルに活用して、ネイティブの実行効率を達成することです.
安全性

WebAssembly はサンドボックス化された実行環境で実行され、既存の JavaScript 仮想マシンに実装することもできます。Web 環境では、WebAssembly は同一生成元ポリシーとブラウザーセキュリティポリシーに厳密に従います。
開いた

WebAssembly 设计了一个非常规整的文本格式用来、调试、测试、实验、优化、学习、教学或者编写程序。可以以这种文本格式在web页面上查看wasm模块的源码。
标准

WebAssembly 在 web 中被设计成无版本、特性可测试、向后兼容的。WebAssembly 可以被 JavaScript 调用，进入 JavaScript 上下文，也可以像 Web API 一样调用浏览器的功能。当然，WebAssembly 不仅可以运行在浏览器上，也可以运行在非web环境下（重点，要考的）。

3.因何而来

3.1 js历史

要说 wasm 因何而来，那就不得不谈一谈 javascript 了。 js 是一门动态类型的语言，编写程序时无需考虑变量类型，而且还可以运行时改变类型。对于我们开发者，确实很方便，但对于运行它的引擎就很有问题了。我们先来介绍一下 js 的编译运行过程：

上图是 js 编译运行的一个大致工作流程。我们来看一看 js 代码在引擎中会经历什么。

首先加载我们所写的 js 代码。
然后进入 Parser，Parser 会把代码转化成 AST（抽象语法树）。
然后根据抽象语法树，Bytecode Compiler 字节码编译器会生成引擎能够直接阅读、执行的字节码。
字节码进入翻译器，将字节码一行一行的翻译成效率十分高的 Machine Code。

在项目运行的过程中，引擎会对执行次数较多的 function （也就是热点代码）进行优化，引擎将其代码编译成 Machine Code 后打包送到 Just-In-Time(JIT) Compiler 编译器中，下次再执行这个 function，就会直接执行编译好的 Machine Code。但是由于 js 的动态变量，上一秒可能是 Array，下一秒就变成了 Object。那么上一次引擎所做的优化，就失去了作用，此时又要再一次进行优化。这就是 js 作为动态类型语言所带来的弊端。

3.2 asm.js

后来就出现了一门技术 —— asm.js，可以说是wasm的前身。简单介绍一下：asm.js 是一个 js 的严格子集，合理合法的 asm.js 代码一定是合理合法的 js 代码，但是反之就不成立。同 wasm 一样，asm.js 也是一个编译目标，asm.js 的语法利用了一些标注让 js 的变量成为强类型的，所以它的出现就解决了上述 js 原来动态变量带来的问题。

asm.js 通常不直接编写，而是作为一种通过编译器生成的中间语言，该编译器获取 C++ 或其他语言的源代码，然后输出 asm.js。

例如下边的 C 语言代码。

int f(int i) {
  return i + 1;
}
复制代码

经过编译器编译会生成下边的 js 代码。

function f(i) {
  i = i|0;
  return (i + 1)|0;
}
复制代码

所以在编译后它本身也是 js 代码，这就导致，在编译运行过程中它和 js 一样，需要经过 Parser，要经过 ByteCode Compiler，而这两步是 js 代码在引擎执行过程当中消耗时间最多的两步。

3.3 wasm

而wasm解决了这个问题，目前 v8 引擎内置了 wasm 运行时，wasm就可以直接跳过复杂漫长的 Parse 以及 ByteCode Compiler 两步，直接可以运行，并且也解决了 js 动态变量的问题。

3.4 demo样例

该小节主要用 C 实现一个基本 demo，然后编译成 wasm，并通过 node.js(node 内置 v8)，以及 web 方式运行，给大家一个直观的体验。

3.4.1 首先安装编译 wasm 的工具 —— Emscripten

mac 上安装：

$ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk
$ ./emsdk install latest
$ ./emsdk activate latest
$ #设置环境变量
$ source ./emsdk_env.sh --build=Release
复制代码

3.4.2.用 C 语言实现 hello-world

3.4.2.1 创建 hello.c 文件，并实现逻辑

cat << EOF > hello.c
> #include <stdio.h>
> int main(int argc, char ** argv) {
>   printf("Hello, world!\n");
> }
> EOF
复制代码

3.4.2.2 编译

emcc hello.c -o hello.html
复制代码

编译结果：

可以发现，工具已经帮我生成了 html、js 和 wasm 文件。

3.4.2.3 通过node环境运行

3.4.2.4 通过web展示

 #这里是起了一个emsdk提供的服务，方便测试
 emrun --no_browser --port 8080 .
复制代码

结果展示，我们可以发现在页面上输出了文本：

应用场景

通过上述的例子，我们不难猜出 wasm 的用途，当一些功能只能通过后端服务实现，将处理结果传回前端进行展示时，我们不妨可以将后端服务代码编译成 wasm 运行在浏览器中，就可以一定程度的提高前端性能，降低了后端服务的压力。

目前市场长已有众多 wasm 的应用场景。就比如: AutoCAD：

这是一个用于画图的软件，在很长的一段时间是没有 Web 的版本的，原因有两个，其一，是 Web 的性能的确不能满足他们的需求。其二，在 WebAssembly 没有面世之前，AutoCAD 是用 C++ 实现的，要将其搬到 Web 上，就意味着要重写他们所有的代码，这代价十分的巨大。而在 WebAssembly 面世之后，AutoCAD 得以利用编译器，将其沉淀了 30 多年的代码直接编译成 WebAssembly，同时性能基于之前的普通 Web 应用得到了很大的提升。正是这些原因，得以让 AutoCAD 将其应用从 Desktop 搬到 Web 中。

扩展——始于 Web，不止在 Web

刚才讲到，浏览器之所以能运行 wasm，是因为它的引擎中内嵌了 wasm 的 runtime，也就是说当我们把这个 runtime 拿出来放在任何一个平台上时，那就可以编译运行我们的 wasm 模块，也就是我们在概念中提到的标准。

例如: Envoy，Envoy 是面向服务架构设计的L7代理和通信总线，核心是一个 L3/L4 网络代理。可插入 filter 链机制允许开发人员编写 filter 来执行不同的 TCP 代理任务并将其插入到主体服务中。Envoy 还支持额外的 HTTP L7 filter 层。可以将 HTTP filter 插入执行不同任务的 HTTP 连接管理子系统。如下图所示：

目前 Envoy 提供了三种扩展 Envoy 功能的方式：

1.编写 C++ 扩展

这种方式直接在 Envoy 基础上编写 C++ 代码进行功能增强，相当于修改源码，实现自定义的 filter 之后，重新编译 Envoy 源码成新的二进制可执行文件，完成现有业务的升级替换。这样就会导致每次扩展功能都要重新编译并重启 Envoy，不利于功能的开发与迭代。

2.编写 lua 脚本

目前 Envoy 支持用 lua 脚本动态扩展其功能，这样就解决了方式1中的问题，但目前官方文档中描述：lua 脚本是实验性的，在生产环境中使用要自担风险，不建议使用。

3.通过 wasm 扩展

Envoy 内嵌了基于 LLVM 的 WAVM 与 V8 两个 C/C++ Wasm 运行时，这就说明 Envoy 内可以支持编译运行 wasm，我们可以通过其他语言编写对应扩展代码，编译成 wasm 后动态插入到 Envoy 的 Filter Chain 中实现动态功能扩展。

通过 wasm 做功能扩展的不止 Envoy，还有 Dapr、SOFAMson 等等，围绕 wasm 本身也随之出现了若干产品：WebAssembly Hub，可以让 wasm 部署像 Dokcer 部署一样。目前情况来看，wasm 的应用场景很多，发展前景较好，社区也很活跃，大家感兴趣的话可以多多了解。

参考链接：

www.infoq.cn/article/lwl…

www.wasm.com.cn

キャリア

Zhengcaiyun 技術チーム (Zero) は、情熱、創造性、実行力に満ちたチームで、ベースは絵のように美しい杭州にあります。チームには現在、アリババ、ファーウェイ、網易の「ベテラン」兵士のほか、浙江大学、中国科学技術大学、航店大学などの学校からの新参者を含む、500 人を超える研究開発パートナーがいます。日々のビジネス開発に加えて、チームはクラウドネイティブ、ブロックチェーン、人工知能、ローコードプラットフォーム、ミドルウェア、ビッグデータ、マテリアルシステム、エンジニアリングプラットフォーム、パフォーマンスエクスペリエンス、ビジュアライゼーションなどの分野で技術的な調査と実践も行っています。そして一連の社内技術製品を上陸させ、技術の新しい境界を探求し続けました。さらに、チームはコミュニティの構築にも力を注いでおり、現在、Google Flutter、scikit-learn、Apache Dubbo、Apache Rocketmq、Apache Pulsar、CNCF Dapr、Apache DolphinScheduler、alibaba Seata など、多くの優れたオープンソースコミュニティに貢献しています。など変わりたいなら、これまでいろいろと翻弄されてきたし、これからも投げ始めたいと思うなら、もっとアイデアが必要だと言われてきましたが、ゲームを壊すことはできません。あなたはその結果を達成する能力を持っていますが、あなたはあなたを必要としません;もしあなたが達成したいことを変えたいなら、それをサポートするチームが必要ですが、あなたが人々を導く場所がありません; 変更したい場合は、十分な理解がありますが、その窓紙の層には常にぼやけがあります... 信念の力を信じるなら、普通の人は並外れたことを成し遂げることができると私は信じています.より良い自分に出会えますように。ビジネスが軌道に乗るプロセスに参加し、ビジネスを深く理解し、健全な技術システム、価値を生み出す技術、波及効果を備えた技術チームの成長を個人的に促進したいのであれば、私たちはそうすべきだと思います。話。いつでも、何か書くのを待って、 [email protected]に送ってください。

WeChat パブリックアカウント

記事は同時にリリースされます。 Zhengcaiyun の技術チームの公開アカウントです。注目してください。

政采云技术团队.png