DOM渲染会在微任务执行完毕后执行？
现代JavaScript教程中给出的顺序
微任务会在DOM渲染之前完成
Chrome浏览器的实验
-
实验步骤 点击按钮触发两个Promise微任务，在第一个微任务中修改DOM，在第二个微任务中debugger，暂停代码。
-
实验期望：
-
如果页面已经更新，则说明在第二个微任务完成前九已经渲染DOM了 -
如果页面还未更新，则说明微任务未完成前不会渲染DOM
- 测试代码
<!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="box"></div>
<button id="btn">按钮</button>
<script>
let div = document.getElementById('box')
let btn = document.getElementById('btn')
btn.addEventListener('click', () => {
Promise.resolve().then(() => {
console.log('微任务1')
div.innerHTML = '微任务1'
}).then(()=>{
debugger
console.log('微任务2')
})
})
</script>
</body>
</html>
- 实验结果 在微任务1结束后，微任务2开始前就已经渲染DOM了
在 微软Edge浏览器上测试
结论
现代JavaScript教程网站上认为在一次事件循环中，所有的微任务会先于DOM渲染执行。但经过浏览器实际测试发现，在微任务之间也会进行DOM渲染。
