JavaScript 中用于多线程的 Web Workers
来源:dev.to
时间:2025-01-07 15:12:41 189浏览 收藏
本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的,希望这篇《JavaScript 中用于多线程的 Web Workers》对你有很大帮助!欢迎收藏,分享给更多的需要的朋友学习~
javascript 以单个序列运行代码,这称为单线程。这种设计非常适合 web 浏览器中的简单任务,但当主线程被复杂计算或后台操作等繁重任务阻塞时,可能会导致问题。这些任务可能会使页面变慢且无响应。为了解决这个问题,javascript 提供了 web workers,它允许您将繁重的任务移至单独的线程,保持主线程空闲,以实现流畅的用户交互。
什么是网络工作者?
web workers 是 web api 的一项功能,允许 javascript 代码在后台的单独线程上运行。这可以实现类似多线程的行为,通过从主线程卸载资源密集型任务来提高性能。
web workers 在不同的执行上下文中运行,这意味着它们无权访问 dom、窗口或文档对象。但是,它们可以通过消息与主线程通信。
如何使用网络工作者
这是使用 web workers 的分步指南:
- 创建工人文件 web workers 需要一个单独的 javascript 文件,其中包含要在后台执行的代码。例如,创建一个名为worker.js的文件:
// worker.js self.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.js const worker = new worker('worker.js'); // send data to the worker worker.postmessage(42); // receive data from the worker worker.onmessage = function(event) { console.log('result from worker:', event.data); }; // handle errors worker.onerror = function(error) { console.error('worker error:', error.message); };
- 终止 worker
当工作人员的任务完成时,或者不再需要它时,终止它以释放资源:
worker.terminate();
示例:对大数组进行排序
对大数组进行排序可能会阻塞主线程,导致 ui 冻结。让我们使用 web worker 来处理此任务:
工作文件(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》的内容就介绍到这里了,是不是学起来一目了然!想要了解更多关于的内容请关注golang学习网公众号!
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
426 收藏
-
237 收藏
-
387 收藏
-
401 收藏
-
497 收藏
-
183 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 507次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 497次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习