<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta <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>Copy the code

The execution result

The mutate output should only be once, according to the previous macro task (including the micro task in the macro task). Now output twice, I don’t understand.