理解JS中的Event Loop机制[亲测有效]

小小码 • 2023-08-09 13:00 • 未分类 • 阅读 84

大家好，我是考100分的小小码，祝大家学习进步，加薪顺利呀。今天说一说理解JS中的Event Loop机制[亲测有效],希望您对编程的造诣更进一步.

前言

前几天在理解node的事件环机制中引发了我对浏览器里Event Loop的好奇。我们都知道javascript是单线程的，任务是需要一个一个按顺序执行的，如果javascript有两个线程，一个为DOM增加样式，一个却要删除DOM，这样岂不是就会很混乱。单线程可以节约内存，但是必须等待前一个任务完成后才能执行下一个任务。接下来理解浏览器中的Event Loop，先看一张图：

heap（堆）和stack（栈）

heap（堆）是用户主动请求而划分出来的内存区域，比如你new Object()，就是将一个对象存入堆中，可以理解为heap存对象。 stack（栈）是由于函数运行而临时占用的内存区域，函数都存放在栈里。

Event Loop实现过程

在上一张图中:

所有同步任务都在主线程上执行，形成一个执行栈；
只要异步任务有了运行结果，就在任务队列（task queue）（队列是一个先进先出的数据结构，而栈是一个先进后出的数据结构）之中放置一个事件；
一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列,又将队列中的事件放到stack中依次执行，就是执行异步任务中的回调函数。这个过程是循环不断的，这就是Event Loop(事件循环)；

宏任务和微任务

在上张图中，我们看到还有宏任务（MacroTask）和微任务（MicroTask）之分。

宏任务（MacroTask） setTimeout setInterval

微任务（MicroTask） Promise.then MessageChannel微任务(vue中nextTick实现原理)

同步任务先执行，遇到微任务就将微任务放入执行栈微任务会先执行，再执行宏任务，

先看一下图（个人理解）

举例说明

console.log(1);
setTimeout(function(){
    console.log(2);
    new Promise(function(resolve,reject){
        console.log('promise');
        resolve();
    }).then(res=>{
        console.log('promise.then');
    })
});
setTimeout(function(){
        console.log(4);
    })
console.log(5);

将这行代码放入浏览器控制台中

分析一下：

执行栈中同步任务先执行，先走console.log(1)和console.log(5)；
接着是遇到setTimeout将它们的回调函数放入MacroTask(宏任务队列)；
然后将任务队列中的回调函数依次放入主执行栈中执行：console.log(2)执行，接着promise立即执行，然后promise.then是微任务放入MicroTask中直接入栈先执行；
最后执行第二个setTimeout的回调函数console.log(4)；