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

Why is element not being shown before alert?

本文关键字：显示 警告 元素 为什么      更新时间：2023-09-26

在这个简单的示例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中表现出来。

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

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

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

这取决于浏览器。在Edge中它工作得很好，并且元素立即显示，但在Chrome和Vivaldi中它不是。

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

相关文章：