例如,在具有大屏幕但没有专用显卡的笔记本电脑上,规则:
.menu-item:hover {
filter: blur(5px);
}
明显滞后,但仅通过 @media (max-width: 600px)
或 @supports
查询定位并不容易。
理想情况下,拥有类似的东西会很棒
@performance ("good enough to handle whatever it is in question") {}
或者如果 @supports
媒体查询考虑了性能。
有这样的东西吗?或者有什么办法可以解决类似的问题吗?
最佳答案
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
,这在帧速率不一致时会有所帮助。
关于performance - 有没有办法在导致性能不佳时禁用特定的 css 规则?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47841718/