JS事件循环机制

文章目录

• • 一、什么是事件循环机制？
  • 二、JS的执行顺序
  • 三、事件循环的执行过程
  • 四、微任务和宏任务的根本区别
  • 五、事件循环的整体过程

一、什么是事件循环机制？

//语句一
console.log(1);
//语句二
setTimeout(()=>{
    console.log(2);
},1000);
//语句三
console.log(3);

执行结果为1，3，2

原因是JS引擎指向代码是从上往下执行的，首先会执行语句一。

• JS引擎会将语句一放在调用栈当中，然后执行代码，在控制台输出1，当语句一执行完毕后，便将其从调用栈中移出去。

• 接着语句二进入调用栈，语句二会调用Web API,1秒后进入回调队列，此时JS引擎将语句二移出调用栈，继续执行后面的代码。所以控制台输出了3。

• 此时进入事件循环（EventLoop）,他会不断循环的访问回调队列，等待1秒后Web API会将要执行的语句二放入回调队列；事件循环（EventLoop）将回调队列中的内容放入调用栈，开始执行，然后在控制台输出2。

JS的运行机制就是事件循环。

二、JS的执行顺序

• JS代码是从上到下一行一行执行的
• 如果某一行报错，则停止执行下面的代码
• 先执行同步代码，再执行异步代码

三、事件循环的执行过程

• 同步代码：调用栈执行后直接出栈

• 异步代码：放到Web API中，等待合适的时机放入回调队列，等到栈空时事件循环（EventLoop）开始工作，进行轮询。

• 微任务比宏任务执行时机要早

  // 语句一
  console.log(1);
  // 语句二
  setTimeout(()=>{
  console.log(2);
  },0);
  //语句三
  Promise.resolve().then(()=>{
  console.log(3);
  })
  // 语句四
  console.log(4);
  //1，4，3，2

• 微任务在DOM渲染前触发，宏任务在DOM渲染后触发

四、微任务和宏任务的根本区别

**宏任务：**由浏览器规定的

1. setTimeout
2. setInterval
3. Ajax
4. DOM事件

**微任务：**由ES6语法规定的

1. Promise
2. async
3. await

五、事件循环的整体过程

1. 先清空调用栈（call stack）中的同步代码
2. 执行微任务队列中的微任务
3. 尝试DOM渲染
4. 触发事件循环（Event Loop）反复询问回调队列中是否有要执行的语句，有则放入调用栈继续执行。

目前的理解：

JS是单线程的，浏览器在执行JS代码时先执行同步代码，再执行异步代码。

同步代码：调用栈执行后直接出栈

异步代码：放到Web API中，等待合适的时机放入回调队列，等到栈空时 事件循环（EventLoop）开始工作，进行轮询。

主要过程是：

先清空调用栈（call stack）中的同步代码，执行微任务队列中的微任务，尝试DOM渲染，触发事件循环（Event Loop）反复询问回调队列中是否有要执行的语句，有则放入调用栈继续执行。

最后

深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

小编已加密：aHR0cHM6Ly9kb2NzLnFxLmNvbS9kb2MvRFVrVm9aSGxQZUVsTlkwUnc==出于安全原因，我们把网站通过base64编码了，大家可以通过base64解码把网址获取下来。