页面第一次打开和刷新的不同

<script>
    const p1 = "<p>我是p标签</p>"
    document.querySelector("body").innerHTML = p1
    alert('同步代码执行完毕')
    setTimeout(() => {
        alert('异步代码宏任务执行完毕')
    })
    Promise.resolve().then(() => {
        alert('异步代码微任务执行完毕')
    })
</script>

上面代码第一次打开页面是先弹出三次弹窗，在进行DOM渲染，但是刷新页面是先弹出两次弹窗，然后DOM渲染，最后再弹出‘异步代码宏任务执行完毕’，为何不一致？我认为的是应该一直都是第二种情况