Python WebAssembly + Pyodide 的浏览器端 Python

pyodide 不能直接运行本地 python 项目，因其无系统级 i/o 能力、sys.path 为空、磁盘操作被重定向至内存文件系统，仅适用于纯计算、数据处理及教学演示等场景。

Pyodide 能不能直接跑你本地的 Python 项目

不能，至少不能原样跑。Pyodide 不是 Python 解释器的浏览器移植版，而是把 CPython 编译成 WebAssembly 后、再加一层 js 绑定的产物——它没有 import os 那种系统级能力，sys.path 是空的，__file__ 大概率是 None，所有磁盘 I/O 都被重定向到内存文件系统。

常见错误现象：ModuleNotFoundError: No module named 'requests'（即使你写了 pyodide.loadPackage('requests')，也得等加载完再 import）；或 OSError: [errno 1] Operation not permitted（比如调 subprocess.run 或尝试读取 /etc/hosts）。

• 使用场景：适合纯计算、数据处理、小型库调用（如 numpy、pandas、matplotlib 渲染图表）、教学演示
• 不适用场景：依赖 C 扩展但未被 Pyodide 官方打包的包（比如 psycopg2、lxml）、需要访问本地文件系统或网络服务的后端逻辑、长时间阻塞主线程的循环
• 实操建议：用 pyodide.loadPackage() 显式声明依赖，别指望 pip install；加载完成前不要执行相关 import；用 pyodide.to_js() 和 pyodide.from_js() 在 JS/Python 间传数据，别直接传 dom 元素或 promise

怎么在页面里安全地执行用户写的 Python 代码

别用 eval() 或 exec() 直接跑字符串——Pyodide 的 Python 运行时和页面共享同一个 JS 事件循环，恶意代码能调 document.cookie（通过 js.document），也能无限递归卡死标签页。

实操建议：

立即学习“Python免费学习笔记（深入）”；

• 用 pyodide.runPythonAsync() 替代 exec()，它返回 Promise，可设 timeout 控制执行时长
• 提前限制可用模块：通过 pyodide.registerJsModule() 注入一个精简的 JS 对象，再在 Python 里 import 它，而不是开放全部 js 模块
• 禁用危险内置：启动 Pyodide 前重写 __builtins__，删掉 open、exec、compile 等（注意：Pyodide 本身会 patch 一部分，但不彻底）
• 示例：运行一段带超时的代码 ——

  const result = await pyodide.runPythonAsync(`nimport timenfor i in range(100):n    time.sleep(0.01)n"done"n`, { timeout: 1000 });

Pyodide 加载慢、首屏白屏久怎么办

Pyodide 默认要下载 ~10MB 的 pyodide.asm.js + pyodide.asm.wasm，首次加载卡顿明显，且无法用 Service Worker 缓存 wasm（MIME 类型限制）。

性能影响点：

• WASM 文件没压缩：nginx/apache 必须配 gzip on 和 gzip_types application/wasm，否则传输体积翻倍
• 没预加载关键资源：在 里加 <link rel="preload" href="pyodide.asm.wasm" as="fetch" type="application/wasm">
• 没分包：把大计算逻辑抽成独立 .py 文件，用 pyodide.loadPackage() 按需加载，别全塞进主 bundle
• 兼容性注意：safari 对 wasm streaming compilation 支持滞后，pyodide.loadPyodide() 在 ios 16.4+ 才稳定，老版本建议 fallback 到纯 JS 实现

为什么 matplotlib 图表不显示，或者报 FigurecanvasAgg is not available

因为 Pyodide 默认没启用 GUI 后端，matplotlib 的 Agg 后端虽可用，但输出的是内存里的 PNG 字节流，不是自动渲染到 canvas 上。

正确做法是手动触发渲染并转成 base64：

• 确保已加载 matplotlib 和 numpy：await pyodide.loadPackage(['matplotlib', 'numpy'])
• 用 plt.switch_backend('agg') 显式切换，避免找默认后端失败
• 绘图后调 plt.savefig() 到 io.BytesIO，再用 base64.b64encode() 编码，最后用 JS 插入 <img src="data:image/png;base64,..." alt="Python WebAssembly + Pyodide 的浏览器端 Python" >
• 容易踩的坑：忘了 plt.close()，导致内存泄漏；用了 plt.show()（它啥也不干，还可能报错）；没设置 plt.rcParams['backend'] = 'agg' 就 import matplotlib

复杂点在于：每次绘图都得走一遍 save → encode → JS 插入，没法像 jupyter 那样自动 inline。想交互？得自己用 canvas.getContext('2d') 解析 PNG 数据，或者换 plotly + plotly.graph_objects，它对 Pyodide 友好得多。