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

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

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

 #test { display: none; } 

 Element 

 $("#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中，小提琴只会在后台resize，即使整个浏览器窗口都显示为灰色，因此这不仅仅是处理时间的问题，而是更多的是Chrome在打开警报时完全冻结页面。