用CSS3特性检测不良性能

Question

显然，使用CSS3阴影、透明性、效果和其他特性可以显著降低某些手机/平板电脑的总体页面性能，但我无法找到一种方法来确定设备性能是否足以处理“繁重”的CSS3功能。我会创建两个版本的CSS: lite用于廉价手机/平板电脑，full用于PC等；但我应该如何选择呢？使用媒体查询似乎不是一个适度的选项。

Answer 1

这是一个相当复杂的话题，没有史诗就很难正确回答。我尽量保持简短和简单：

工具

Chrome工具为分析JS和CSS特性提供了许多方便的特性。作为第一步，我推荐时间线，激活“JS配置文件”、Memory和Paint的捕获，然后分析最大的彩色块(需要进行大量的计算/布局/绘画)。更多信息：https://developer.chrome.com/devtools/docs/timeline

如何(以CSS性能为重点)

一个相当流行的误解是关于“长而高数量的选择器”的谣言。问题。据我所见，调试和阅读优秀的性能Pros如保罗·刘易斯，这通常不是瓶颈。计算和应用CSS值非常快。相反，绘画和出游，特别是当使用动画是昂贵的。有一些技巧，比如使用translate而不是左/顶定位，使用will-change属性等等。您可能会发现一个关于什么原因的概述：https://csstriggers.com/

结论:媒体查询可能不是一个完美的解决方案，但也不错，因为大量的选择器可能并不重要。

Answer 2

也许试着用屏幕分辨率来选择？预算设备几乎总是有坏屏幕:)