JavaScript任务队列详解

发布时间: 2025-03-22 11:37

↑

# JavaScript任务队列详解

任务队列(Task Queue)是JavaScript事件循环中的重要组成部分。本文将深入讲解任务队列的工作原理、任务类型和执行机制。

## 任务队列基本概念

任务队列是一种先进先出(FIFO)的数据结构,用于存储待执行的任务。在JavaScript中,任务队列主要分为两类:

1. 宏任务(Macrotask)队列
2. 微任务(Microtask)队列

```javascript
// 任务队列示例结构
class TaskQueue {
  constructor(type) {
    this.type = type; // 'macro' 或 'micro'
    this.tasks = [];
  }

enqueue(task) {
    this.tasks.push(task);
  }

dequeue() {
    return this.tasks.shift();
  }

isEmpty() {
    return this.tasks.length === 0;
  }
}
```

## 宏任务(Macrotask)

### 1. 常见宏任务

```javascript
// setTimeout示例
setTimeout(() => {
  console.log('Timeout task');
}, 0);

// setInterval示例
setInterval(() => {
  console.log('Interval task');
}, 1000);

// setImmediate (Node.js环境)
setImmediate(() => {
  console.log('Immediate task');
});

// requestAnimationFrame (浏览器环境)
requestAnimationFrame(() => {
  console.log('Animation frame task');
});
```

### 2. I/O操作

```javascript
// 文件读取(Node.js)
const fs = require('fs');
fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log('File read task');
});

// 网络请求
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log('Network request task');
  });
```

## 微任务(Microtask)

### 1. Promise操作

```javascript
Promise.resolve().then(() => {
  console.log('Promise microtask');
});

new Promise((resolve) => {
  resolve('Direct resolve');
}).then(result => {
  console.log('Promise result:', result);
});
```

### 2. Process.nextTick (Node.js)

```javascript
process.nextTick(() => {
  console.log('Next tick task');
});
```

### 3. MutationObserver (浏览器)

```javascript
const observer = new MutationObserver(() => {
  console.log('DOM mutation task');
});

const target = document.getElementById('target');
observer.observe(target, {
  attributes: true,
  childList: true
});
```

## 任务执行顺序

```javascript
console.log('Script start'); // 1

setTimeout(() => {
  console.log('Timeout 1'); // 4
}, 0);

Promise.resolve().then(() => {
  console.log('Promise 1'); // 2
}).then(() => {
  console.log('Promise 2'); // 3
});

console.log('Script end'); // 1

// 输出顺序:
// Script start
// Script end
// Promise 1
// Promise 2
// Timeout 1
```

## 任务调度机制

### 1. 事件循环与任务处理

```javascript
class EventLoop {
  constructor() {
    this.macroTaskQueue = new TaskQueue('macro');
    this.microTaskQueue = new TaskQueue('micro');
  }

addMacroTask(task) {
    this.macroTaskQueue.enqueue(task);
  }

addMicroTask(task) {
    this.microTaskQueue.enqueue(task);
  }

processTasks() {
    // 1. 执行当前宏任务
    while (!this.macroTaskQueue.isEmpty()) {
      const macroTask = this.macroTaskQueue.dequeue();
      macroTask();

// 2. 执行所有微任务
      while (!this.microTaskQueue.isEmpty()) {
        const microTask = this.microTaskQueue.dequeue();
        microTask();
      }
    }
  }
}
```

### 2. 任务优先级

```javascript
class TaskScheduler {
  constructor() {
    this.highPriorityQueue = [];
    this.normalPriorityQueue = [];
    this.lowPriorityQueue = [];
  }

schedule(task, priority = 'normal') {
    switch (priority) {
      case 'high':
        this.highPriorityQueue.push(task);
        break;
      case 'normal':
        this.normalPriorityQueue.push(task);
        break;
      case 'low':
        this.lowPriorityQueue.push(task);
        break;
    }
  }

executeTasks() {
    // 按优先级执行任务
    while (this.highPriorityQueue.length) {
      const task = this.highPriorityQueue.shift();
      task();
    }

while (this.normalPriorityQueue.length) {
      const task = this.normalPriorityQueue.shift();
      task();
    }

while (this.lowPriorityQueue.length) {
      const task = this.lowPriorityQueue.shift();
      task();
    }
  }
}
```

## 性能优化

### 1. 任务分割

```javascript
function processLargeData(items) {
  const chunks = [];
  for (let i = 0; i < items.length; i += 1000) {
    chunks.push(items.slice(i, i + 1000));
  }

processChunk();
}
```

### 2. 任务优化

```javascript
class OptimizedTaskQueue {
  constructor() {
    this.tasks = new Map();
    this.isProcessing = false;
  }

addTask(id, task) {
    // 去重复任务
    this.tasks.set(id, task);
    this.scheduleProcessing();
  }

scheduleProcessing() {
    if (!this.isProcessing) {
      this.isProcessing = true;
      Promise.resolve().then(() => {
        this.processTasks();
      });
    }
  }

processTasks() {
    this.tasks.forEach((task, id) => {
      try {
        task();
      } catch (error) {
        console.error(`Task ${id} failed:`, error);
      }
    });
    this.tasks.clear();
    this.isProcessing = false;
  }
}
```

## 最佳实践

### 1. 合理使用宏任务和微任务

```javascript
class TaskManager {
  static scheduleTask(task, isUrgent = false) {
    if (isUrgent) {
      // 使用微任务处理紧急任务
      Promise.resolve().then(task);
    } else {
      // 使用宏任务处理普通任务
      setTimeout(task, 0);
    }
  }

static batchTasks(tasks) {
    // 批量处理任务
    return Promise.all(tasks.map(task => {
      return new Promise(resolve => {
        TaskManager.scheduleTask(() => {
          const result = task();
          resolve(result);
        });
      });
    }));
  }
}
```

### 2. 避免任务阻塞

```javascript
class NonBlockingTask {
  static async execute(task, timeout = 50) {
    return new Promise((resolve, reject) => {
      const worker = new Worker(URL.createObjectURL(new Blob([
        `onmessage = function(e) {
          const result = (${task.toString()})(e.data);
          postMessage(result);
        }`
      ])));

const timeoutId = setTimeout(() => {
        worker.terminate();
        reject(new Error('Task timeout'));
      }, timeout);

worker.onmessage = (e) => {
        clearTimeout(timeoutId);
        worker.terminate();
        resolve(e.data);
      };

worker.onerror = (error) => {
        clearTimeout(timeoutId);
        worker.terminate();
        reject(error);
      };
    });
  }
}
```

## 总结

任务队列是JavaScript事件循环中的核心机制,通过合理使用宏任务和微任务,可以实现:

1. 异步操作的有序执行
2. 高优先级任务的及时处理
3. 避免主线程阻塞
4. 提高应用性能

在实际开发中,我们应该:

1. 理解宏任务和微任务的区别
2. 合理安排任务优先级
3. 避免任务队列堆积
4. 实现任务的最优调度

元素码农