为什么在警报之前没有显示元素？

Question

在这个简单的示例中,https://jsfiddle.net/4rsje4b6/1/为什么#test在警报出现之前元素没有显示？

jQuery css()方法不应该是同步的吗？

#test {
  display: none;
}

<span id="test">Element</span>

$("#test").css("display", "inline");
alert("Showed element!");

更新:

我在Chrome版本52.0.2743.116 m,Windows 10上显示此行为.

Answer 1

它会同步更改样式,您会注意到如果您回读下一行的值并显示它.

$("#test").css("display", "inline");
alert("Showed element!" + $("#test").css("display"));

但是样式对象的更改会触发对页面渲染器的重新绘制请求消息,并且一旦浏览器变为空闲,就会在此脚本例程结束后立即处理.

但这取决于浏览器.在Edge中,它工作正常,元素立即显示,但在Chrome和Vivaldi中则不然.

另一个测试,看看浏览器如何处理这个:如果你调整浏览器窗口的大小,JSFiddle将缩放(每个区域保持相同的相对大小).如果您在打开警报的情况下调整Vivaldi浏览器的大小,则不会这样做.事实上,如果你把它变小,然后显示警报,然后将其放大,你只需在新空间中获得一个灰色区域,直到你关闭消息框.在Edge中,小提琴只会在后台调整大小,即使整个浏览器窗口显示为灰色,因此这不仅仅是处理时间的问题,而是更多的是Chrome在打开警报时完全冻结页面.