js中的 Worker 是一种在浏览器后台运行的线程,它允许你执行脚本操作,而不会阻塞主线程(通常是渲染线程) Worker是一种 Web Worker API的一部分,他提供了在浏览器中进行多线程编程的能力.
基本用法
要创建一个 Worker,你需要创建一个新的 Worker 对象,并传入一个指向包含你想要在后台执行的 JavaScript 代码的文件的 URL。
// 创建一个新的 worker
const myWorker = new Worker('worker.js');
// 监听来自 worker 的消息
myWorker.onmessage = function (e) {
console.log('获取', e.data)
}
// 向 worker 发送消息
myWorker.postMessage('hello who is your daddy')
在 worker.js 文件中,你可以定义 worker 的行为:
// worker.js
// 监听来自主线程的消息
self.onmessage = function(e) {
console.log('监听来自主线程的消息:', e.data);
// 执行一些任务...
const result = doSomeWork(e.data);
// 向主线程发送消息
self.postMessage(result);
};
function doSomeWork(data) {
// 执行一些计算密集型或耗时的任务
let result = 0;
for (let i = 0; i < 1e8; i++) {
result += i;
}
return result;
}
注意事项
线程安全: 由于worker在不同的线程中运行,他们不能直接访问主线程
中的dom或其他对象.他们之间只能通过消息传递 (postMessage 和 onmessage)来通信。文件限制: Worker 通常需要加载一个单独的 JavaScript 文件。尽管一些浏览器可能支持 Blob URL 或 Data URL 来动态创建 worker,但最佳实践是使用外部文件。
资源限制:由于 Worker 是在后台运行的,它们不会阻塞页面的渲染,但它们仍然会消耗系统资源(如 CPU 和内存)。因此,应该谨慎使用它们,并避免创建过多的 Worker。
错误处理: Worker 中发生的错误不会在主线程中抛出。相反,你需要监听 Worker 的 error 事件来处理这些错误。
类型
除了基本的 Worker 外,Web Worker API 还提供了 SharedWorker 和 Service Worker。
- SharedWorker 允许多个脚本共享同一个 worker。它们可以用于多个窗口或标签页之间的通信。
- Service Worker: 是一种在浏览器后台独立于网页运行的脚本,可以拦截和处理网络请求,缓存资源,以及推送通知等。它们通常用于实现更高级的功能,如离线应用、资源缓存和推送通知。