CSS属性及其对性能的影响？

Question

我们都知道CSS属性确实会对性能产生影响，但是我找不到真正的答案-所有属性都会产生相同的影响吗？

Answer 1

在任何地方都没有官方的声明说“并非所有属性都会对性能产生相同的影响”，但是存在如此多的具有多种效果的属性，使得不可思议呈现一个盒子阴影与下载和绘制背景图像，渲染Flex布局或更改字体具有相同的性能影响。

但是，如果您想自己进行测试，则可以创建一千个div元素，为它们提供一个非常大的框阴影，然后滚动页面。然后将框阴影替换为边框，一些填充，背景图像等，然后查看页面滚动效果是否更好。您可能需要在自己喜欢的浏览器中关闭硬件加速，然后才能感觉到明显的不同。但是肯定在那里。

Answer 2

CSS中肯定有一些属性对浏览器性能的影响大于其他属性……border-radius和box-shadow就是很好的例子。

除了属性，定义属性值的方式也会影响性能。例如，使用calc()如果使用过度，将会开始影响性能。

有些选择器的使用成本更高，而后代选择器也是如此。

我建议您通读this article by John Otander。它有些旧，但仍然有效。底部有很多链接供您进一步阅读。但这将为您提供有关房地产表现的一些要点。