将物体通过巨大的距离“隐藏”起来是否会有性能损失？

Question

我在网站上操作内容时，常用的一个做法是将元素绝对定位，左侧（或有时顶部）设为大约-2000px，以确保它不会在屏幕上显示。

现在，我知道我可以使用“display:none”使我的对象消失，但是有些元素不会很好地处理未显示的情况，并且有时我需要引用一些属性，例如其宽度，这在“display”属性设置为“none”时无法访问。因此，我经常将元素定位到屏幕外面隐藏起来。

那么，我的假设是：

由于对象不会呈现在屏幕上，因此当我使用“left:2000px”时与使用“left: 200000000px”时，网站的性能不应该有任何差别*。

因此，我认为如果使用以下代码，则两个页面的性能没有区别：

第一页：

<div style="height:100px; width:100px; left:-2000px"></div>

第二页：

<div style="height:100px; width:100px; left:-200000000px"></div>

我的假设是否正确？如果该元素是两个给定页面之间唯一的区别，那么性能是否会有任何差异（不管多么微小）？

也就是说，加载时间、页面大小、响应速度或任何其他性能指标。

=================================

更新

如Michael所建议的那样，我已经对页面进行了分析，并发现以下问题：Spark正确地指出文件大小会影响加载时间。文件大小相差四个字节，对应着大约4毫秒的加载时间差异。

其次，我的极大左值在IE和Firefox中被正确解释，但在Chrome中未被识别。然而，考虑到性能差异似乎很小，我无法猜测为什么他们会决定将其限制在如此任意的数量之下。

- Andy F

---

如果您想隐藏一个元素但仍然想获取有关度量信息的选项，您也可以使用 visiblity:hidden;。 - Rob W

@Rob 但是 visibility: hidden 不会使元素从 DOM 流中消失吗？这样会影响周围元素的布局吧？ - Andy F

Answer 1

你可以尝试使用Firebug（或Chrome / Safari开发人员工具）来测试页面加载时间，但我非常怀疑是否会有任何差异。浏览器只关心元素的x，y，z坐标。无论这些坐标在屏幕上还是屏幕外，它们仍然只是三个离散的数据点。

- Michael Berkowski

Answer 2

当你说性能时，你是指加载时间吗？

如果你能测量剩余字节数的差异，如 left:-2000px 与 left:-2000000px，则 CSS 的加载时间可能会受到影响。如果是后者，加载时间确实需要更长的时间，但这与其是否“不可见”无关，仅与 CSS 大小有关。

因此，长话短说，不将其放在屏幕之外并没有任何区别，您仍然需要加载它。但是，数值越大，加载时间就越长。但在这种情况下，它非常小，不是问题。

例如加载时间...

left:-2000px = Input: 0.021KB, Output: 0.019KB
left:-2000000px = Input: 0.025KB, Output: 0.024KB

- Prometheus

---

刚想回答同样的问题 - 发送更多文本。这就是为什么常见做法是使用 left-indent: -999em; 而不是 (类似) 等效的 -9999px 的原因之一。 - peteorpeter

这是我没有考虑到的一个元素，尽管当你想到它时显而易见。是的，性能可能意味着加载时间，尽管我并不特别指的是加载时间 - 只要是任何衡量性能的方法都可以。 - Andy F