JavaScript内核与高级编程之：`JavaScript`的`WebAssembly`：如何将`C++`代码编译成`Wasm`。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位好，欢迎来到今天的“JavaScript内核与高级编程”讲座。今天我们要聊的是一个挺酷炫的话题：WebAssembly，简称Wasm。别被它看起来高大上的名字吓到，其实它就像一个翻译官，能把其他语言（比如C++）写好的代码，翻译成浏览器能高效执行的“机器码”。

咱们的目标是：了解WebAssembly，并学会如何把C++代码编译成Wasm，让它在浏览器里飞起来！

一、WebAssembly：浏览器里的超级英雄

想象一下，如果你只会说中文，而你的朋友只会说英语，你们怎么交流？是不是需要一个翻译？WebAssembly就扮演着这个翻译的角色。

为什么需要WebAssembly？

以前，浏览器只能跑JavaScript。JavaScript很灵活，写起来也方便，但执行效率相对较低。如果要做一些计算密集型的事情，比如游戏、图像处理、科学计算，JavaScript就有点力不从心了。

WebAssembly的出现，就是为了解决这个问题。它可以让其他语言编写的代码，以接近原生代码的速度在浏览器里运行。
WebAssembly是什么？

简单来说，WebAssembly是一种新的二进制格式，它是一种低级语言，更接近机器码。浏览器可以直接执行WebAssembly代码，而不需要像JavaScript那样先解释再执行，所以速度更快。
WebAssembly的优势
- 速度快： 接近原生代码的执行速度。
- 体积小： 二进制格式，体积比JavaScript小。
- 安全： 运行在沙箱环境中，不会直接访问操作系统资源。
- 可移植性： 可以在不同的浏览器和平台上运行。

二、C++到Wasm：让代码飞起来的步骤

现在，我们来一步步看看如何把C++代码编译成WebAssembly。

1. 安装Emscripten：我们的翻译官

Emscripten是一个编译器工具链，它可以把C++代码编译成WebAssembly。

下载和安装Emscripten

这部分涉及具体的安装步骤，因为不同操作系统和版本可能会有所不同。建议大家参考Emscripten官方文档：https://emscripten.org/docs/getting_started/downloads.html

一般来说，安装过程包括：
- 下载Emscripten SDK。
- 设置环境变量。
- 激活Emscripten环境。
验证安装

安装完成后，打开终端，输入emcc -v，如果能看到Emscripten的版本信息，就说明安装成功了。

2. 编写C++代码：我们的表演素材

我们先来写一个简单的C++程序，计算两个数的和。

// 文件名：add.cpp
#include <iostream>

extern "C" {
  int add(int a, int b) {
    return a + b;
  }

  int factorial(int n) {
        if (n <= 1)
            return 1;
        else
            return n * factorial(n - 1);
    }

  const char* greet() {
    return "Hello from C++!";
  }
}

int main() {
  std::cout << "Hello from C++ World!" << std::endl;
  return 0;
}

extern "C"：这个关键字告诉编译器，按照C语言的规则来编译这个函数。因为WebAssembly和JavaScript之间交互的时候，需要使用C语言的调用约定。
add(int a, int b)：这个函数接受两个整数作为参数，返回它们的和。
factorial(int n)：一个计算阶乘的递归函数。
greet()：一个返回字符串的函数。
main(): 主函数，用于在C++环境下测试，编译为Wasm时不会被执行。

3. 编译C++代码：把C++翻译成Wasm

现在，我们要使用Emscripten把add.cpp编译成WebAssembly。

打开终端，进入add.cpp所在的目录，执行以下命令：

emcc add.cpp -o add.js -s EXPORTED_FUNCTIONS="['_add','_factorial','_greet']" -s MODULARIZE=1 -s 'EXPORT_NAME="AddModule"' -s ENVIRONMENT='web'

这条命令有点长，我们来解释一下：

emcc：Emscripten的编译器。
add.cpp：要编译的C++文件。
-o add.js：指定输出文件名为add.js。Emscripten会生成两个文件：add.js和add.wasm。add.js是一个JavaScript胶水代码，用于加载和运行add.wasm。
-s EXPORTED_FUNCTIONS="['_add','_factorial','_greet']"：指定要导出的C++函数。注意，函数名前面要加下划线_。
-s MODULARIZE=1：将导出的内容包装成一个JavaScript模块。
-s 'EXPORT_NAME="AddModule"'：指定模块的名称。
-s ENVIRONMENT='web'：指定运行环境为Web浏览器。

执行完这条命令后，你会看到生成了add.js和add.wasm两个文件。

4. 在HTML中使用WebAssembly：让翻译官工作

