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

Answer 1

了解下js引擎线程和GUI渲染线程的执行顺序
setTimeout解决GUI渲染线程阻塞问题