深入了解浏览器中的Event loop，同步异步，宏微任务

最新推荐文章于 2023-09-15 15:22:14 发布

阿泽不会飞

最新推荐文章于 2023-09-15 15:22:14 发布

阅读量609

点赞数 2

分类专栏：周记 js高级文章标签： javascript 前端

本文链接：https://blog.csdn.net/Azbtt/article/details/129752328

版权

周记同时被 2 个专栏收录

67 篇文章 1 订阅

订阅专栏

js高级

7 篇文章 0 订阅

订阅专栏

我们为什么要会Event loop

•是要增加自己技术的深度，也就是懂得JavaScript的运行机制。
•现在在前端领域各种技术层出不穷，掌握底层原理，可以让自己以不变，应万变。
•应对各大互联网公司的面试，懂其原理，题目任其发挥。

前置知识点

•栈，堆，队列
•同步，异步任务
•宏任务，微任务
•Async/await语法糖

前言

Event Loop即事件循环，是指浏览器或Node的一种解决javaScript
单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。

js引擎负责解析并编译js代码。制定作用域标准，分配内存，创建执行上下文调用栈…。编译好的代码放到运行环境中去运行，而运行环境会维护异步任务。
对浏览器而言，浏览器是多线程的，它可以分配线程去倒计时定时器，发送请求，事件监听等。当定时器中的事件倒计时完毕，将其扔到也是由浏览器维护的消息队列中，当遇到其他异步时，浏览器会分配进程去处理，处理完毕也是扔到消息队列中。等待js引擎去执行。

（1）堆（Heap）

堆是一种数据结构，是利用完全二叉树维护的一组数据，堆分为两种，一种为最大堆，一种为最小堆，将根节点最大的堆叫做最大堆或大根堆，根节点最小的堆叫做最小堆或小根堆。
堆是线性数据结构，相当于一维数组，有唯一后继。
如最大堆:

（2）栈（Stack）

栈在计算机科学中是限定仅在表尾进行插入或删除操作的线性表。栈是一种数据结构，它按照后进先出的原则存储数据，先进入的数据被压入栈底，最后的数据在栈顶，需要读数据的时候从栈顶开始弹出数据。
栈是只能在某一端插入和删除的特殊线性表。

（3）队列（Queue）

特殊之处在于它只允许在表的前端（ front ）进行删除操作，而在表的后端( rear）进行插入操作，和栈一样，队列是一种操作受限制的线性表。
进行插入操作的端称为队尾，进行删除操作的端称为队头。队列中没有元素时，称为空队列。
队列的数据元素又称为队列元素。在队列中插入一个队列元素称为入队，从队列中删除一个队列元素称为出队。因为队列只允许在一端插入，在另一端删除，所以只有最早进入队列的元素才能最先从队列中删除，故队列又称为先进先出（FIFO-first in first out )

同步任务，异步任务

概念解释

同步任务

同步是js任务进入任务栈按顺序等待主线程执行的过程，简单来讲就是js从上到下代码的运行的过程，如果中间有个同步任务出现了死循环，那么浏览器可能就会出现js无响应，意思就是无法继续向下执行。

异步任务

但是我们读取本地文件数据，或者获取服务器接口数据时，花费的时间无法确定，这样会导致页面看起来非常卡顿，严重影响用户体验。这个时候就出现了异步，即不进入主线程任务栈，而是先进入event Table并注册回调函数，然后按顺序进入异步事件队列，在主线程的任务栈执行完后调用（队列先进先出，所以按注册函数进入队列的顺序来调用）

常见的同步和异步任务

同步任务

•console.log()
•new Promise()
•函数调用
•…

异步任务

•Ajax请求
•setTimeOut、setInterval
•promise.then()
•Dom事件
•…

浏览器中的Event Loop

Javascript有一个 main thread 主线程和 call-stack 调用栈(执行栈)，所有的任务都会被放到调用栈等待主线程执行。

JS调用栈

JS调用栈采用的是后进先出的规则，当函数执行的时候，会被添加到栈的顶部，当执行栈执行完成后，就会从栈顶移出，直到栈内被清空。

同步任务和异步任务执行

