pyscript 中的 python 代码默认运行在浏览器主线程，同步执行会冻结页面动画与交互；通过异步协程（`async`/`await`）分片执行任务可有效缓解阻塞，未来 web worker 支持将进一步解耦计算与 ui。
在使用 PyScript 进行图像处理（如汉明码、里德-所罗门码编解码）时，若 Python 逻辑耗时较长（例如批量像素运算、矩阵变换或迭代解码），页面常出现“假死”：CSS 加载动画暂停、按钮点击无响应、滚动卡顿——这并非性能瓶颈，而是浏览器单线程模型下的必然现象：PyScript 的 Python 运行时完全托管于 JavaScript 主线程，任何同步阻塞操作都会抢占事件循环，导致 UI 更新被挂起。
✅ 正确解法：用 async/await 主动让出控制权
PyScript 基于 Pyodide，完整支持 Python 的 asyncio。关键不在于“多线程”，而在于将长任务拆分为多个微小异步步骤，并在每步之间显式 await asyncio.sleep(0)。该调用不引入真实延迟，但会将控制权交还给浏览器事件循环，允许 CSS 动画渲染、用户交互响应、定时器触发等继续执行。
以下是一个图像预处理任务的重构示例：
import asyncio
import numpy as np
from pyscript import display
async def process_image_chunks(image_data, chunk_size=100):
height, width = image_data.shape[:2]
result = np.zeros_like(image_data)
# 分块处理，每处理一行（或一块）后让出控制权
for y in range(0, height, chunk_size):
end_y = min(y + chunk_size, height)
# 模拟耗时图像处理（如卷积、纠错解码）
result[y:end_y] = apply_hamming_correction(image_data[y:end_y])
# ✅ 关键：主动让出主线程，保持 UI 响应
await asyncio.sleep(0)
return result
def apply_hamming_correction(chunk):
# 此处放置你的实际汉明码校验/纠错逻辑
# 注意：所有计算必须是纯 Python / NumPy（Pyodide 兼容）
return chunk # 占位返回
# 启动异步任务（不阻塞页面）
async def run_processing():
display("⏳ 开始处理...", append=False)
img = load_sample_image() # 你的图像加载逻辑
processed = await process_image_chunks(img)
display("✅ 处理完成！", append=True)
show_result(processed)
# 页面加载后立即启动（非阻塞）
asyncio.create_task(run_processing())⚠️ 重要注意事项：asyncio.sleep(0) 是当前最轻量、最可靠的让权方式；await asyncio.sleep(0.001) 等非零值亦可，但 0 已足够。所有被 await 调用的函数（如 apply_hamming_correction）本身必须是同步函数；异步 I/O（如 fetch）需用 pyodide.http.pyfetch 替代原生 requests。避免在 async 函数中调用未适配的阻塞库（如 time.sleep()、input()、部分 OpenCV 操作）；优先选用 NumPy 向量化运算替代 Python 循环。不要使用 asyncio.run() —— 它会阻塞主线程；始终用 asyncio.create_task() 或 asyncio.ensure_future() 在后台调度。
? 未来更优方案：Web Worker 支持（进行中）
PyScript 团队正积极开发 Web Worker 集成，届时可将整个 Python 计算逻辑移至独立线程，彻底隔离 UI 线程。虽然目前需手动传递数据（通过 postMessage 序列化），但已能实现真正的并行——关注 PyScript v2024+ 版本更新。
立即学习“Python免费学习笔记（深入）”；
✅ 总结
| 方案 | 是否可用 | 是否阻塞 UI | 推荐场景 |
|---|---|---|---|
| 同步函数（默认） | ✅ | ❌（严重） | 快速脚本、调试 |
| async + await asyncio.sleep(0) | ✅（推荐） | ✅（几乎无感） | 当前所有耗时计算 |
| Web Worker（PyScript 实验性） | ⚠️ Beta | ✅（零阻塞） | 大型图像/视频处理（等待稳定版） |
立即采用异步分片策略，你就能在保持流畅 CSS 动画与完整交互的同时，安全运行复杂的纠错码图像处理逻辑。
