宏任务，微任务浅析

moment
1,052 阅读1分钟 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>browser</title>
</head>
<body>
    <div id="app"></div>
    <!-- js主线程单线程的 ajax setTimeout 在浏览器会开多线程-->
    <!-- 代码从上到下 执行 会先执行同步 再执行异步-->
    <!-- 宏任务（慢）mac setTimeout 微任务（快）mic Promise.then    异步任务 -->
    <!-- vscode live server可以启动本地服务 -->

    <!-- setImmediate 宏任务 ie下生效  大约要20ms--> 
    <!-- setTimeout 宏任务 4ms -->
    <!-- MessageChannel 宏任务 消息通道 小于4ms-->

    <!-- MutationObserver 微任务 -->
    <!-- Promise.then 微任务 -->
<script>

    let channel = new MessageChannel();
    channel.port1.postMessage('i love you');

    channel.port2.onmessage = function (e) {
        console.log(e.data);
    }


    // setImmediate(function(){ 
    //     console.log(32);
    // });
    
    let observer = new MutationObserver(function(){
        console.log('节点已更新');
        console.log(app.children.length)
    });

    observer.observe(document.getElementById('app'),{
        childList:true
    });
    for(let i=0;i<20;i++){
        app.appendChild(document.createElement('p'));
    }
    for(let i=0;i<20;i++){
        app.appendChild(document.createElement('span'));
    }


    setTimeout(function(){
        console.log('timeout');
    },20);
    Promise.resolve().then(function(){
        console.log('promise');
    });

    //vm.$nextTick(function(){}); 异步执行 所有的宏任务和微任务
</script>
</body>
</html>
avatar
文章
阅读
粉丝