JavaScript 是一种单线程语言，意味着它只能同时执行一个任务。这是由于 JavaScript 运行在浏览器的主线程上，负责处理用户交互、更新页面和执行 JavaScript 代码。但是，我们经常需要执行长时间运行的任务，如网络请求、计算密集型算法等，这些任务可能会导致页面卡顿，影响用户体验。
Web Workers
为了解决这个问题，HTML5 引入了 Web Workers API。Web Workers 允许 JavaScript 创建多个后台线程，这些线程可以并行处理任务，而不会阻塞主线程。这使得我们能够执行长时间运行的任务，同时保持页面的响应性。
Web Workers 的使用非常简单，只需要创建一个 Worker 实例，并指定要执行的 JavaScript 文件：
// main.js
const worker = new Worker('worker.js');-- -------------------- ---- ------- -- --------- -------------------------------- ------- -- - ----- ---- - ----------- ----- ------ - ------------------ ------------------------- --- -------- ----------------- - -- ------- ----- ---- ---- -
在 worker.js 中，我们创建了一个监听 message 事件的函数，当主线程发送消息时，它将执行 doHeavyTask 函数，并返回结果。最后，它通过 postMessage 方法将结果发送回主线程。
SharedArrayBuffer
然而，Web Workers 也有一些限制。例如，它们不能共享内存，这意味着它们无法访问相同的变量或对象。这使得在多个 Web Workers 之间同步数据非常困难。
HTML5 引入了 SharedArrayBuffer API，它允许多个线程访问和修改共享内存。这使得我们可以更有效地处理大型数据集合，例如图像和视频等。
// main.js
const buffer = new SharedArrayBuffer(1024);
const worker1 = new Worker('worker1.js');
const worker2 = new Worker('worker2.js');
worker1.postMessage({ buffer });
worker2.postMessage({ buffer });// worker1.js
self.addEventListener('message', (event) => {
const { buffer } = event.data;
const view = new Int32Array(buffer);
view[0] = 42;
});// worker2.js
self.addEventListener('message', (event) => {
const { buffer } = event.data;
const view = new Int32Array(buffer);
console.log(view[0]); // Output: 42
});在上面的示例中，我们创建了一个大小为 1024 字节的 SharedArrayBuffer，然后将其传递给两个不同的 Web Workers。在 worker1.js 中，我们将第一个整数设置为 42，并在 worker2.js 中验证其值。
总结
JavaScript 的单线程模型可能会导致长时间运行的任务阻塞主线程，从而影响用户体验。Web Workers 和 SharedArrayBuffer 允许我们在多个线程上并行执行任务，并共享内存。这使得我们能够更有效地处理大型数据集合，从而提高应用程序的性能和响应性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10357
