zoukankan      html  css  js  c++  java
  • js中的宏任务和微任务详细讲解

    微任务有哪些

    Promise
    await和async
    

    宏任务有哪些

    setTimeout
    setInterval
    DOM事件
    AJAX请求
    

    看下面的代码

    <script>
    console.log(1)
    setTimeout(()=>{
        console.log("2")
    },0)
    Promise.resolve().then(()=>{
        console.log('3')
    })
    console.log(4)
    </script>
    
    我们发现打印的顺序是1-4-3-2
    为什么是这样的顺序
    先打印1-4这肯定是没有问题的
    为啥先打印3然后才是2
    因为3是Promise,Promise是微任务。
    2是setTimeout,它是宏任务
    微任务的执行时机比宏任务早。
    所以先执行的是3然后才是2
    

    我的结论

    先同步后异步,先微后宏
    微任务的执行时机比宏任务早哈~
    

    说说下面代码的执行时机

    <body>
        <div id="app"></div>
    <script>
    // 这一段是dom渲染的
    let app=document.getElementById("app")
    let cont='<p>我是p标签</p>'
    app.append(cont)
    // dom渲染结束
    
    console.log(1)
    setTimeout(()=>{
        console.log("2")
        alert('setTimeout2')
    },0)
    Promise.resolve().then(()=>{
        console.log('3')
        alert('3')
    })
    console.log(4)
    </script>
    </body>
    

    上面这一段代码的执行分析

    肯定是先执行1-4
    然后根据先微任务后宏任务
    就是输出3然后弹出3
    然后就是说输出2然后弹出setTimeout2 【错误的】
    因为微任务和宏任务之间还有一个DOM渲染
    所以然后是dom渲染,最后才是宏任务
    所以输出1-4后,执行的是DOM渲染。
    然后才是输出2然后弹出setTimeout2
    

    结论和运用的场景

    微任务》DOM渲染》宏任务 看下面的例子
    这个结论的运用场景
    我们都做过echarts.我们知道渲染echarts的时候。
    需要页面的DOM渲染完毕后,才能拿到节点进行渲染。
    所以有的小伙伴会请请求的时机放在monuted()这个生命周期中
    这样就可以确保返回来的数据肯定能够正常渲染在页面上。
    其实根据上面这个结论。
    你完全可以在created中去请求数据。返回来的的时候。
    DOM肯定渲染完了。因为请求是宏任务。
    宏任务的执行时机是在DOM渲染后的哈
    

    求求你了看官

    如果你觉得我写的还不错的话~~
    请你给我点个一个推荐或者关注我!!
    或者请我买一包辣条谢谢你了~~~
    
  • 相关阅读:
    Python基础——for/while循环
    Python基础——条件判断
    Python基础——字符串
    Python基础——输出[print()]与输入[input()]
    Python编程软件的安装与使用——Windows、Linux和Mac
    Python数据结构之三——dict(字典)
    微信【跳一跳】 opencv视觉识别 + 物理外挂
    tensorflow安装: win10 + RTX2060 + tensorflow1.15.0+ cuda10.0 + VScode
    FreeRTOS 任务与调度器(2)
    FreeRTOS 任务与调度器(1)
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/15582795.html
Copyright © 2011-2022 走看看