performance - 有没有办法在导致性能不佳时禁用特定的 css 规则？

Question

例如，在具有大屏幕但没有专用显卡的笔记本电脑上，规则:

.menu-item:hover {
    filter: blur(5px);
}

明显滞后，但仅通过 @media (max-width: 600px) 或 @supports 查询定位并不容易。

理想情况下，拥有类似的东西会很棒

@performance ("good enough to handle whatever it is in question") {}

或者如果 @supports 媒体查询考虑了性能。

有这样的东西吗？或者有什么办法可以解决类似的问题吗？

Answer 1

JavaScript 可以做类似 requestAnimationFrame 的事情，并在动画期间为 FPS 计时(在 transition/transitionEnd 和 animation< 上使用事件注册/animationEnd) 然后如果帧率被认为太低，它可以应用如下样式:

*, *:before, *:after {
    transition-property: none !important;
    transform: none !important;
    animation: none !important;
    /* ... */
}

但是针对低功耗笔记本电脑的纯 CSS 选项......我的建议是首先尝试这个技巧:

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

这将确保它最终使用可用的专用显卡。这可能足以提高性能。

您可能还想查看 @keyframes，这在帧速率不一致时会有所帮助。