绝对定位性能

Question

绝对定位性能

css

8

我有一个同事在CSS中经常使用绝对定位。

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

问题 - 除了CSS复杂性之外，我的直觉是否正确，绝对定位是否应该被谨慎使用？

- BonyT

6个回答

7

对我来说，在相对定位元素（例如页脚内）中使用绝对定位可以节省时间。如果你必须更改布局（列，标题等），则在任何地方都使用它可能会很混乱。

- ecchymose

2

多年之后，事情看起来有些不同了。触摸屏、移动设备和普通桌面浏览器缩放能力的进化消除了绝对布局的所有负面影响。简单的缩放使得避免绝对定位的努力变得不必要。您可以随心所欲地设计您的屏幕。在几乎任何最新的操作系统/浏览器中，字体、图片、绝对坐标和尺寸都可以很容易地自适应缩放。

大多数操作系统都有合理的默认DPI（每英寸点数）设置，并且浏览器是以屏幕分辨率为基础进行配置的。拿一个高分辨率的平板电脑来看。在CSS中使用“font-size: 10px”实际上会导致文本在真实屏幕像素中被放大多次。

至于性能方面，静态布局并不意味着浏览器不需要计算元素的大小和位置。布局引擎仍然需要执行那些遵循静态定位和大小规则的计算。绝对布局只是允许开发人员明确指定这些规则。

可以认为，绝对定位甚至可能需要更少的工作量来排列元素。如果有100个子元素，静态布局需要计算99个元素的位置和大小，以便定位第100个元素。绝对定位明确告诉浏览器放置第100个子元素的位置。

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

- oᴉɹǝɥɔ

不带评论的负评并没有什么帮助。你应该指出你认为有哪些错误。 - oᴉɹǝɥɔ

1

如果可以的话，我也总是尽量避免使用绝对定位。因为最终这往往会让事情变得更加困难。但有时候我真的没有选择。

- RobinJ

0

在进行这些有趣的性能测试https://www.artlebedev.com/tools/technogrette/html/browser-performance/之后

对于交互元素，最好使用position:absolute。

但在Opera中，这样做会“更好”（性能略有提升）。

- WDX

那篇帖子已经有11年了，Opera甚至已经不存在了，所有其他浏览器都已经从底层大规模重写，而且它也不包括Edge。 - Josh Lee

0

Chrome 在处理动画绝对位置时存在问题；当许多元素重叠或进出视图时。CSS 动画可以，但使用 JavaScript 移动元素应该这样做：

element.style.transform = "translate3d(" + x + "px, " + y + "px, " + z + "px)"

如果will-change无法进行足够的优化，您需要使用GPU合成层，这将修复它，但会为移动用户增加更多的RAM和GPU成本。在Chrome中使用“绘画闪烁”工具查找可以使用以下CSS提高性能的元素：

    -webkit-transform: translateZ(0);
    transform: translateZ(0); /* make GPU composite layer */
    will-change: transform, top, left; /* try optimize */

使用静态定位根本没有性能问题！

通过 CSS 的 calc() 和简单的数学计算和缩放，您可以实现远超其他方式的完美定位。

您需要非常清楚在页面上哪些内容应该根据屏幕的哪一侧进行调整大小。例如，一个真实的纸牌应该相对于视口的高度来确定每个细节。在所有可以使用em单位的地方都使用vh。这就是所谓的静态绝对定位。

使用动态绝对定位，您可以获得无法想象的控制力。当屏幕重新加载、刷新、重绘、调整大小或旋转时，Javascript 需要调整绝对位置和尺寸。至少在页面重新加载时执行此操作：

<script> 
    var screenHeight = Math.max(document.body.offsetHeight, html.clientHeight, html.offsetHeight);        
    var screenWidth = Math.max(document.body.offsetWidth, html.clientWidth, html.offsetWidth);
</script>

在每个定位元素e上设置：

e.style.left = screenWidth*scaleFactorX1
e.style.width = screenWidth*scaleFactorX2
e.style.top = screenHeight*scaleFactorY1
e.style.height = screenHeight*scaleFactorY2

如何计算比例因子由您决定。但是，每个唯一比例因子的标准公式为：

scaleFactorX1 = distance_from_left / screenWidth
scaleFactorX2 = width_of_element / screenWidth
scaleFactorY1 = distance_from_top / screenHeight
scaleFactorY2 = height_of_element / screenHeight

我建议您使用笔和纸进行设计和计算。您可以通过制作横向和纵向旋转的两份纸质线框图设计来获取相同比例因素，以确定需要进行缩放、折叠、vmin、vmax等值的内容。

- Dan Froberg

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Spudley · Accepted Answer

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

绝对定位一切的真正问题在于你倾向于将你的布局与固定大小联系起来，如果你必须调整大小，这可能会使事情变得完全混乱。

例如，如果你想增加网站的字体大小会发生什么？如果一切都是绝对定位的，你将不得不付出巨大的努力来重新对齐一切。

同样，几乎总是意味着整个布局是以像素而不是em单位或百分比的方式定位和缩放。再次强调，使用像素尺寸没有问题，但当人们试图自己调整网站时（例如使用缩放或放大器，或者只是更改字体大小等），它确实会生成可访问性问题。

你是否尝试在各种移动设备上查看你的网站？刚性设计的网站通常在小屏幕上查看时最糟糕。最好拥有一个流体设计，在任何地方都可以使用，而不必为移动设备单独创建一个完全不同的网站。