Web Workers是HTML5提供的后台线程API，允许JavaScript在独立线程执行耗时任务，避免阻塞主线程。通过postMessage通信，支持Dedicated、Shared和Service Worker三种类型，结合SharedArrayBuffer可实现内存共享与同步，提升多核CPU利用率，增强应用性能与响应性。
JavaScript 一直是单线程语言，依靠事件循环和异步机制处理并发任务。但在处理大量计算时，主线程容易被阻塞，导致页面卡顿。Web Workers 提供了一种在后台线程中运行脚本的方式，从而实现真正的并行执行，提升性能。
什么是 Web Workers？
Web Workers 是 HTML5 引入的浏览器 API，允许 JavaScript 在独立于主线程的后台线程中运行。这意味着你可以把耗时的任务（如数据处理、复杂计算）交给 Worker，避免阻塞用户界面。
Worker 线程不能访问 DOM，也不能使用 window 对象，但可以使用部分全局对象，如 self、setTimeout、fetch 等。
创建和使用 Web Worker
要使用 Web Worker，你需要创建一个单独的 JavaScript 文件，作为 Worker 的脚本文件。
立即学习“Java免费学习笔记（深入）”；
例如，创建一个名为 worker.js 的文件：
self.onmessage = function(e) { const data = e.data; let result = 0; for (let i = 0; i < data; i++) { result += i; } self.postMessage(result);};
在主脚本中启动 Worker：
const worker = new Worker('worker.js');worker.postMessage(1000000); // 发送数据worker.onmessage = function(e) { console.log('计算结果:', e.data);};
通过 postMessage 发送消息，通过监听 onmessage 接收结果。通信是基于事件和消息传递的，数据是复制而非共享。
SharedArrayBuffer 与更高级的并发控制
虽然普通 Worker 之间不能共享内存，但通过 SharedArrayBuffer 可以实现主线程与 Worker 之间的内存共享。配合 Atomics 操作，可以实现线程间同步。
这适用于需要频繁交换大量数据的场景，比如音视频处理或科学计算。
示例：
// 主线程const sharedBuffer = new SharedArrayBuffer(4);const sharedArray = new Int32Array(sharedBuffer);sharedArray[0] = 0;const worker = new Worker('atomic-worker.js');worker.postMessage(sharedArray);Atomics.wait(sharedArray, 0, 0);console.log('最终值:', sharedArray[0]);
// atomic-worker.jsself.onmessage = function(e) { const arr = e.data; Atomics.add(arr, 0, 100); Atomics.notify(arr, 0, 1);};
注意：SharedArrayBuffer 在某些浏览器中默认受限，需启用跨源隔离（Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy）才能使用。
Worker 类型与适用场景
Dedicated Worker：专用于创建它的脚本，最常见。 Shared Worker：可被多个脚本（如多个窗口、iframe）共享，通信通过 Port 对象。 Service Worker：用于网络代理、缓存、推送通知等，生命周期独立。
选择合适的类型取决于你的应用需求。大多数计算密集型任务使用 Dedicated Worker 即可。
基本上就这些。Web Workers 让 JavaScript 能有效利用多核 CPU，虽不是传统意义上的“多线程编程”，但通过消息传递模型实现了安全的并发处理。合理使用，能显著提升应用响应性和用户体验。
以上就是Web Workers与JavaScript多线程编程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533801.html
微信扫一扫 
支付宝扫一扫 
