浏览器事件循环机制

事件循环基础概念

事件循环（Event Loop）是浏览器的一种机制，用于协调事件、用户交互、脚本执行、UI 渲染和网络处理等任务。JavaScript 是单线程的，但通过事件循环机制可以实现异步操作。

运行时概念

1. 调用栈（Call Stack）

function multiply(a, b) {
  return a * b
}

function square(n) {
  return multiply(n, n)
}

function printSquare(n) {
  const result = square(n)
  console.log(result)
}

printSquare(4) // 调用栈执行顺序演示

调用栈的执行过程：

1. 将 printSquare(4) 压入栈
2. 将 square(4) 压入栈
3. 将 multiply(4, 4) 压入栈
4. 计算结果并依次弹出栈

2. 任务队列（Task Queue）

// 宏任务示例
setTimeout(() => {
  console.log('定时器回调')
}, 0)

// 微任务示例
Promise.resolve().then(() => {
  console.log('Promise 回调')
})

console.log('同步代码')

宏任务与微任务

1. 宏任务（MacroTask）

常见的宏任务源：

• setTimeout/setInterval
• setImmediate (Node.js)
• requestAnimationFrame
• I/O
• UI 渲染

setTimeout(() => {
  console.log('第一个宏任务')
  Promise.resolve().then(() => {
    console.log('宏任务中的微任务')
  })
}, 0)

setTimeout(() => {
  console.log('第二个宏任务')
}, 0)

2. 微任务（MicroTask）

常见的微任务源：

• Promise.then/catch/finally
• process.nextTick (Node.js)
• MutationObserver

Promise.resolve('第一个微任务')
  .then(console.log)
  .then(() => {
    console.log('第二个微任务')
  })

queueMicrotask(() => {
  console.log('使用 queueMicrotask 添加的微任务')
})

事件循环执行顺序

console.log('script start')

setTimeout(() => {
  console.log('setTimeout')
}, 0)

Promise.resolve()
  .then(() => {
    console.log('promise1')
  })
  .then(() => {
    console.log('promise2')
  })

console.log('script end')

// 输出顺序：
// script start
// script end
// promise1
// promise2
// setTimeout

实际应用场景

1. 异步更新 UI

// 优化前：可能导致多次不必要的渲染
function updateUI() {
  element.style.width = '100px'
  element.style.height = '100px'
  element.style.background = 'red'
}

// 优化后：批量更新
function updateUI() {
  requestAnimationFrame(() => {
    element.style.width = '100px'
    element.style.height = '100px'
    element.style.background = 'red'
  })
}

2. 异步数据处理

async function processData(items) {
  const chunks = splitIntoChunks(items, 1000)

  for (const chunk of chunks) {
    await new Promise((resolve) => setTimeout(resolve, 0))
    processChunk(chunk)
  }
}

function splitIntoChunks(array, size) {
  return Array.from({ length: Math.ceil(array.length / size) }, (_, i) => array.slice(i * size, (i + 1) * size))
}

性能优化建议

1. 合理使用微任务

// 避免过多的微任务链
Promise.resolve()
  .then(() => heavyTask1())
  .then(() => heavyTask2())
  .then(() => heavyTask3())

// 更好的方式
async function processTask() {
  await heavyTask1()
  await new Promise((resolve) => setTimeout(resolve, 0)) // 让出主线程
  await heavyTask2()
  await new Promise((resolve) => setTimeout(resolve, 0))
  await heavyTask3()
}

2. 避免长任务阻塞

// 使用 Web Worker 处理密集计算
const worker = new Worker('worker.js')

worker.postMessage({ data: complexData })
worker.onmessage = (event) => {
  console.log('计算结果：', event.data)
}

调试与监控

1. 使用 Performance API

// 监控长任务
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {
      // 超过 50ms 的任务
      console.warn('检测到长任务：', {
        name: entry.name,
        duration: entry.duration,
        startTime: entry.startTime
      })
    }
  }
})

observer.observe({ entryTypes: ['longtask'] })

2. 开发工具调试

使用 Chrome DevTools 的 Performance 面板：

• 分析任务执行时间
• 查看事件循环中的任务分布
• 识别长任务和性能瓶颈

总结

TIP

理解浏览器的事件循环机制对于开发高性能的 Web 应用至关重要：

• 掌握宏任务和微任务的执行顺序
• 合理安排异步任务的执行时机
• 避免任务队列阻塞
• 优化用户交互体验

在实际开发中，应该根据具体场景选择合适的异步处理策略，并通过性能监控工具持续优化应用性能。