什么是 WebAssembly，以及 React 如何融入其中

WebAssembly（WASM）是一种二进制指令格式，旨在让代码以接近原生的速度在网页浏览器中运行。JavaScript 是一种高级解释型语言，而 WASM 是一种低级字节码，浏览器的 JavaScript 引擎可以用极少的开销对其进行编译和执行，使其性能达到原生代码的 10-20%。

WebAssembly 不是供您直接编写的编程语言，而是一种编译目标。Rust、C、C++ 和 Go 等语言可以使用各自的工具链编译为 WASM 字节码。您使用系统级语言编写代码，将其编译为 WASM，然后把二进制模块交付给浏览器。

WASM 在浏览器内部的沙箱虚拟机中运行，并受到与 JavaScript 相同的安全限制。它无法直接访问 DOM、网络或文件系统，所有此类访问都必须通过 JavaScript 绑定完成。这种沙箱机制确保即使是以原生速度运行的代码，也无法绕过浏览器的安全策略。

WASM 和 JavaScript 的设计目标是协同工作，而不是相互替代。JavaScript 擅长编排、DOM 操作、事件处理以及调用浏览器 API。WASM 擅长处理计算密集型算法。标准模式是：JavaScript 负责编排应用，WASM 负责繁重计算。

WASM 使用线性内存模型：一段由 JavaScript ArrayBuffer 表示的连续字节块。WASM 和 JavaScript 都可以读写这块共享内存。在 JavaScript 与 WASM 之间传递大量数据时，可以通过读写这个共享缓冲区来完成，从而避免成本高昂的序列化。

React 负责 UI 层：渲染、状态管理和用户交互。WASM 负责 React 无法通过 JavaScript 高效执行的计算。React 从事件处理函数或副作用中调用 WASM 函数，接收结果，然后更新状态以触发重新渲染。React 是表现层，WASM 是计算引擎。

需要以下功能的 React 应用适合使用 WASM：图像或视频处理（像素操作）、音频合成与处理、密码学运算（哈希、加密）、物理模拟、游戏逻辑、压缩与解压缩，以及大数据量文本搜索。这些任务使用 JavaScript 时性能都明显不足。

WASM 在 CPU 密集型计算中可以达到接近原生的速度，因为浏览器的即时编译器会将其编译为机器码，几乎不需要额外的优化工作。不过，跨越 JavaScript-WASM 边界（从 JS 调用 WASM 函数，或反过来）会产生开销。请在 WASM 内批量执行数据操作，以尽量减少边界跨越。

WASM 和 Web Worker 都能解决性能问题。Web Worker 会将 JavaScript 计算移出主线程。WASM 则会让它所在的线程上的计算更快。最佳模式是将二者结合起来：在 Web Worker 中运行 WASM 计算，使 React 主线程可以继续处理 UI 更新，同时让 WASM 以接近原生的速度运行。

自 2017 年起，所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持 WebAssembly。基础 WASM 规范几乎得到了所有浏览器的支持。较新的扩展功能（使用 SharedArrayBuffer 的线程、用于向量化操作的 SIMD，以及面向托管语言的垃圾回收）支持程度各不相同，但正在逐步标准化并投入使用。

WASM 生态系统正在快速发展。值得注意的生产应用包括：Figma（渲染引擎）、Google Earth（三维地球）、Adobe Photoshop Web（图像处理）、AutoCAD Web（CAD 渲染）以及众多密码学库。React 应用通常也会在这些相同类别中使用 WASM 处理计算密集型部分。

WebAssembly 如何在浏览器中执行？

WebAssembly 是 Rust、C、C++ 和 Go 使用的二进制编译目标（而不是一种语言），可以在沙箱浏览器虚拟机中以接近原生的速度运行。WASM 和 JavaScript 相辅相成：JS 负责编排，WASM 负责计算。React 负责 UI 层，并调用 WASM 执行繁重计算。请将 WASM 用于图像处理、密码学、物理模拟、音频处理和大数据搜索，并通过在 WASM 内批量执行操作来尽量减少 JS-WASM 边界跨越。