Javascript单线程任务被分为同步任务和异步任务，同步任务会在调用栈中按照顺序等待主线程依次执行，异步任务会在异步任务有了结果后，将注册的回调函数放入任务队列中等待主线程空闲的时候（调用栈被清空），被读取到栈内等待主线程的执行。任务队列Task Queue，即队列，是一种先进先出的一种数据结构。

宏任务，微任务

概念解释

任务队列中的任务也分为两种，分别是：

宏任务（Macro-take）
微任务（Micro-take）

常见的宏任务微任务

宏任务（MacroTask）

script全部代码、setTimeout、setInterval、setImmediate（浏览器暂时不支持，只有IE10支持，具体可见MDN）、I/O、UI Rendering。

微任务（MicroTask）

Process.nextTick (Node独有)、Promise 、Async/Await(实际是Promise)，object.observe(废弃)、Mutation0bserver

执行流程

事件的执行顺序，是先执行宏任务，然后执行微任务，这个是基础，任务可以有同步任务和异步任务，同步的进入主线程，异步的进入Event Table并注册函数，异步事件完成后，会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue)，同步任务执行完成后，会从Event Queue中读取事件放入主线程执行，回调函数中可能还会包含不同的任务，因此会循环执行上述操作。
**注意：**setTimeOut并不是直接的把你的回掉函数放进上述的异步队列中去，而是在定时器的时间到了之后，把回掉函数放到执行异步队列中去。如果此时这个队列已经有很多任务了，那就排在他们的后面。这也就解释了为什么setTimeOut为什么不能精准的执行的问题了。setTimeOut执行需要满足两个条件：
1.主进程必须是空闲的状态，如果到时间了，主进程不空闲也不会执行你的回调函数
2.这个回调函数需要等到插入异步队列时前面的异步函数都执行完了，才会执行

加入异步Promise的执行

var p=new Promise(resolve=>{
    console.log(4)
    resolve(5)
})


function f1(){
    console.log(1);
}


function f2(){
    setTimeout(()=>{
        console.log(2);
    })
    f1()
    p.then(resolve=>{
        console.log(resolve);
    })
    .then(()=>{
        console.log(6);
    })
    console.log(3);
}


f2()


//4 1 3 5 6 2

Event Loop使用Async/Await

源代码：

async function async1(){
    console.log("async1begin");
    let async2res= await async2()
    console.log(async2res);
    console.log("async1end");
} 
async function async2(){
    console.log("async2begin");
    return "async2end"
} 
async1()
console.log("end");

源代码转promise：

function async1(){
    console.log("async1begin");
    return new Promise((resolve)=>{
        console.log("async2begin");
        resolve("async2end")
    }).then((res)=>{
        console.log(res);
        console.log("async1end");
    })
} 
async1()
console.log("end");

async1begin
async2begin
end
async2end
async1end

加入async/await的执行面试题

async function async1(){
    console.log("A");
    await async2()
    console.log("B");
}    
async function async2(){
    console.log("C");
}
console.log("D");

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

async1()

new Promise(function (resolve){
    console.log("F");
    resolve()
}).then(function(){
    console.log("G");
})

console.log("H");

D A C F H B G E

阿里面试题

<body>
  <button >button</button>
</body>
<script>
  let button=document.getElementsByTagName('button')[0];
  button.addEventListener("click",()=>{
    Promise.resolve().then(()=>{console.log("M 1");})
    console.log("L 1");
  })
  button.addEventListener("click",()=>{
    Promise.resolve().then(()=>{console.log("M 2");})
    console.log("L 2");
  })
  button.click()
</script>

L 1
L 2
M 1
M 2

点击后：

L1
M1
L2
M2

button.click()会把两个函数合起来用，类似：

function fn1(){
  Promise.resolve().then(()=>{console.log("M 1");})
  console.log("L 1");
  Promise.resolve().then(()=>{console.log("M 2");})
  console.log("L 2");
}
fn1()

点击事件会连着执行两个函数，类似：

    function fn2(){
        Promise.resolve().then(()=>{console.log("M 1");})
        console.log("L 1");
    }
    function fn3(){
        Promise.resolve().then(()=>{console.log("M 2");})
        console.log("L 2");
    }
    new Promise((resolve)=>{
        fn2()
        resolve()
    }).then(()=>{
        fn3()
    })