如果我在页面上有很多DOM并且我将它们全部设置为显示：none，则浏览器仍然会快速响应（滚动速度很快，页面感觉很快）。
但是，如果我可见：隐藏元素，浏览器就像它们全部在屏幕上绘制一样慢。
有人可以详细解释为什么会这样吗？
答案 0 :(得分：21)
在某种程度上，它们被绘制（但不是真的）：浏览器为它们保留空间，因此在布置可见的项目时必须考虑这些项目。
该框是不可见的（完全透明，没有绘制任何内容），但仍然影响布局。如果元素具有可见性，则该元素的后代将是可见的：可见（这在IE版本7中不起作用）。
如果您指定display: none，则浏览器仅关注和布局可见的浏览器。它根本不需要考虑其他因素。
根据您的可见/不可见比率和元素数量，这可能会有所不同。
答案 1 :(得分：11)
想象一幅画
你有一个白色的背景，并在一小时内开始绘制一个有很多细节的苹果，然后用另一层白色涂料完全覆盖它。
那是visibility。
display:none就像从一开始就没有绘制它。当然，首次加载时速度更快。
当您使用display:none时有一些缺点：当您将其切换回block（或inline等）时，您将不得不开始绘制绘画，但使用可见性浏览器正在刮擦最后一层油漆而且它又回来了。因此visibility在这种情况下更快。
但请记住，当您使用visibility:hidden时，元素会保留其在流程中的位置，因此周围的元素不会让步。
如果您需要技术说明，请查看David Baron's talk。
答案 2 :(得分：3)
这非常有趣。从本质上讲，visibility: hidden在技术上与opacity: 0相同？
我不是浏览器制造商，但如果隐藏可见性的元素没有被渲染或绘制，而是被绘制为具有元素尺寸的透明正方形，那么这不是一个巨大的性能提升吗？至少在尺寸已知的情况下。
答案 3 :(得分：2)
使用visibility:hidden，它们都会在屏幕上绘制，但用户无法看到它们。
相反，display:none没有绘制
答案 4 :(得分：2)
使用visibility: hidden必须计算它们的大小，以便为它们保留适当的空间量。它们实际上仍然被绘制出来。
答案 5 :(得分：0)
答案 6 :(得分：0)
因为display: none实际上从DOM中删除了元素。 visibility: hidden只是让它们看不见，但它们仍在那里。
您可以注意到差异，因为表单输入字段display: none在您提交时根本不会包含在表单中;只有visibility: hidden设置的输入字段仍然存在。好吧，至少，这是我的经验 - 其他浏览器可能表现不同。
答案 7 :(得分：0)
使用display:none，浏览器不会初始化这些元素，也不会呈现内容。使用visibility:hidden时不是这种情况，{{1}}初始化这些元素但只隐藏它们。