Web Workers可用于后台运行JavaScript代码以避免阻塞主线程。通过创建独立JS文件并实例化Worker对象来启动，主脚本中发送数据，worker接收后执行耗时任务如大量计算，并通过postMessage返回结果，实现主线程与worker线程间通信。
Web Workers 允许你在后台线程中运行 JavaScript 代码，不会阻塞主线程（尤其是 UI 线程），特别适合处理耗时任务，比如大量计算、数据处理或轮询等。下面介绍 Web Workers 的基本使用方法。
创建和启动 Web Worker
要使用 Web Worker，你需要创建一个独立的 JavaScript 文件，这个文件将运行在 worker 线程中。然后在主脚本中实例化 Worker 对象来启动它。
假设你有一个文件叫 worker.js：
// worker.jsself.onmessage = function(e) { const data = e.data; // 模拟耗时计算 let result = 0; for (let i = 0; i < data; i++) { result += i; } // 将结果发送回主线程 self.postMessage(result);};
在主页面中启动这个 worker：
立即学习“Java免费学习笔记（深入）”；
// main.jsconst worker = new Worker('worker.js');worker.postMessage(1000000); // 发送数据给 workerworker.onmessage = function(e) { console.log('计算结果：', e.data); // 接收 worker 返回的结果};
与主线程通信
主线程和 Web Worker 之间通过 postMessage() 发送消息，通过监听 onmessage 事件接收消息。注意：不能直接共享变量，所有通信都是基于消息传递的。
主线程使用 worker.postMessage(data) 发送数据 worker 使用 self.postMessage(result) 返回结果 主线程通过 worker.onmessage 接收返回值 worker 中使用 self.onmessage 监听来自主线程的消息
终止 Web Worker
如果不再需要 worker，应手动关闭以释放资源。
在主线程中调用 worker.terminate() 在 worker 内部调用 self.close() 可以自行关闭
// 主线程中终止 workerworker.terminate();
注意事项和限制
Web Worker 虽然强大，但有一些限制需要注意：
不能访问 DOM，无法操作页面元素 不能使用 window、document 等全局对象，可以使用 self、console、fetch 等部分 API 传递的数据是复制的（结构化克隆），不是共享引用 worker 文件必须与主页面同源，且不能通过 file:// 协议加载基本上就这些。合理使用 Web Workers 能显著提升网页响应性能，尤其在执行密集型任务时避免界面卡顿。
以上就是javascript_Web Workers的使用方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540444.html
微信扫一扫 
支付宝扫一扫 
