Talking about WebAssembly

Zhengcaiyun technical team.png

1 Introduction

I believe that everyone has been troubled by the problem of "how to memorize English words efficiently". Every time you make up your mind, you must insist on memorizing words this time. You must pass the test of CET 4 and 6, then pick up the vocabulary book and start: "abandon , abandon, give up, give up...". Sure enough, some things are over before they even begin.

Later, some people found that English words have their own rules. Many complex words are composed of several words, and the meaning of words is also reflected by the roots of the words. Discovering this rule will make memorizing words much easier. Of course, the most important thing is to persevere.

After reading the above two paragraphs, you may be curious, is this related to the technology shared today? The result was clear: of course not, but it was the beginning of our understanding of the technology.

WebAssembly, we can split it into two parts: Web - front-end browser, Assembly - assembly. We can take a bold guess: this is an assembly technology applied to front-end browsers. Is that really the case, and how it does it and what it does, we go down with questions.

2. Concept

First, the official document, a little more professional.

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.
复制代码

A simple translation is:

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

In a nutshell, it is a technology that converts code written in a programming language into machine code that browsers understand, allowing programs to run in web browsers with near-native efficiency. It has the following characteristics:

efficient

WebAssembly has a complete set of semantics . In fact, wasm is a small and fast-loading binary format . Its goal is to fully utilize the hardware capabilities to achieve native execution efficiency.
Safety

WebAssembly runs in a sandboxed execution environment and can even be implemented in existing JavaScript virtual machines. In the web environment , WebAssembly will strictly abide by the same-origin policy and browser security policy.
open

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

Careers

Zhengcaiyun technical team (Zero), a team full of passion, creativity and execution, Base is located in the picturesque Hangzhou. The team currently has more than 500 R&D partners, including "veteran" soldiers from Ali, Huawei, and NetEase, as well as newcomers from Zhejiang University, University of Science and Technology of China, Hangdian University and other schools. In addition to daily business development, the team also conducts technical exploration and practice in the fields of cloud native, blockchain, artificial intelligence, low-code platform, middleware, big data, material system, engineering platform, performance experience, visualization, etc. And landed a series of internal technology products, and continued to explore new boundaries of technology. In addition, the team has also devoted themselves to community building. Currently, they are contributors to many excellent open source communities such as google flutter, scikit-learn, Apache Dubbo, Apache Rocketmq, Apache Pulsar, CNCF Dapr, Apache DolphinScheduler, alibaba Seata, etc. If you want to change, you have been tossed with things, and you want to start tossing things; if you want to change, you have been told that you need more ideas, but you can't break the game; if you want to change, you have the ability to do that, but you don't need you; if you If you want to change what you want to do, you need a team to support it, but there is no place for you to lead people; if you want to change, you have a good understanding, but there is always that layer of blurry paper... If you believe in the power of belief, I believe that ordinary people can achieve extraordinary things, and I believe that they can meet a better self. If you want to participate in the process of taking off with the business, and personally promote the growth of a technical team with in-depth business understanding, a sound technical system, technology creating value, and spillover influence, I think we should talk. Anytime, waiting for you to write something, send it to [email protected]

WeChat public account

The article is released simultaneously, the public account of the technical team of Zhengcaiyun, welcome to pay attention

政采云技术团队.png