<!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>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
<script>
var outer = document.querySelector('#outer');
var inner = document.querySelector('#inner');
new MutationObserver(function(a,b){
console.log('mutate');
}).observe(outer, {attributes: true, });
function onClick(){
console.log('click');
setTimeout(function(){
console.log('timeout');
}, 0);
Promise.resolve().then(function(){
console.log('promise');
});
outer.setAttribute('data-random', Math.random());
}
inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);
inner.click();
//控制台输出顺序
// click
// click
// promise
// mutate
// promise
// timeout
// timeout
</script>
</body>
</html>
MutationObserver，Promise.then是微任务，setTimeout宏任务，微任务和宏任务都是异步执行，主线程执行完（click）后，到微任务，再到宏任务。
同级别任务按照出现顺序先后执行，所以主线程先执行完inner的onclick事件后冒泡再到outer的click执行，
这样微任务序列为inner的promise.then,MutationObserver,外部的promise.then
宏任务就是inner的setTimeout，outer的setTimeout
有帮助或启发麻烦点个采纳【本回答右上角】，谢谢~~