Python 可以通过 WebAssembly (Wasm) 在网页中运行

专注VB编程开发20年

已于 2025-05-13 10:07:48 修改

阅读量647

点赞数 10

文章标签： python WebAssembly

于 2025-05-13 10:07:26 首次发布

本文链接：https://blog.csdn.net/xiaoyao961/article/details/147917145

版权

想问下PY能运行到网页吗？WebAssembly 的方式

是的，Python 可以通过 WebAssembly (Wasm) 在网页中运行！这种方式允许你在浏览器中直接执行 Python 代码，无需服务器支持。以下是几种主流方案及其特点：

1. Pyodide（最流行的方案）

Pyodide 是 Mozilla 开发的项目，将 CPython 编译到 WebAssembly 中，可在浏览器中运行完整的 Python 环境。

特点：

支持 NumPy、Pandas、Matplotlib 等科学计算库
通过 Emscripten 编译 Python 标准库
提供 JavaScript/Python 互操作性
无需服务器，完全在浏览器中运行

示例代码：

<!-- 在HTML中嵌入Pyodide -->
<script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>

<script>
  async function main() {
    let pyodide = await loadPyodide();
    
    // 运行Python代码
    pyodide.runPython(`
      import numpy as np
      x = np.array([1, 2, 3])
      print("Sum:", x.sum())
    `);
    
    // Python与JavaScript互操作
    const result = pyodide.runPython(`
      "Hello from Python!"
    `);
    console.log(result); // 输出到JavaScript控制台
  }
  main();
</script>

应用场景：

在线 Python 编辑器（如 JupyterLite）
数据可视化（Matplotlib → Canvas/SVG）
科学计算 Web 应用

2. Brython

Brython 是纯 Python 实现的 Python-to-JavaScript 编译器，无需 WebAssembly。

特点：

轻量级，无需下载大型 WASM 文件
直接将 Python 代码编译为 JavaScript
支持部分 Python 标准库

示例代码：html

<!-- 在HTML中嵌入Brython -->
<script src="https://cdn.jsdelivr.net/npm/brython@3.12.0/brython.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/brython@3.12.0/brython_stdlib.js"></script>

<body onload="brython()">
  <script type="text/python">
    from browser import document, window
    
    def square(x):
        return x ** 2
    
    # 与DOM交互
    document["button"].bind("click", lambda e: 
        document["result"].text = square(5)
    )
  </script>
  
  <button id="button">计算5的平方</button>
  <div id="result"></div>
</body>

应用场景：

简单 Python 脚本在网页中的执行
教育场景（在线 Python 学习）

3. Transcrypt

将 Python 代码静态编译为高效的 JavaScript，不依赖 WebAssembly。

特点：

生成优化后的 JavaScript 代码
支持大多数 Python 语言特性
与现有 JavaScript 库集成良好

示例代码：python

# main.py
def add(a, b):
    return a + b

# 导出为JavaScript可用的模块
__pragma__('js', 'export default add')

编译后使用：javascript

// 在JavaScript中导入
import add from './main.js';
console.log(add(3, 4)); // 输出7

应用场景：

将 Python 库转换为前端可用的 JS 模块
混合 Python/JavaScript 项目

4. WASM + Python（自定义编译）

使用 Emscripten 或 Wasmtime 手动将 Python 编译为 WebAssembly。

步骤：

获取 Python 源码
使用 Emscripten 编译为 WASM
创建 JavaScript 包装器
在浏览器中加载并运行

优点：

完全自定义 Python 环境
可选择性编译需要的库

缺点：

编译过程复杂
需要了解底层工具链

性能与限制

性能：WebAssembly 通常比纯 JavaScript 快，但仍低于原生 Python
限制：
- 文件系统访问受限（虚拟文件系统）
- 网络请求需遵循浏览器 CORS 策略
- 不支持依赖底层操作系统的 Python 库

应用场景

在线代码编辑器：如 Repl.it、Google Colab 的 Web 版
数据可视化工具：直接在浏览器中运行 Pandas/Matplotlib
Python 库 Web 演示：将 NumPy、SciPy 功能嵌入网页
教育平台：交互式 Python 学习环境
混合应用：Python 后端逻辑 + WebAssembly 前端展示

总结

方案	技术路线	适合场景	学习曲线
Pyodide	CPython → WebAssembly	科学计算、完整 Python	中高
Brython	Python → JavaScript	轻量级脚本、教育	低
Transcrypt	Python → 优化 JavaScript	与 JS 深度集成	中
自定义编译	手动编译到 WASM	高级定制需求	极高