<分区>
很明显，使用 CSS3 阴影、透明度、效果和其他功能会显着降低某些手机/平板电脑上的整体页面性能，但我无法找到一种方法来确定设备性能是否不足以处理“重"CSS3 特性。我会创建两个版本的 CSS:用于廉价手机/平板电脑的精简版和用于 PC 的完整版等等；但我应该如何选择呢？使用媒体查询看起来不是一个温和的选择。
最佳答案
这是一个相当复杂的话题，没有史诗很难正确回答。我尽量保持简短:
Chrome 开发工具提供了许多方便的特性来分析 JS 和 CSS 特性。作为第一步，我建议使用时间线，激活“JS Profile”、Memory 和 Paint 的捕获，然后分析最大的彩色 block (其中有很多计算/layouting/painting needed to be done. 更多详细信息:https://developer.chrome.com/devtools/docs/timeline
一个相当流行的误解是“长而大量的选择器”导致 Perf 的谣言。问题。根据我所见、调试和阅读的优秀性能专家，如 Paul Lewis ，这通常不是瓶颈。计算和应用 CSS 值非常快。取而代之的是绘画和布局，尤其是在使用动画时成本很高。有一些技巧，例如使用 translate 代替左/顶部定位，使用 will-change 属性等等。您可以在此处找到有关原因的概述:https://csstriggers.com/
结论:媒体查询可能不是一个完美的解决方案，但也不错，因为选择器的数量可能无关紧要。
关于performance - 使用 CSS3 功能检测不良性能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38012818/