搞清js异步的重要一步---宏任务（marcroTask）和微任务（microTask）--精细讲解

最新推荐文章于 2024-04-10 16:56:15 发布

_阿锋丶

最新推荐文章于 2024-04-10 16:56:15 发布

阅读量353

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_43342105/article/details/108424399

版权

javascript 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

此篇文章为学习慕课网双越老师课程所写自学笔记，如有侵权，立即删除

文章目录

先看一到面试题

下面代码console.log的执行顺序

console.log(100);

setTimeout(()=>{
    console.log(200);
})


setTimeout(()=>{
    console.log(201);
})


Promise.resolve().then(()=>{
    console.log(300);
})

console.log(400);


// 100 400 300 200


// 为什么300比200先打印

为什么300比200先打印这里就引出了宏任务和微任务

什么是宏任务和微任务

在这里插入图片描述

宏任务包括：setTimeout setInterval Ajax DOM事件
微任务：Promise async/await
微任务比宏任务的执行时间要早

event loop 和DOM渲染

用event loop执行下面代码的过程

在这里插入图片描述
先到call stack执行第一行代码打印Hi

执行setTimeout时候是将定时器放到webAPIs中

最后马上打印出bye

这时候就马上启用eventlog的机制，一遍一般的启用callback queue

在这里插入图片描述

DOM渲染的时机

其实在上面的执行过程中我们还漏掉了一步 DOM的渲染
在这里插入图片描述
由图可知，同步代码全部执行完成后，call stack空闲了就会马上进行DOM的渲染，触发了eventlop之后，我们会把cb1放到call stack里面去有会触发DOM的渲染

为什么微任务比宏任务执行更快

先看下面一段代码
在这里插入图片描述
上面代码alert执行前刚好只会改变DOM的结构，但不会触发渲染只有点击alert的确定后页面才会渲染出变化

宏任务的发生是在DOM渲染后触发，如setTimeout
而微任务是在DOM渲染前触发，如Promise

看下面代码的执行过程就明白了

const $p1 = $('<p>一段文字</p>')
const $p2 = $('<p>一段文字</p>')
const $p3 = $('<p>一段文字</p>')


$('#container')
    .append($p1)
    .append($p2)
    .append($p3)

    // console.log('length',$('container').children().length);


    // alert('本次 call stack 结束,DOM结构已更新，但尚未触发渲染')


Promise.resolve().then(()=>{
    console.log('length1',
    $('#container').children().length
    );
    alert('Promise then')//DOM还没有触发，点击确定就会立即触发
})

setTimeout(()=>{
    console.log('length2',
     $('#container').children().length);
     alert('setTime out')//DOM已经渲染了
})