浅谈JS事件循环机制

众所周知,JS是一门单线程语言,这意味着他在任何时刻只能执行一段代码,为了处理异步操作(如网络请求,定时器,用户交互等),JS运行时环境引入了事件循环机制。

事件循环机制依赖于以下几个关键部分:

  • 调用栈(Call Stack):用于存储正在执行的函数。
  • 任务队列(Task Queue):用于存储需要执行的异步任务。
  • 事件循环(Event Loop):监控调用栈和任务队列,确保代码的执行顺序。

今天主要探讨任务队列和事件循环

JS执行过程中会产生两种任务:同步任务和异步任务

  • 同步任务:声明语句,for,赋值等,读取后依据从上到下,从左到右,立即执行
  • 异步任务:比如ajax网络请求,setTimeout定时函数,Promise等都属于异步任务。异步任务会通过任务队列(先进先出)的机制来进行协调

任务队列:


用于存储异步任务。当一个异步操作完成时(如 setTimeout、Promise),它会被加入任务队列,等待事件循环处理。

宏任务:script(JS整段代码)、setTimeout、setInterval、setImmediate、I/O、UI交互

微任务:Promise、process.nextTick(node.js)、MutaionObserver

任务队列的执行过程是:先执行一个宏任务,执行过程中如果产出新的宏/微任务,就将他们推入相应的任务队列,之后再执行一队微任务,之后再执行宏任务,如此循环。以上不断重复的过程就叫做事件循环

其实先执行宏任务还是微任务是有不同理解的

因为在我看来同步代码就是JS整段代码,执行完同步代码后再执行异步代码,这时候先执行微任务,再执行宏任务。

理解宏任务和微任务的执行过程


console.log("script start");

setTimeout(function () {
  console.log("setTimeout");
}, 0);

Promise.resolve()
  .then(function () {
    console.log("promise1");
  })
  .then(function () {
    console.log("promise2");
  });

console.log("script end");
  1. 宏任务:执行整体代码(相当于

你可能感兴趣的:(javascript,前端,开发语言)