Javascript 为什么在发出警报之前不显示元素？

在这个简单的示例中，为什么在警报出现之前没有显示

#test

元素

jQuery

css（）

方法不应该是同步的吗

#test {
  display: none;
}

更新：

---

这种行为在Chrome 52.0.2743.116 m版Windows 10上表现出来。

它会同步更改样式，您会注意到，如果您选择

但是style对象的更改会触发一条到页面呈现器的重绘请求消息，并在浏览器空闲时处理该消息，这是在该脚本例程结束之后

不过，这取决于浏览器。在Edge中效果很好，元素立即显示出来，但在Chrome和Vivaldi中则不然

查看浏览器如何处理此问题的另一个测试：

---

如果调整浏览器窗口的大小，JSFIDLE将缩放（每个区域保持相同的相对大小）。如果在警报打开的情况下调整Vivaldi浏览器的大小，它不会这样做。事实上，如果你把它变小，然后显示警报，然后再把它变大，你只会在新的空间中得到一个灰色区域，直到你关闭消息框。在Edge中，即使整个浏览器窗口变灰，小提琴也会在背景中调整大小，因此这不仅仅是处理时间的问题，更重要的是，当警报打开时，Chrome会完全冻结页面。

好吧，这似乎对我有效（Windows7上的Firefox47.0.1）。现在无法向您发送屏幕截图，但在显示警报时，我可以清楚地看到DOM上呈现的“Element”单词。是的，在Firefox 47.0.1中，我也适用于此，在Chrome 52.0.2743.116 m版上观察到了行为。我也面临同样的问题。有人可以帮助你，如何在Chrome浏览器中使用或修复它？这里是一个例子（+1），换句话说，在一些浏览器中，对象的样式状态和它在屏幕上的外观之间的关系是异步更新的，不管样式如何更新。谢谢您的回答。这太糟糕了。但我想警报对话框已经不再使用了，所以…@apsillers确实如此。另一个测试-编辑-从注释移动到answer@AndreaCasaccia-如果您想在某些JS将该JS放入超时回调函数之前保证重新绘制

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

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

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