浏览器中微任务如何创建微任务（测试代码在文末）使用MutationObserver（观察者）监听DOM节点变化产生记录D

如何创建微任务（测试代码在文末）

使用 MutationObserver（观察者）监听DOM 节点变化产生记录DOM变化记录的微任务（所有的DOM操作完成后才触发使回调函数进入微任务队列）

调用 Promise.resolve() 或 Promise.reject()

调用 queueMicrotask(()=>{})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>宏任务与微任务</title>
</head>
<body>
    <h1 id="title">
        <span>宏任务与微任务</span>
        <span id="btn">点击改变</span>
    </h1>
    <script>
        var btnEl = document.getElementById('btn');
        var h1El = document.getElementById('title');

        /* 1、使用MutationObserver监听DOM节点变化创建微任务 */
        var observer = new MutationObserver((val)=>{
            console.log('执行 MutationObserver 创建的微任务' + val);
        });
        observer.observe(h1El,{ attributes: true, childList: true, subtree: true });
        btnEl.addEventListener('click',()=>{
            h1El.removeChild(btnEl);
            console.log('执行操作dom产生的宏任务');
        })

        /* 2、通过调用 promise.resolve()或 promise.reject()创建微任务 */
        var promiseObj = new Promise((resolve,reject)=>{
            if(true){
                resolve('执行 promise.resolve 产生的微任务');
            }else {
                console.log('执行 promise.reject 产生的微任务');
                reject('执行 promise.reject 产生的微任务');
            }
        });
        setTimeout(()=>{
            promiseObj.then(()=>{
                console.log('在下一个宏任务中执行了 promise.resolve 产生的微任务');
            })
        })

        /* 3、queueMicrotask(()=>{})创建微任务 */
        queueMicrotask(()=>{
            console.log('在当前宏任务执行 queueMicrotask 产生的微任务');
        });
    </script>
</body>
</html>