PyScript中DOM操作需待代码全执行才生效，如何实现即时更新？

问题的核心原因是：PyScript默认在浏览器主线程同步执行代码，而浏览器的UI渲染也依赖主线程。当你的PyScript代码长时间运行时，会阻塞主线程，导致DOM更新要等整个脚本执行完毕后才会被浏览器渲染出来。

下面是两种实用的解决办法：

方法一：使用异步函数配合asyncio.sleep(0)让出主线程 #

把你的耗时代码放到异步函数中，每次更新DOM后，通过await asyncio.sleep(0)让主线程暂时切换到UI渲染任务，完成后再继续执行Python代码。

示例代码：

<div id="progress"></div>

<py-script>
import asyncio

async def run_long_task():
    progress_el = js.document.getElementById("progress")
    
    # 第一次更新进度
    progress_el.textContent = "启动计算，正在处理第一步..."
    await asyncio.sleep(0)  # 让出主线程，让浏览器渲染更新
    
    # 模拟耗时计算
    for _ in range(150000000):
        pass
    
    # 第二次更新进度
    progress_el.textContent = "第一步完成，正在处理第二步..."
    await asyncio.sleep(0)
    
    # 再模拟耗时操作
    for _ in range(150000000):
        pass
    
    progress_el.textContent = "所有计算已完成！"

# 启动异步任务
asyncio.ensure_future(run_long_task())
</py-script>

方法二：使用后台线程+代理回调 #

把耗时计算放到后台线程中执行，通过create_proxy创建主线程的回调函数来更新DOM——因为后台线程不能直接访问浏览器的DOM API，必须通过代理回调在主线程中操作DOM。

示例代码：

<div id="progress"></div>

<py-script>
import threading
import time
from pyodide.ffi import create_proxy

def update_progress(msg):
    # 此函数在主线程执行，可安全操作DOM
    js.document.getElementById("progress").textContent = msg

def long_task():
    # 创建代理回调，用于从后台线程触发主线程的DOM更新
    progress_proxy = create_proxy(update_progress)
    
    progress_proxy("开始计算，预计需要几分钟...")
    time.sleep(3)  # 模拟耗时操作
    
    progress_proxy("已完成40%，继续处理中...")
    time.sleep(3)
    
    progress_proxy("已完成80%，即将结束...")
    time.sleep(2)
    
    progress_proxy("计算全部完成！")
    progress_proxy.destroy()  # 清理代理，避免内存泄漏

# 启动后台线程
threading.Thread(target=long_task).start()
</py-script>

注意事项 #

• 使用后台线程时，必须通过create_proxy创建的回调来更新DOM，不能在后台线程直接调用js.document相关方法，否则会报错。
• 代理对象使用完毕后记得调用destroy()方法，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Value_Investor