前言
提到 WebWorker,可能有些小伙伴比较陌生,不知道是做什么的,甚至不知道使用场景,今天这篇文章就带大家一起简单了解一下什么是 webworker!
概念
WebWorker 实际上是运行在浏览器后台的一个单独的线程
,因此可以执行一些耗时的操作而不会阻塞主线程。WebWorker 通过与主线程之间传递消息实现通信,这种通信是双向的
。WebWorker 不能直接访问 DOM,也不能使用像 window 对象这样的浏览器接口对象,但可以使用一些WebWorker 标准接口和 Navigator 对象的部分属性和方法。
为什么使用WebWorker?
- 提高应用响应能力: 主线程被独占执行一些
耗时
的计算或操作时,会导致 UI无响应
。WebWorker 可以把这些任务转移到后台线程
,从而保证主线程的运行,提高应用的响应能力。 - 充分利用多核CPU: 现代 CPU 都是多核的,WebWorker 可以让 Web 应用利用多核
CPU 的并行计算能力
,充分发挥计算机硬件性能。 - 避免渲染阻塞: JavaScript 运行在
主线程
,如果主线程一直占用
,就无法执行 GUI 渲染任务,导致界面渲染受阻
。WebWorker 把一些费时任务分流到后台线程
就可以避免这一问题。 - 后台持续运行: WebWorker 所在后台线程可持续运行,即使页面被挂起或最小化,任务仍在后台执行,非常适合一些需要长时间运行的操作。
使用场景
一般来说,当遇到如下几种情况时可以考虑使用 WebWorker:
- 大量数据的计算/处理: 比如图像处理、数据分析等
- 长时间运行的操作: 如一些复杂的数学计算
- 非阻塞式操作: 希望执行一些耗时操作时不阻塞主线程
示例
假设我们有一个需要计算斐波那契数列的任务,我们可以使用 Web Worker 来进行计算,以避免阻塞主线程。以下是一个简单的示例:
主线程
主线程创建 worker 实例,通过 postMessage 向worker发送消息 ,通过 onmessage 监听 worker 返回的数据。
js
const myWorker = new Worker('./worker.js')
myWorker.onmessage = function (e) {
console.log('Fibonacci result:', e.data)
}
myWorker.postMessage(40) // 请求计算斐波那契数列的第40项
worker.js
在同级目录下创建 worker.js
文件,通过 onmessage
接收主线程发来的数据,计算后通过postMessage
将计算结果返回主线程。
js
self.onmessage = function (e) {
const n = e.data
let a = 0,
b = 1,
temp
for (let i = 2; i <= n; i++) {
temp = a
a = b
b = temp + b
}
self.postMessage(b)
}
运行结果
可以看到主线程打印出 worker 计算的运行结果
总结
WebWorker是一种在 Web 应用中实现多线程运行的技术
,可以将耗费 CPU 的任务交给后台线程处理
,避免阻塞主线程
,从而提高 Web 应用的响应性能和用户体验。 总之,WebWorker的引入解决了 Web 应用长期以来在单个线程
中运行所带来的诸多问题,有效提升了Web应用的运行性能和用户体验。