Hablando de WebAssembly

1. Introducción

Creo que todo el mundo se ha preocupado por la cuestión de "cómo memorizar palabras en inglés de manera eficiente". Cada vez que te decidas, debes insistir en memorizar palabras esta vez, y debes pasar CET 4 o 6, luego retomar la palabra libro y empieza: "abandonar, abandonar, rendirse, rendirse...". Efectivamente, algunas cosas terminan antes de que comiencen.

Más tarde, algunas personas descubrieron que las palabras en inglés tienen sus propias reglas. Muchas palabras complejas se componen de varias palabras, y el significado de las palabras también se refleja en las raíces de las palabras. Descubrir esta regla te facilitará mucho la memorización de palabras, por supuesto, lo más importante es perseverar.

Después de leer los dos párrafos anteriores, puede que tenga curiosidad, ¿está esto relacionado con la tecnología que se comparte hoy? El resultado fue claro: por supuesto que no, pero fue el comienzo de nuestra comprensión de la tecnología.

​WebAssembly, podemos dividirlo en dos partes: Web - navegador front-end, Assembly - ensamblaje. Podemos hacer una suposición audaz: esta es una tecnología de ensamblaje aplicada a los navegadores frontales. ¿Es ese realmente el caso, y cómo lo hace y qué hace? Bajamos con preguntas.

2. Concepto

Primero, el documento oficial, un poco más profesional.

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

Una traducción simple es:

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

En pocas palabras, es una tecnología que convierte el código escrito en un lenguaje de programación en un código de máquina que los navegadores entienden, lo que permite que los programas se ejecuten en los navegadores web con una eficiencia casi nativa. Tiene las siguientes características:

• eficiente

  WebAssembly tiene un conjunto completo de semánticas . De hecho, wasm es un formato binario pequeño y de carga rápida . Su objetivo es aprovechar al máximo las capacidades del hardware para lograr la eficiencia de ejecución nativa.

• La seguridad

  WebAssembly se ejecuta en un entorno de ejecución de espacio aislado e incluso se puede implementar en máquinas virtuales de JavaScript existentes. En el entorno web , WebAssembly cumplirá estrictamente con la política del mismo origen y la política de seguridad del navegador.

• abierto

  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

推荐阅读

基于APT（注解处理器）实现 Lombok 的常用注解功能

Hablando sobre el mecanismo de mantenimiento de vida de tcp

Actualización CDH6.3.2 versión Spark3.3.0

Mirando el proceso de escritura de documentos de Lucene desde el código fuente

Cálculo de puntuación de documentos de ElasticSearch y análisis de casos de búsqueda de agregación

Carreras

El equipo técnico de Zhengcaiyun (Zero), un equipo lleno de pasión, creatividad y ejecución, la Base se encuentra en la pintoresca Hangzhou. El equipo cuenta actualmente con más de 500 socios de I+D, incluidos soldados "veteranos" de Alibaba, Huawei y NetEase, así como recién llegados de la Universidad de Zhejiang, la Universidad de Ciencia y Tecnología de China, la Universidad de Hangdian y otras escuelas. Además del desarrollo comercial diario, el equipo también lleva a cabo exploración técnica y práctica en los campos de la nube nativa, blockchain, inteligencia artificial, plataforma de código bajo, middleware, big data, sistema de materiales, plataforma de ingeniería, experiencia de rendimiento, visualización, etc. Y aterrizó una serie de productos de tecnología interna y continuó explorando nuevos límites de tecnología. Además, el equipo también se ha dedicado a la creación de comunidades. Actualmente, son colaboradores de muchas comunidades excelentes de código abierto, como google flutter, scikit-learn, Apache Dubbo, Apache Rocketmq, Apache Pulsar, CNCF Dapr, Apache DolphinScheduler, alibaba Seata , etc. Si quieres cambiar, te han tirado con cosas y quieres empezar a tirar cosas; si quieres cambiar, te han dicho que necesitas más ideas, pero no puedes romper el juego; si quieres cambio, tienes la capacidad de lograr ese resultado, pero no te necesitas; si quieres cambiar lo que quieres lograr, necesitas un equipo que lo apoye, pero no hay lugar para que lideres personas ; si quieres cambiar, tienes un buen entendimiento, pero siempre hay un desenfoque de esa capa de papel de la ventana... Si crees en el poder de la creencia, creo que la gente común puede lograr cosas extraordinarias, y creo que puedan encontrarse con un yo mejor. Si desea participar en el proceso de despegue a medida que despega el negocio y promover personalmente el crecimiento de un equipo técnico con un conocimiento profundo del negocio, un sistema técnico sólido, tecnología que crea valor e influencia indirecta, creo que deberíamos hablar. En cualquier momento, esperando que escribas algo, envíalo a  [email protected]

Cuenta pública de WeChat

El artículo se publica simultáneamente, la cuenta pública del equipo técnico de Zhengcaiyun, bienvenido a prestar atención.