css - CSS 相对位置对 DOM 渲染有性能影响吗？

Question

当我应用display 样式时，我有一个习惯在我的大多数DOM 元素上设置position: relative。

.something {
    display: block;
    position: relative;
}

这是我几年来一直在做的事情，最近我与某人进行了讨论，他说设置其中的许多设置将减慢网络浏览器中的呈现。

CSS 规范或指南中是否有任何声明应谨慎设置它？

我正在寻找一个具体的答案，说明 position: relative 在性能上有 X 成本，或者没有成本的可信引用。

Answer 1

之前建议您尝试切换 relative 并观察到它是“瞬时”的答案是推测性的、定性的和不准确的。

打破习惯。不必要的 relative 会减慢渲染速度。我曾经观察到通过删除一个不必要的 relative 实例，列表组件(想想几十到几百行)的渲染速度意外提高了 40%。

它还向你的代码的 future 读者/维护者(甚至可能是 future 的你)暗示 relative 有一些开始的目的，并且 future 的人可能会犹豫是否要进行更改结果。切勿留下不必要的代码。