Is display:none缓解浏览器渲染

is display:none easing the browser rendering?

本文关键字:浏览器 display none Is      更新时间:2023-09-26

所以如果我们有一个div是不可见的,尽管不同的情况下,z-index, opacity,父母的overflow:hidden和相对/绝对定位等…

是否有必要或只是更好地设置display:none到该div ?我可以想象浏览器将跳过display:nonediv,而它将不得不做一些计算,否则相同的结果。

我问这个,因为我在动画和设置display:none需要一个回调时,动画完成意味着css3过渡应该避免。(我知道一些浏览器提供了一种从css3过渡中获得回调的方法,但对我来说不够"通用"。)

另一种说法是:

display:none回流/重画div比用width:0;height:0, left:-100000px…更快吗?

?

UPDATE 2

我发现,在chrome中,如果你有一个svg内的div与display:none你不能引用它使用<use xlink:href="">。如果你使用display:none以外的任何东西,比如visibility:hiddenwidth:0;height:0……参考书。
这意味着使用display:none可以使浏览器跳过一些步骤。
所以我认为这是部分的肯定:使用display:none可能会稍微简化渲染过程。

无论使用何种方法,"easing"在页面加载方面的含义仅取决于CSS和html内容的大小。

如果你指的是客户端的CUP周期,那么不会有任何明显的区别。如果你的逻辑很复杂,那么你可能会感觉到hit and try的效率差异。