Box-shadow影响比例表现

Question

我正在使用transform:scale css属性来缩放图像数组并以fps为单位测量性能。

测量性能后，速度非常慢。结果只有20fps。 阅读了一些关于如何提高性能的技巧。大多数情况下，他们建议不要使用box-shadow，因为它非常重，可能会降低性能。 所以，我设置box-shadow:none并再次测量性能。不幸的是，它给出了相同的结果。

出于好奇，我设置box-shadow:1px 1px 1px black来检查性能。我对性能的期望是它更慢，因为存在盒子阴影。

但在测量了性能后，它从20fps - 50fps提升。任何想法，因为这是什么原因？我没有想法。

感谢。

Answer 1

可能是，其他东西给你的测量性能为20fps，也没有盒子阴影。在给了box-shadow一些值之后，使用box-shadow会出现性能问题，并且它比以前更慢...

在这里阅读一些好的信息和想法：

http://cubiq.org/performance-tricks-for-mobile-web-development

http://tobiasahlin.com/blog/how-to-animate-box-shadow/（如何制作具有更流畅性能的盒子阴影）

还可以通过使用图像而不是慢速CSS属性来检查这个想法（来自第一个链接的屏幕截图 - 搜索“box-shadow”）：

我希望，其中一些想法和信息可以帮助您提升表现。

干杯。

Answer 2

我发现将will-change: transform应用于元素我会大大改变性能。我看到严重的性能问题会导致应用了filter: box-shadow(...)的元素，但添加适当的will-change属性几乎可以立即解决这个问题。