关于DOM reflow ,CSS 里 display 对DOM的影响。

发布于 2022-08-28 23:02:57 字数 211 浏览 19 评论 0

比如说,
页面中有一个弹出层内联样式为display:none;
当页面渲染完成后,我再去用页面的指定控件触发弹出层这时样式为display:block;
问题:
1.这样切换display的值会不会对DOM 的reflow产生影响,如果有请解释下。
2.在1基础上,如果有的话我可以设置 visibility:hidden这样减少对DOM reflow的影响否?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

↙温凉少女 2022-09-04 23:02:57

首先,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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文