返回

前端工程师看不懂？一文带你洞悉JS的宏任务与微任务

前端

JS中的宏任务与微任务

前端开发中，JS中的宏任务与微任务是一个非常重要的概念，也是面试中经常被问到的问题。理解宏任务和微任务，对于理解JavaScript的事件循环机制和异步编程至关重要。

在浏览器中，JavaScript是单线程的，这意味着它一次只能执行一个任务。但是，浏览器还提供了事件队列（Event Queue）来处理异步任务。事件队列中又包括了微任务与宏任务。浏览器会先执行微任务，再执行宏任务。

微任务

微任务是事件队列中最优先级最高的任务。它通常由以下操作生成：

  • Promise.then()
  • async/await
  • MutationObserver
  • setTimeout(fn, 0)
  • requestAnimationFrame()

微任务的优先级高于宏任务，因此它会在宏任务之前执行。这意味着，如果在宏任务执行期间又产生了新的微任务，那么这些微任务会在当前宏任务执行完成后立即执行。

宏任务

宏任务是事件队列中优先级较低的任务。它通常由以下操作生成：

  • setTimeout(fn, t)（t > 0）
  • setInterval(fn, t)
  • setImmediate()
  • postMessage()
  • script 标签

宏任务的优先级低于微任务，因此它会在微任务执行完成后执行。这意味着，如果在微任务执行期间又产生了新的宏任务，那么这些宏任务会在当前微任务执行完成后立即执行。

宏任务与微任务的应用

宏任务和微任务在前端开发中有着广泛的应用。以下是一些常见的应用场景：

  • 异步编程 ：宏任务和微任务可以实现异步编程，使代码能够在不阻塞主线程的情况下执行。这对于构建响应式和高性能的Web应用程序至关重要。
  • 动画 ：微任务可以用来实现平滑的动画效果。这是因为微任务的优先级高于宏任务，因此它会在宏任务执行期间执行，从而保证动画的流畅性。
  • DOM操作 ：微任务可以用来更新DOM。这是因为微任务会在宏任务执行期间执行，因此它可以在宏任务完成之前更新DOM，从而避免闪烁等问题。
  • 事件处理 ：宏任务和微任务可以用来处理事件。宏任务可以用来处理用户交互事件，如点击事件和鼠标移动事件。微任务可以用来处理异步事件，如Ajax请求完成事件和定时器事件。

总结

宏任务和微任务是JavaScript事件循环机制的重要组成部分。理解宏任务和微任务，对于理解JavaScript的异步编程机制至关重要。在前端开发中，宏任务和微任务有着广泛的应用，可以帮助我们构建响应式和高性能的Web应用程序。