使用 CSS3 个特征检测性能不佳
Detect poor performance with CSS3 features
很明显，使用 CSS3 阴影、透明度、效果和其他功能会显着降低某些 phones/tablets 上的整体页面性能，但我找不到确定设备是否正确的单一方法性能不足以处理 "heavy" CSS3 特征。我会创建两个版本的 CSS：精简版用于预算 phones/tablets 和完整版用于 PC 等等；但我应该如何选择呢？使用媒体查询看起来不是一个温和的选择。
要不试试按屏幕分辨率来选择？预算设备几乎总是屏幕不好 :)
这是一个相当复杂的话题，没有 epics 很难正确回答。我尽量保持简短：
工具
Chrome 开发工具提供了许多方便的 JS 分析功能和 CSS 功能。作为第一步，我建议使用时间轴，激活 'JS Profile'、Memory 和 Paint 的捕获，然后分析最大的彩色块（需要大量 calcuations/layouting/painting待完成。更多详细信息：https://developer.chrome.com/devtools/docs/timeline
如何（CSS 注重性能）
一个非常普遍的误解是 "long and a high amount of selectors" 导致 Perf 的谣言。问题。根据我所见、调试和阅读的优秀性能专家，如 Paul Lewis, this is usually NOT the bottleneck. Computing and applying CSS values is extremely fast. Instead Painting and Layouting, especially when using animations is costly. There are tricks like using translate instead of left/top positioning, using the will-change property and many more. You may find an overview about what causes what here: https://csstriggers.com/
结论：媒体查询可能不是一个完美的解决方案，但也不错，因为选择器的数量可能并不重要。
很明显，使用 CSS3 阴影、透明度、效果和其他功能会显着降低某些 phones/tablets 上的整体页面性能，但我找不到确定设备是否正确的单一方法性能不足以处理 "heavy" CSS3 特征。我会创建两个版本的 CSS：精简版用于预算 phones/tablets 和完整版用于 PC 等等；但我应该如何选择呢？使用媒体查询看起来不是一个温和的选择。
要不试试按屏幕分辨率来选择？预算设备几乎总是屏幕不好 :)
这是一个相当复杂的话题，没有 epics 很难正确回答。我尽量保持简短：
工具
Chrome 开发工具提供了许多方便的 JS 分析功能和 CSS 功能。作为第一步，我建议使用时间轴，激活 'JS Profile'、Memory 和 Paint 的捕获，然后分析最大的彩色块（需要大量 calcuations/layouting/painting待完成。更多详细信息：https://developer.chrome.com/devtools/docs/timeline
如何（CSS 注重性能）
一个非常普遍的误解是 "long and a high amount of selectors" 导致 Perf 的谣言。问题。根据我所见、调试和阅读的优秀性能专家，如 Paul Lewis, this is usually NOT the bottleneck. Computing and applying CSS values is extremely fast. Instead Painting and Layouting, especially when using animations is costly. There are tricks like using translate instead of left/top positioning, using the will-change property and many more. You may find an overview about what causes what here: https://csstriggers.com/
结论：媒体查询可能不是一个完美的解决方案，但也不错，因为选择器的数量可能并不重要。