关于DOM reflow ,CSS 里 display 对DOM的影响。
比如说,
页面中有一个弹出层内联样式为display:none;
当页面渲染完成后,我再去用页面的指定控件触发弹出层这时样式为display:block;
问题:
1.这样切换display的值会不会对DOM 的reflow产生影响,如果有请解释下。
2.在1基础上,如果有的话我可以设置 visibility:hidden这样减少对DOM reflow的影响否?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
首先,display的切换会触发reflow,而visibility不会。
因为w3c的wiki中写到,display的none的解释是This value causes an element to not appear in the document. It has no effect on layout.即display为none的元素会从常规流中删除。
而visibility的none的解释则为The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.意思是说当前元素不可见,但是仍然存在于布局中。
reflow我再继续写点。。。慢点更新。。。
引用:
Notes on HTML Reflow
CSS/Properties/visibility - W3C Wiki
CSS/Properties/display - Web Education Community Group
http://www.blogjava.net/bearrui/archive/2010/05/10/web_performance_repaint_relow.html
这个可以参考