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

Question

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

不应该jQuery css()方法是syncronous？

#test { 
    display: none; 
} 

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

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

UPDATE：

这种行为体现了我在Chrome版本52.0.2743.116男，10的Windows

Answer 1

它改变了风格同步，你会注意到，如果你read back the value on the next line and show it。

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

但样式对象的变化触发重绘请求消息的页面渲染，那就是作为浏览器变为空闲时，这是该脚本程序结束后尽快处理。

虽然这取决于浏览器。在边缘它工作正常，并且元素立即显示，但在Chrome和Vivaldi它不是。

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