Golang中Chrome在Windows上刷新4次后无法加载wasm代码的问题

没有人遇到过这种情况吗？

我重新制作了视频。

尝试来自 golang wiki 的示例 - https://github.com/golang/go/wiki/WebAssembly

尝试计算器示例 - https://github.com/Piszmog/go-wasm-example

从这两个视频中，你可以看到在 Chrome 中点击按钮或刷新时出现的崩溃画面。

这是一个已知的 Chrome 浏览器在 Windows 平台上运行 WebAssembly 时的内存管理问题。当页面刷新多次后，Chrome 未能正确释放之前加载的 wasm 模块内存，导致后续加载失败。

问题核心在于 Chrome 的垃圾回收机制与 wasm 实例生命周期管理存在冲突。每次刷新页面时，之前的 wasm 实例没有被完全清理，积累到一定次数后就会触发内存限制或资源耗尽。

以下是几种可行的解决方案：

方案1：手动清理 wasm 实例 在页面卸载前主动清理 wasm 相关资源：

// 在Go代码中添加清理逻辑
func main() {
    // 你的wasm应用逻辑
    println("WASM应用启动")
    
    // 注册清理函数
    js.Global().Set("cleanupWasm", js.FuncOf(cleanup))
}

func cleanup(this js.Value, args []js.Value) interface{} {
    // 清理wasm相关资源
    // 例如关闭连接、释放内存等
    return nil
}

在HTML中添加页面卸载监听：

window.addEventListener('beforeunload', function() {
    if (typeof cleanupWasm === 'function') {
        cleanupWasm();
    }
});

方案2：使用 Service Worker 缓存控制 通过Service Worker控制wasm资源的缓存策略：

// sw.js
self.addEventListener('fetch', (event) => {
    if (event.request.url.includes('.wasm')) {
        event.respondWith(
            caches.open('wasm-cache').then((cache) => {
                return fetch(event.request).then((response) => {
                    cache.put(event.request, response.clone());
                    return response;
                }).catch(() => cache.match(event.request));
            })
        );
    }
});

方案3：强制刷新缓存 在开发阶段，可以通过禁用缓存或添加版本号来避免问题：

<script>
    // 添加时间戳强制刷新
    fetch('main.wasm?v=' + Date.now())
        .then(response => response.arrayBuffer())
        .then(bytes => WebAssembly.instantiate(bytes, go.importObject))
        .then(result => {
            go.run(result.instance);
        });
</script>

方案4：使用最新的Chrome版本 这个问题在较新的Chrome版本中有所改善，确保使用Chrome 89或更高版本。

目前最稳定的解决方案是方案1，通过主动管理wasm实例的生命周期来避免内存泄漏。如果问题持续存在，建议在Chrome的issue跟踪器中报告具体的内存使用情况。