如何检查浏览器是否支持 WebAssembly？

Question

所有新的主流浏览器都支持 WebAssembly，如何检查当前访问我网站的浏览器是否支持它？

Answer 1

有几种方法可以检测 WebAssembly 的存在。基本的一个是检查WebAssembly是否在全局范围内是"object"类型，但是“全局范围”在不同的JavaScript环境（主浏览器线程，worker，node.js）中是一件棘手的事情。

这样做在技术上也不够充分，因为您可能拥有 WebAssembly 支持，但由于CSP 而无法实际编译或实例化（而 CSP 不允许的确切内容尚未标准化，工作正在进行中here）。

保守检查可能如下：

const supported = (() => {
    try {
        if (typeof WebAssembly === "object"
            && typeof WebAssembly.instantiate === "function") {
            const module = new WebAssembly.Module(Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
            if (module instanceof WebAssembly.Module)
                return new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
        }
    } catch (e) {
    }
    return false;
})();

console.log(supported ? "WebAssembly is supported" : "WebAssembly is not supported");

它执行以下操作：

• 检查WebAssembly在当前范围内是否可以访问。如果它不是全球性的，我们真的不在乎！
• 查看它是否具有.instantiate 函数，我们实际上并未在此处使用，但您在实际实例化时希望使用该函数，因为它是异步的并且可以在主线程上或关闭处理大型模块。李>
• 尝试同步编译尽可能小的模块（幻数'\0', 'a', 's', 'm'，后跟编码为uint32的版本号1），看看我们是否从中得到WebAssembly.Module。
• 最后，尝试同步实例化该模块，并检查它是否为WebAssembly.Instance。

这有点多，但无论如何都应该工作：

• 代码在哪里运行（主线程、worker、node.js）。
• CSP 如何最终实现标准化。

Answer 2

（声誉不足，无法发表评论......） 如果您在旧版浏览器上进行测试，则不支持 () => 语法，因此可以将其全部作为函数来完成：

function wasmSupported() {
    // try/catch, return false; as in JF Bastien's answer
}
    
if(wasmSupported()) { ... }