绝对定位性能

时间:2011-06-01 16:01:14

标签: css

我有一位同事在他的CSS中使用了很多绝对定位。

我发现通常可以通过为html提供不同的结构来实现相同的视觉效果 - 实际上我倾向于避免使用绝对定位,除非我绝对需要。

问题 - 除了css复杂性之外,我的直觉是否是绝对定位的东西要谨慎使用?

5 个答案:

答案 0 :(得分:6)

过度使用绝对定位是一个设计问题,但并不是因为任何性能问题 - 我不知道任何性能方面的问题会让我在需要时使用绝对定位时会犹豫不决。 / p>

绝对定位的真正问题在于,您倾向于将布局与固定尺寸联系起来,如果您必须调整尺寸变化的东西,这会让事情变得完全疯狂。

例如,如果您想增加网站的字体大小会怎样?如果一切都是绝对定位的,那么你将需要付出巨大的努力来重新调整一切。

同样,绝对定位几乎总是意味着整个布局的位置和大小以像素为单位,而不是em单位或百分比。再次,使用像素大小调整没有任何问题,但当人们尝试自己调整网站时(例如使用缩放或放大镜,或只是更改字体大小等),它确实会产生可访问性问题。

您是否尝试在各种移动设备上查看自己的网站?在较小的屏幕尺寸上观看时,设计严格的网站通常是最差的。更好的流畅设计只适用于您使用它的地方,而不是必须拥有一个完全独立的移动网站。

答案 1 :(得分:5)

对我来说,在相对定位的元素中使用绝对定位 (比如在页脚中),可以节省时间。当你必须改变布局(列,标题......)时,在任何地方使用它都会很麻烦。

答案 2 :(得分:1)

如果可以,我也总是尽量避免绝对定位。因为它最终会让事情变得更难。但有时我真的没有选择。

答案 3 :(得分:0)

问题被问到很多年后,情况看起来有点不同。触摸屏,移动设备和常规桌面浏览器中缩放功能的发展消除了绝对布局的所有负面影响。轻松缩放可以避免不必要的绝对定位。根据需要设计您的屏幕。几乎任何最近的操作系统/浏览器都可以轻松扩展字体,图片,绝对坐标和大小。

大多数操作系统都有合理的默认dpi(每英寸点数)设置,浏览器配置时考虑了屏幕分辨率。拿任何高分辨率平板电脑。 " font-size:10px"在你的CSS中实际上会多次产生文本"更高的"以实际屏幕像素测量时。

至于性能,它不像静态布局那样不需要浏览器来计算元素的大小和位置。布局引擎仍然必须执行静态定位和大小调整规则之后的计算。绝对布局只允许开发人员明确指定这些规则。

可以说,绝对定位甚至可能需要从浏览器到布局元素的更少工作。拥有100个子静态布局需要评估99个元素的位置和大小,以便定位第100个元素。绝对定位明确告诉浏览器将第100个孩子放在哪里。

我自己没有运行任何基准测试,但不太可能在不同类型的布局之间存在性能差异。

答案 4 :(得分:-1)

遵循这些有趣的性能测试https://www.artlebedev.com/tools/technogrette/html/browser-performance/

  

对于交互式元素,最好使用位置:绝对。

但是在歌剧中,它是“更好的”(表现很少提高)。