浏览器中js操作DOM 与其他JS代码执行顺序

Question

如下代码：

document.querySelector(".div-bgd").style.display = "block";

document.querySelector(".load_div").style.display = "block";

console.log(1)

alert(1)

浏览器运行环境中，为何是先执行 console 和 alert 语句，而不是先执行前面两个样式改变的语句呢?

例子见下：

codepen