Question

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

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

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

CSS规范或指南中是否有任何说明应谨慎设置的内容？

我正在寻找一个具体的答案，指出position: relative的性能成本是X，或者值得称赞的参考是免费的。

Answer 1

添加任何CSS总是会使您的代码变慢，但是对于这么小的东西，它是微不足道的，不值得担心。 display: block没什么特别的要求您设置位置值。重要很重要的一点是，除非您知道自己需要它，否则始终添加它是一种不好的做法。

我会放弃习惯，只在每个案例中使用position: relative。

如注释中所指出，position: static是默认设置。

编辑：

您提到正在寻找一些研究，以表明此CSS规则对性能的影响。这是有关该主题的精彩文章：

编辑，本地测试：

检查StackOverflow主页上的元素。每个帖子都是一个类为question-summary的元素。添加新的CSS规则：

.question-summary{
    position: absolute;
    position: relative;
}

确保两个规则均处于活动状态。然后选中并取消选中position: relative。请注意，它是瞬间发生的。这正在渲染一堆元素。 如果要进一步测试，请复制并粘贴question-summary div，然后添加数百个。然后重复测试。请注意浏览器如何立即呈现此效果。

编辑＃2：

那里有一些文章详细介绍了网络浏览器和浏览器引擎的工作原理，这很复杂，您需要对其进行研究。这似乎是一个不错的起点： http://taligarsiel.com/Projects/howbrowserswork1.htm#Webkit_CSS_parser

如果您想学习过去在网上找到的文章，则可能需要深入研究Web浏览器引擎的源代码。 Webkit是常见的开放源代码： https://webkit.org/

同样，如果您不想深入了解Web浏览器CSS解释，则需要依靠测试。开发人员通常将时间花在JavaScript而不是CSS上，所以没有很多。我确实找到了：

Answer 2

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

打破习惯。不必要的relative会降低渲染速度。我们曾经观察到通过删除relative的一个不必要的实例，列表组件（想想几十行到数百行）的渲染速度意外提高了40％。

这也向将来的代码阅读者/维护者（甚至可能是将来的您）暗示relative的目标是开始的，因此将来的人可能会犹豫不决。永远不要留下不必要的代码。