C/C++与JavaScript的WebAssembly编程(一)

1. JavaScript与C/C++混合编程的技术

JavaScript与C++混合编程可以实现两种语言的优势结合，C++的程序性能很高且支持强大的系统调用能力，JavaScript则生态丰富且开发效率高。
JavaScript与C++混合编程常见的技术手段主要有以下几种：

• Node.js的C++扩展： 常用于Node.js实现的后端服务代码。在WebAssembly出现之前，Node.js的服务器代码通常以这种方式调用C/C++的模块。
  
• JsAPI和Native API： 常应用于包含WebView的客户端。将Native端的代码封装成Web接口(JsAPI)供前端调用，将Web端的代码封装成Native接口供Native调用。像Electron、CEF技术栈的客户端均采用了此种方式。
  
• WebAssembly： 主要用于浏览器上运行的前端页面，Node.js从8.0开始也支持WebAssembly，因此也可用于服务端开发。
  

本章所讲的内容是基于WebAssembly的混合编程技术。
2. 什么是WebAssembly？

WebAssembly是一种新的编码方式，是一种为web设计的高效、低级字节码格式。我们可以将C/C++、Rust等低级语言编写的代码编译成WebAssembly字节码，现代的Web浏览器可以加载WebAssembly，并与JavaScript协同运行。从而使得WebAssembly成为JavaScript与C/C++混合编程并在Web上运行的最有效机制。C/C++编译成的WebAssembly能够以接近原生语言的效率在浏览器上运行。
2.1. 支持WebAssembly的浏览器

支持WebAssembly的常用浏览器及版本：

• Chrome 57及以上版本。
  
• Firefox 52及以上版本。
  
• Edge 16（基于Chromium的版本）及以上。
  
• Safari 11及以上版本。
  
• Opera 44及以上版本。
  

参考信息： https://caniuse.com/wasm
此外，Node.js从8.0版本也开始支持WebAssembly，WebAssembly目前已经成了W3C的Web标准之一。
2.2. WebAssembly的编译器

除了C/C++外，WebAssembly还支持多种其他计算机语言编译成.wasm，常见的语言和编译器如下：

• C/C++: emscripten编译工具链可以将 C/C++ 编译成 WebAssembly。
  
• Rust: wasm-pack:工具可以将 Rust  编译成 WebAssembly。
  
• Go: Go语言的官方工具就链支持将 Go 编译成 WebAssembly。
  

3. 开发环境搭建

• emscripten官方文档： https://emscripten.org/docs/getting_started/downloads.html
  
• 依赖的环境准备
  
  
  
  • git
    
  • Python3.6或更新版本（Windows）
    
  
  
• 安装步骤
  1. # 1. 从Github上克隆emsdk仓库
  2. # emsdk即Emscripten SDK，是将C/C++编译成WebAssembly的工具
  3. git clone https://github.com/emscripten-core/emsdk.git
  5. # 2. 进入emsdk目录
  6. cd emsdk
  8. # 3. 下载和安装最新的SDK tools(包括node.js、emscripten等)
  9. # Linux/macOS:
  10. ./emsdk install latest
  11. # Windows:
  12. ./emsdk.bat install latest
  13. # (安装大概需要十几分钟的时间，可以去喝杯茶休息一下了)
  14. # 会将相关的工具安装在以下三个目录
  15. # emsdk/node
  16. # emsdk/upstream
  17. # emsdk/python (Windows才有,会安装nuget)
  19. # 4. 为当前用户设置latest版本为当前激活的工具
  20. # Linux/macOS:
  21. ./emsdk activate latest
  22. # Windows:
  23. ./emsdk.bat activate latest
  25. # 5. 为当前命令终端设置环境变量
  26. # Linux/macOS:
  27. source ./emsdk_env.sh
  28. # Windows:
  29. ./emsdk_env.bat
  31. # 6. 验证是否安装成功
  32. emcc -v
  33. # (如果有显示正常的版本信息，则说明安装成功)

  复制代码
  以上示例基于3.1.72版本的emscripten。
  

4. Hello World程序

我们从一个Hello World程序开始，了解WebAssembly程序的开发、编译、运行的大致流程。
<ol>新建一个测试目录hello_world和源码文件hello.cpp。
[code]// hello_world/hello.cpp#include int main(){    std::cout