当前位置:首页 > JavaScript

js实现线程

2026-02-01 04:12:23JavaScript

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

用于离线缓存和网络代理,运行在独立线程:

js实现线程

// 注册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专注网络请求处理。选择方案时应考虑浏览器兼容性和具体需求。

标签: 线程js
分享给朋友:

相关文章

js实现继承

js实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现打印

js实现打印

使用window.print()方法实现打印 在JavaScript中,可以通过调用window.print()方法直接触发浏览器的打印功能。这会打开系统的打印对话框,用户可以选择打印机和设置打印选项…

js实现图片上传

js实现图片上传

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。HTML部分需要创建一个文件选择输入框和一个用于…

js 实现继承

js 实现继承

原型链继承 通过让子类的原型对象指向父类的实例来实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Par…

js 实现分页

js 实现分页

实现分页的基本逻辑 分页功能通常需要后端返回数据总量或总页数,前端根据当前页码和每页条数截取对应数据。以下是一个基于JavaScript的简单分页实现方案: 前端分页实现 假设已有从后端获取的完整数…

js实现授权

js实现授权

授权流程设计 授权流程通常涉及前端与后端的交互,常见方案包括OAuth2.0、JWT等。以JWT为例的典型流程: 用户提交凭证(如用户名密码)到认证服务 服务端验证通过后生成包含用户信息的J…