现在，我们来创建一个HTML文件，加载add.js，并调用C++函数。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WebAssembly Example</title>
</head>
<body>
  <h1>WebAssembly Example</h1>
  <p>Result: <span id="result"></span></p>
  <p>Factorial of 5: <span id="factorialResult"></span></p>
  <p>Greeting: <span id="greeting"></span></p>

  <script src="add.js"></script>
  <script>
    AddModule().then(function(Module) {
      const result = Module.add(5, 3);
      document.getElementById('result').textContent = result;

      const factorialResult = Module.factorial(5);
      document.getElementById('factorialResult').textContent = factorialResult;

      const greeting = Module.greet();
       // Convert UTF8 array to a JavaScript string
      const greetingString = Module.UTF8ToString(greeting);
      document.getElementById('greeting').textContent = greetingString;
    });
  </script>
</body>
</html>

<script src="add.js"></script>：加载add.js文件。
AddModule().then(function(Module) { ... })：AddModule()是一个Promise，它会在WebAssembly模块加载完成后resolve。Module对象包含了导出的C++函数。
Module.add(5, 3)：调用C++的add函数，计算5+3的结果。
document.getElementById('result').textContent = result：把结果显示在页面上。
Module.factorial(5)：调用C++的factorial函数，计算5的阶乘。
Module.greet(): 调用C++的greet函数，获取字符串。
Module.UTF8ToString(greeting): Emscripten需要手动转换由 C/C++ 分配的字符串指针到 JavaScript 字符串。

把这个HTML文件保存为index.html，然后在浏览器中打开它，你就可以看到C++代码运行的结果了。

三、进阶：更复杂的C++代码

上面的例子很简单，只是计算两个数的和。实际上，WebAssembly可以处理更复杂的C++代码，比如：

使用STL： WebAssembly支持C++标准库，你可以使用vector、string等STL容器。
调用外部库： 你可以把现有的C++库编译成WebAssembly，然后在浏览器中使用它们。
OpenGL： 你可以使用Emscripten把OpenGL代码编译成WebAssembly，然后在浏览器中渲染3D图形。

四、调试WebAssembly：找出代码中的小虫子

调试WebAssembly代码可能会有点挑战，因为你不能直接在浏览器中看到C++代码。不过，Emscripten提供了一些工具来帮助你调试：

Source Maps： Emscripten可以生成Source Maps，把WebAssembly代码映射回C++代码。这样，你就可以在浏览器开发者工具中看到C++代码，并设置断点。
Emscripten Profiler： Emscripten提供了一个Profiler，可以帮助你分析WebAssembly代码的性能瓶颈。

五、WebAssembly的应用场景：无限可能

WebAssembly的应用场景非常广泛，以下是一些常见的例子：

游戏： WebAssembly可以用来开发高性能的Web游戏。
图像处理： WebAssembly可以用来进行图像处理、视频编辑等操作。
科学计算： WebAssembly可以用来进行科学计算、数据分析等操作。
音视频处理： 编解码器，音频合成器，视频特效等等。
密码学： 加密解密算法，哈希函数等等。
P2P 应用: 文件共享，实时通信等等。

六、WebAssembly的未来：充满希望

WebAssembly正在快速发展，未来会更加强大。以下是一些未来的发展方向：

更好的性能： WebAssembly的性能会进一步提升，接近原生代码的执行速度。
更多的语言支持： 更多的编程语言会支持编译成WebAssembly。
更好的工具链： Emscripten等工具链会更加完善，让开发WebAssembly应用更加容易。
WebAssembly System Interface (WASI): WASI的目标是让WebAssembly可以在浏览器之外运行，比如在服务器端、嵌入式设备上。

总结：WebAssembly，未来可期！

WebAssembly是一个非常有前景的技术，它可以让Web应用更加强大，更加高效。虽然学习WebAssembly有一定的门槛，但只要你掌握了基本的概念和工具，就可以开始探索它的无限可能。

希望今天的讲座能帮助大家入门WebAssembly。记住，实践是最好的老师，多多尝试，多多探索，你一定能掌握WebAssembly的精髓！

一些补充说明:

概念/术语	解释
WebAssembly	一种新的二进制指令格式，为基于堆栈的虚拟机设计，可以在现代网络浏览器中运行。
Emscripten	一个完整的工具链，可以将 C 和 C++ 代码编译成 WebAssembly。
Binaryen	WebAssembly 的编译器基础设施库。Emscripten 使用 Binaryen 来优化生成的 WebAssembly 代码。
Glue Code	Emscripten 生成的 JavaScript 代码，用于加载和运行 WebAssembly 模块，并提供 JavaScript 和 WebAssembly 之间的接口。
Source Maps	一种将编译后的代码映射回原始源代码的技术，用于调试。Emscripten 可以生成 Source Maps，方便调试 WebAssembly 代码。
WASI	WebAssembly 系统接口，旨在提供一个标准化的接口，使 WebAssembly 模块可以在浏览器之外的各种环境中运行，例如服务器端和嵌入式设备。
SIMD	单指令多数据流 (Single Instruction, Multiple Data)，一种并行计算技术，可以同时对多个数据执行相同的操作。WebAssembly 支持 SIMD 指令，可以提高性能。
Threads	WebAssembly 支持多线程，可以利用多核 CPU 的优势，提高计算密集型任务的性能。

祝大家学习愉快！如果有任何问题，欢迎随时提问。

发表回复 取消回复

发表回复取消回复