使用Rust编译的WebAssembly加速Brython代码的问题解决

一、先修正现有代码的核心错误 #

你当前遇到两个关键问题：函数赋值错误、执行顺序不匹配，以下是针对性修复：

1. 修复函数赋值错误

原代码中window.wasmfunc = add_wasm()是把add_wasm()的执行结果（比如你测试的7）赋值给window.wasmfunc，而非函数本身。必须去掉括号，直接赋值函数引用：

window.wasmfunc = add_wasm; // 不要加()

2. 解决执行顺序问题

页面onload触发brython()时，Wasm的异步初始化还没完成，导致Brython代码执行时window.wasmfunc还不存在。需要把Brython的执行时机延后到Wasm初始化完成之后。

修正后的完整基础代码（挂载window方案） #

<!Doctype html> 
<html> 
<head> 
    <meta charset = "utf-8"> 
    <script type = "text/javascript"
        src = "https://cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js"> 
    </script> 
</head>
<body> 
<!-- 定义Brython函数，等待Wasm就绪后调用 -->
<script type = "text/python"> 
from browser import window

def calculate_with_wasm():
    try:
        result = window.wasmfunc(3, 5)
        print(result)
    except AttributeError:
        print("Wasm函数尚未准备完成")
</script> 

<script type="module">
    import init, {add_wasm} from './pkg/hello_wasm.js';
    // 等待Wasm初始化完成
    await init();
    console.log(add_wasm(3,4))
    // 赋值函数本身到window
    window.wasmfunc = add_wasm;
    // Wasm就绪后，调用Brython的计算函数
    window.calculate_with_wasm();
</script>
</body> 
</html>

二、更优方案：无需挂载window，直接注入Brython全局命名空间 #

Brython允许从JavaScript直接向其全局变量空间注入内容，不用绕window，更符合模块化逻辑：

<!Doctype html> 
<html> 
<head> 
    <meta charset = "utf-8"> 
    <script type = "text/javascript"
        src = "https://cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js"> 
    </script> 
</head>
<body> 
<!-- Brython代码直接使用注入的Wasm函数 -->
<script type = "text/python"> 
# 无需从window取，直接调用add_wasm
result = add_wasm(3, 5)
print(result)
</script> 

<script type="module">
    import init, {add_wasm} from './pkg/hello_wasm.js';
    await init();
    console.log(add_wasm(3,4))
    
    // 等待Brython初始化完成
    await new Promise(resolve => {
        if (typeof brython !== 'undefined' && brython.python) {
            resolve();
        } else {
            // 先初始化Brython
            brython();
            // 监听Brython就绪事件
            document.addEventListener('brython-ready', resolve);
        }
    });
    
    // 直接把Wasm函数注入Brython全局命名空间
    brython.python.globals().add_wasm = add_wasm;
    // 重新执行所有Brython脚本，确保代码能获取到新注入的函数
    brython(1);
</script>
</body> 
</html>

关键注意点 #

• 必须等待init()完成：Wasm的初始化是异步操作，await init()一定要写，否则add_wasm可能还未就绪。
• Brython就绪判断：通过brython-ready事件或直接检查brython.python是否存在，确保能安全访问其全局空间。

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