js实现线程
JavaScript 是单线程语言,但可以通过以下方法模拟多线程或实现并发操作:
Web Worker
Web Worker 允许在后台运行脚本,与主线程并行执行。创建一个新的 Worker 线程:
// 主线程代码
const worker = new Worker('worker.js');
worker.postMessage({ data: 'start' });
worker.onmessage = function(event) {
console.log('Received from worker:', event.data);
};
// worker.js
self.onmessage = function(event) {
const result = heavyCalculation(event.data);
self.postMessage(result);
};
function heavyCalculation(data) {
// 模拟耗时计算
return data.toUpperCase();
}
SharedArrayBuffer 和 Atomics
共享内存和原子操作可以实现线程间数据共享:
// 主线程
const sharedBuffer = new SharedArrayBuffer(16);
const sharedArray = new Int32Array(sharedBuffer);
const worker = new Worker('worker.js');
worker.postMessage({ buffer: sharedBuffer });
// worker.js
self.onmessage = function(event) {
const sharedArray = new Int32Array(event.data.buffer);
Atomics.add(sharedArray, 0, 1);
};
异步编程模式
虽然不创建真实线程,但可以通过以下方式实现并发效果:
// Promise链
fetch(url)
.then(response => response.json())
.then(data => processData(data))
.catch(error => handleError(error));
// async/await
async function fetchData() {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}
任务分片
将大任务分解为小任务,通过事件循环调度:
function chunkedTask(data, chunkSize, callback) {
let index = 0;
function processChunk() {
const chunk = data.slice(index, index + chunkSize);
// 处理chunk...
index += chunkSize;
if (index < data.length) {
setTimeout(processChunk, 0);
} else {
callback();
}
}
processChunk();
}
Service Worker
用于离线缓存和网络代理,运行在独立线程:

// 注册Service Worker
navigator.serviceWorker.register('sw.js')
.then(registration => {
console.log('Registration successful');
});
// sw.js
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});
这些方法各有适用场景:Web Worker适合CPU密集型任务,异步编程适合IO操作,Service Worker专注网络请求处理。选择方案时应考虑浏览器兼容性和具体需求。






