javascript 以单个序列运行代码，这称为单线程。这种设计非常适合 web 浏览器中的简单任务，但当主线程被复杂计算或后台操作等繁重任务阻塞时，可能会导致问题。这些任务可能会使页面变慢且无响应。为了解决这个问题，javascript 提供了 web workers，它允许您将繁重的任务移至单独的线程，保持主线程空闲，以实现流畅的用户交互。
什么是网络工作者？
web workers 是 web api 的一项功能，允许 javascript 代码在后台的单独线程上运行。这可以实现类似多线程的行为，通过从主线程卸载资源密集型任务来提高性能。
web workers 在不同的执行上下文中运行，这意味着它们无权访问 dom、窗口或文档对象。但是，它们可以通过消息与主线程通信。
如何使用网络工作者
这是使用 web workers 的分步指南：
创建工人文件web workers 需要一个单独的 javascript 文件，其中包含要在后台执行的代码。例如，创建一个名为worker.js的文件：
// worker.jsself.onmessage = function(event) { const data = event.data; const result = performheavycomputation(data); self.postmessage(result);};function performheavycomputation(input) { // simulate a cpu-intensive task let total = 0; for (let i = 0; i < 1e7; i++) { total += i * input; } return total;}
在主线程初始化worker使用 worker 构造函数在主脚本中创建 worker 的实例：
// main.jsconst worker = new worker('worker.js');// send data to the workerworker.postmessage(42);// receive data from the workerworker.onmessage = function(event) { console.log('result from worker:', event.data);};// handle errorsworker.onerror = function(error) { console.error('worker error:', error.message);};
终止 worker
当工作人员的任务完成时，或者不再需要它时，终止它以释放资源：
worker.terminate();
示例：对大数组进行排序
对大数组进行排序可能会阻塞主线程，导致 ui 冻结。让我们使用 web worker 来处理此任务：
立即学习“Java免费学习笔记（深入）”；
工作文件（sortworker.js）：
self.onmessage = function(event) { const sortedarray = event.data.sort((a, b) => a - b); self.postmessage(sortedarray);};
主要脚本：
const largeArray = Array.from({ length: 1e6 }, () => Math.random());const sortWorker = new Worker('sortWorker.js');sortWorker.postMessage(largeArray);sortWorker.onmessage = function(event) { console.log('Sorted array:', event.data);};sortWorker.onerror = function(error) { console.error('Error in sorting worker:', error.message);};
web workers 的一些好处
提高性能：将任务卸载到单独的线程可以防止主线程被阻塞。更好的用户体验：即使在密集操作期间，ui 也能保持响应。可扩展性：多个工作人员可以同时处理不同的任务。
web workers 开发人员面临的限制
web workers 有优点，但也有一些缺点和限制。
no dom access：workers 无法直接操作 dom。上下文隔离：workers 有自己的全局作用域，无法访问主线程中的变量或函数。开销：创建工人并与工人沟通是有成本的，使他们不适合非常小的任务。
网络工作者的结论
web workers 让您可以在后台运行繁重的任务，让 javascript 感觉就像有多个线程。通过学习如何有效地使用它们，您可以开发更快、响应更灵敏的 web 应用程序。
对于需要更高级线程功能的场景，请考虑共享 workers 或 worklet 等选项，它们扩展了 web worker 模型。通过正确使用 web workers，您可以显着提高 javascript 应用程序的性能和响应能力。
以上就是JavaScript 中用于多线程的 Web Workers的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1499902.html
微信扫一扫 
支付宝扫一扫 
