如果我在页面上有很多DOM并且我将它们全部设置为显示:none,则浏览器仍然会快速响应(滚动速度很快,页面感觉很快).
但是,如果我可见:隐藏元素,浏览器就像它们全部在屏幕上绘制一样慢.
有人可以详细解释为什么会这样吗？
Fel*_*ing 23
在某种程度上,它们被绘制(但不是真的):浏览器为它们保留空间,因此在布置可见的项目时必须考虑这些项目.
该框是不可见的(完全透明,没有绘制任何内容),但仍会影响布局.如果元素具有可见性,则该元素的后代将是可见的:可见(这在IE版本7中不起作用).
如果您指定display: none,浏览器只关心和布局可见的浏览器.它根本不需要考虑其他因素.
根据您的可见/不可见比率和元素数量,这可能会有所不同.
Knu*_*Knu 11
想象一幅画.
你有一个白色的背景,并在一小时内开始绘制一个有很多细节的苹果,然后用另一层白色涂料完全覆盖它.那是visibility.
display:none就像从一开始就没有画它.当然,首次加载时速度更快.
当你使用display:none它时有一些缺点:当你将它切换回block(或inline等)时,你将不得不开始绘画,但是使用可见性浏览器只是抓住最后一层油漆然后又回来了.所以visibility在这种情况下更快.
但是请记住,当你使用visibility:hidden元素时,有一点保留它在流中的位置,因此它周围的元素不会让步.
如果你想要技术解释,请查看David Baron的演讲.