浏览器中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