WebAssembly (Wasm) 入门：在浏览器里运行 Python/C++ 代码，前端要变天了？-编程实验室

标签：#WebAssembly #Wasm #前端开发 #Python #C++ #性能优化

🐢 前言：JavaScript 的“速度之殇”

JavaScript 是一门伟大的语言，但它当初设计的初衷只是为了“让网页动起来”。
它是解释型语言，浏览器需要下载代码、解析（Parse）、编译（Compile）、优化（Optimize）才能执行。
当面对视频剪辑、3D 渲染、大规模计算时，JS 往往力不从心，卡顿、发热接踵而至。

这时候，WebAssembly (Wasm)像一道闪电划破夜空。

🧱 一、什么是 WebAssembly？

简单说，WebAssembly 是一种二进制指令格式。
它不是一种你需要手写的语言（虽然可以），它是一个编译目标。
你可以把 C、C++、Rust、Go 甚至 Python 代码，编译成.wasm文件，然后由浏览器直接加载运行。

为什么它快？
因为.wasm文件已经是二进制格式，浏览器跳过了繁琐的解析和优化过程，几乎可以直接翻译成机器码执行。

JS vs Wasm 执行流程对比 (Mermaid):

🐍 二、实战 1：在浏览器里跑 Python (PyScript)

以前要在网页上跑 Python，不仅要有后端服务器，还要解决前后端交互。
现在，利用 Wasm 技术（基于 Pyodide），我们可以直接在浏览器里跑 Python 解释器！

神器：PyScript

不需要任何安装，只需要在 HTML 里引入一个 JS 文件。

代码示例 (index.html):

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Python in Browser</title><linkrel="stylesheet"href="https://pyscript.net/latest/pyscript.css"/><scriptdefersrc="https://pyscript.net/latest/pyscript.js"></script></head><body><h1>Hello, WebAssembly!</h1><py-script>import random lucky_num = random.randint(1, 100) print(f"你的今日幸运数字是: {lucky_num}") # 甚至可以操作 DOM from js import document div = document.createElement('div') div.innerText = "这是 Python 创建的 DOM 元素" document.body.append(div)</py-script></body></html>

效果：打开浏览器，稍微等待加载（下载 Python Wasm 环境），你就能在控制台和页面上看到 Python 的运行结果！

⚡ 三、实战 2：在浏览器里跑 C++ (Emscripten)

这是 Wasm 最正统的用法：将高性能的 C/C++ 库移植到 Web。
比如FFmpeg(视频处理) 和OpenCV(图像识别) 都有 Wasm 版本。

我们需要工具链：Emscripten。

1. 编写 C++ 代码 (`hello.cpp`)

#include<iostream>#include<emscripten/emscripten.h>extern"C"{// EMSCRIPTEN_KEEPALIVE 防止编译器把这个函数优化掉EMSCRIPTEN_KEEPALIVEintadd(inta,intb){returna+b;}}intmain(){std::cout<<"Wasm 加载成功！C++ main 函数已执行。"<<std::endl;return0;}

2. 编译为 Wasm

# 生成 hello.js (胶水代码) 和 hello.wasmemcc hello.cpp-ohello.js-sEXPORTED_RUNTIME_METHODS='["ccall","cwrap"]'

3. 前端调用 (`index.html`)

<scriptsrc="hello.js"></script><script>Module.onRuntimeInitialized=()=>{// 调用 C++ 的 add 函数// cwrap(函数名, 返回类型, [参数类型])constadd=Module.cwrap('add','number',['number','number']);console.log("10 + 20 =",add(10,20));};</script>