js事件循环的理解：

js事件循环是一种异步执行的机制，因为js是单线程运行的，运行在浏览器和node.js中的，因为浏览器和node.js为它异步API提供了多线程支持，执行是由上到下执行先执行同步，在中间出现宏任务和微任务时将宏任务和微任务先放入任务队列等待处理，将同步执行完毕，从任务队列中先将微任务执行然后执行宏任务

js执行是从宏任务开始，先拿一个宏任务执行，清除一个任务队列在拿一个宏任务在清除一个任务队列

事件循环就是不断的判断主线程是否为空，如果为空就将任务队列中的事件放到主线程中执行，这个过程会不断循环直到执行完毕

js的事件循环执行：

js事件循环是从上到下依次执行的，在执行中先执行一个宏任务，因为执行时会出现异步执行又因为异步是属于微任务所以当js执行时碰到异步时会将它先存放在微任务的队列中，因为可能出现定时器，延时器他们属于一个宏任务将它放在宏任务队列中，继续向下执行同步，当所有同步执行完毕在执行一个队列的微任务清除整个任务队列在执行宏任务队列清除宏任务队列因为微任务的优先级大于宏任务的优先级所以先执行微任务，然后在执行一个宏任务在清除一个任务队列直到整个代码执行完毕

js事件循环分为同步执行和异步执行代码

1，如何理解同步

同步（sync）：是按照代码顺序执行从上向下执行，立即执行,会阻塞代码执行

例：

同步操作会阻塞代码的继续执行，直到操作完成

<script> //同步 从上到下执行，会阻塞代码执行，上一段代码执行完毕后执行下段 console.log("开始"); console.log("中间"); console.log("结束"); // 执行顺序 开始 中间 结束 </script>

2，如何理解异步

异步（async）：是先执行同步代码在执行异步代码，同步代码中出现异步代码会跳过执行

promise.then才会被放在微任务中，

<script> // 异步 从上到下执行，不会阻塞代码执行，像将同步代码执行，中间如果出现异步代码， // 先跳过异步代码，将所有同步代码执行完毕在执行异步代码，此间异步代码先存储到任务队列中 console.log("开始"); setTimeout(function(){ console.log("异步操作"); },0) console.log("结束"); // 执行顺序 开始 结束 异步操作 </script>

03，主线程与异步线程

js是单线程，我们又称该线程为js主线程，主线程处理同步代码

单线程：同时间只能做一件事情（同步），多线程同时间可以做多件事情（异步）

为什么js单线程可以做多件事情或可以异步？

因为js是运行在浏览器和node.js中的，使用为它异步API提供了多线程支持

<script> console.log("开始"); setTimeout(function(){ console.log("异步操作"); },0) console.log("结束"); // 执行顺序 开始 结束 异步操作 </script>

04，宏任务，微任务

在js中异步代码又分为宏任务和微任务

宏任务：包括setTimeout,setInterval，事件处理函数

微任务：包括Promise.then回调，Promise.catch回调

宏任务是代码运行环境提供的，微任务是语言提供的，微任务的优先级大于宏任务

<script>

console.log("开始"); ​ setTimeout(function(){ ​ console.log("宏任务"); ​ },0) ​ Promise.resolve().then(()=>{ ​ console.log("微任务");

}) ​ console.log("结束");

//执行顺序 开始 结束 微任务 宏任务

</script>

05，任务队列

视频演示（https://img-blog.csdnimg.cn/cc12512809dd413d8c0ba32d31fe7738.gif#pic_center）

任务队列是用于存储待处理回调函数的队列

回调函数包括：用户交互的事件，点击，滚动处理函数，忘了亲亲回调，定时器等

执行是先执行同步，在中间出现宏任务和微任务时将宏任务和微任务先放入任务队列等待处理，将使用同步执行完毕，从任务队列中先将微任务执行然后执行宏任务

06，理解事件循环

事件循环就是不断的判断主线程是否为空，如果为空就将任务队列中的事件放到主线程中执行，这个过程会不断循环直到执行完毕

<script> console.log('Script 1 开始');

Promise.resolve().then(function() { ​ console.log('Script 1 Promise'); ​ }); ​ ​ console.log('Script 1 结束'); ​ </script> ​ ​ <script> ​ console.log('Script 2 开始');

Promise.resolve().then(function() { ​ console.log('Script 2 Promise'); ​ }); ​ ​ console.log('Script 2 结束');

//执行顺序 Script 1 开始 Script 1 结束 Script 1 Promise Script 2 开始 Script 2 结束 Script 2 Promise ​ </script>