js线程实现
JavaScript 线程实现方式
JavaScript 是单线程语言，但可以通过以下方式模拟多线程或实现并发操作：
Web Workers
Web Workers 允许在后台运行脚本，独立于主线程，适合计算密集型任务。
// 主线程代码
const worker = new Worker('worker.js');
worker.postMessage('Start working');
worker.onmessage = (e) => {
console.log('Message from worker:', e.data);
};
// worker.js
self.onmessage = (e) => {
console.log('Message from main:', e.data);
self.postMessage('Work done');
};Service Workers
主要用于离线缓存和网络请求拦截，运行在独立线程。
// 注册 Service Worker
navigator.serviceWorker.register('/sw.js').then(registration => {
console.log('ServiceWorker registered');
});
// sw.js
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});Shared Workers
多个浏览器窗口共享的 worker 实例。
// 主线程
const sharedWorker = new SharedWorker('shared-worker.js');
sharedWorker.port.start();
sharedWorker.port.postMessage('Hello shared worker');
// shared-worker.js
let ports = [];
self.onconnect = (e) => {
const port = e.ports[0];
ports.push(port);
port.onmessage = (e) => {
ports.forEach(p => p.postMessage(e.data));
};
};异步编程模式
虽然非真正多线程，但能实现非阻塞操作。
// Promise
new Promise((resolve) => {
setTimeout(() => resolve('Done'), 1000);
}).then(console.log);
// async/await
async function fetchData() {
const response = await fetch('api/data');
const data = await response.json();
console.log(data);
}注意事项
- Web Workers 无法直接访问 DOM
- 线程间通信需通过 postMessage
- 大量数据传输需考虑结构化克隆算法的性能
- 服务端 Node.js 可通过 worker_threads 模块实现真线程
这些方法可根据具体需求选择，Web Workers 最适合需要并行计算的场景，而异步模式适合I/O密集型任务。
