Is display:none缓解浏览器渲染
is display:none easing the browser rendering?
所以如果我们有一个div是不可见的,尽管不同的情况下,z-index
, opacity,
父母的overflow:hidden
和相对/绝对定位等…
是否有必要或只是更好地设置display:none
到该div ?我可以想象浏览器将跳过display:none
div,而它将不得不做一些计算,否则相同的结果。
我问这个,因为我在动画和设置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:hidden
、width:0;height:0
……参考书。
这意味着使用display:none
可以使浏览器跳过一些步骤。
所以我认为这是部分的肯定:使用display:none
可能会稍微简化渲染过程。
无论使用何种方法,"easing"在页面加载方面的含义仅取决于CSS和html内容的大小。
如果你指的是客户端的CUP周期,那么不会有任何明显的区别。如果你的逻辑很复杂,那么你可能会感觉到hit and try的效率差异。
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- 有时数据是't显示在浏览器中
- 使图像在单击时展开到不大于浏览器
- fetch() 函数未在 Ubuntu Chromium 浏览器上定义
- 不同浏览器中的空白字符正则表达式行为
- 在Windows 10中自动执行例行程序(主要与浏览器交互)
- Windows形成web浏览器控件和Javascript更改的DOM
- 如何临时暂停浏览器渲染,然后恢复整个页面
- 使用angularjs向浏览器发送servlet响应(下载功能)
- 是什么让一个“;Uncaught RangeError:超过了最大调用堆栈大小“;错误(Chrome,在其他浏览器中显示
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 禁用(而不是隐藏)浏览器滚动条
- jquery代码在Mozilla中有效,但在其他浏览器上无效
- 如何使用modalDialog来显示可以在所有浏览器中工作的弹出窗口
- style.display="块“;在所有最新的浏览器中
- CSS3属性display:box/display:flexbox是否有交叉浏览器(IE7-8)支持的js文件
- Is display:none缓解浏览器渲染
- 浏览器性能:' display:none ' vs .detach() '