求助，js运行机制！！！执行结果按照之前一次宏任务(包括宏任务里的微任务)完后渲染一次的说法，应该是只输出一次muta

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            padding: 30px;
            background-color: aqua;

        }

        .inner {
            height: 100px;
            background-color: brown;
        }
    </style>
</head>

<body>
    <div class="outer">outer
        <div class="inner">inner</div>
    </div>
</body>
<script>
    var outer = document.querySelector('.outer');
    var inner = document.querySelector('.inner');
    new MutationObserver(function () {
        console.log('mutate');
    }).observe(outer, {
        attributes: true
    });
    function onClick(i) {
        console.log('click'+i);
        setTimeout(function () {
            console.log('timeout'+i);
        }, 0);

        Promise.resolve().then(function () {
            outer.setAttribute('data-random'+i, Math.random());
            console.log('promise'+i);
        });

        outer.setAttribute('data-random'+i, Math.random());
    }

    // …which we'll attach to both elements
    inner.addEventListener('click', ()=>{
        onClick(1)
    });
    outer.addEventListener('click', ()=>{
        onClick(2)
    });
    inner.click()
</script>

</html>

执行结果

按照之前一次宏任务(包括宏任务里的微任务)完后渲染一次的说法，应该是只输出一次mutate的。现在输出两次，不能理解。