使用 Display: None 属性，真的值得吗？ [关闭]

Posted 2023-02-22

【中文标题】使用 Display: None 属性，真的值得吗？ [关闭]

【英文标题】：Using Display: None property, Is it really worth? [closed]

【发布时间】：2020-08-15 18:27:16

【问题描述】：

我正在开发一个 Web 应用程序，我在其中构建了 2 个 UI。一种适用于桌面用户，另一种适用于移动用户。我想过使用 Display: None; CSS 属性。对于较大的屏幕或较小的屏幕，它将被切换。这种方法会影响页面的性能吗？有没有有效的方法来处理这个问题？

【问题讨论】：

我猜您正在使用媒体查询更改显示。它不会影响您的页面性能。另一种方法是javascript。有第三方脚本可以识别是移动屏幕还是桌面，通过使用你可以改变显示样式但是媒体查询比这个更快

对@akajash 有帮助吗

它可能会影响一点点，但影响不大。但是，引导程序是创建响应式 Web 应用程序的最佳方式，因为它会根据设备的屏幕尺寸在单个 UI 中自动调整布局。

是的，我正在使用媒体查询来执行此操作！它工作得很好。但是我提出这个问题是因为我担心这会影响页面的加载速度

【参考方案1】：

是的，使用display: none; 肯定会影响页面性能。

display:none 将从文档流中删除整个元素并导致整个页面重排，而visibility:hidden 隐藏一个元素但保持元素的盒子模型..

另外一种可能的选择是Opacity，如果我们想创建透明或淡化效果，可以使用它。

visibility:hidden vs display:none vs opacity:0

【讨论】：

非常感谢！所以结束你的陈述，添加 Display: none;不呈现 html 的那部分？

"display:none 将从 DOM 树中删除整个元素" - 错误：它将保留在 DOM 树中，使用display:none 不会丢失任何父元素，它们只是不会参与渲染。

display:none will remove the whole element from DOM tree no 元素仍在 DOM 树中，但未显示。与visibility:hidden 的区别在于，更改可见性会保留元素占用的区域，而display:none 不会。