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

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

它会同步更改样式，如果您read back the value on the next line and show it，您会注意到。

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

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

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

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