为什么警报前未显示元素？

Question

为什么#test在警报出现之前没有显示该元素？

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

#test {
  display: none;
}



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



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

更新：

我的行为在Windows 10的Chrome版本52.0.2743.116 m上表现出来。

Answer 1

它会同步更改样式，并且您会注意到，如果您在下一行读回该值并将其显示出来。

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

但是样式对象的更改会触发重新渲染请求消息到页面渲染器，并且在浏览器空闲之后（即此脚本例程结束之后）立即处理该消息。

不过，这取决于浏览器。在Edge中可以正常工作，并且元素可以立即显示，但在Chrome和Vivaldi中则不能。

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