有没有办法在导致性能不佳时禁用特定的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，这将在帧速率不一致时提供帮助。

Answer 2

例如，您可以使用Modernizr检测大多数浏览器功能。看看the documentation，看看你能发现什么。

但是，没有真正可靠的方法来通过CSS或JavaScript检测硬件。您可以尝试检测如下所示的FPS：calculate FPS in Canvas using requestAnimationFrame

我找到了可能适合你的some code on GitHub：

var canvas = document.createElement('canvas');

var gl;
var debugInfo;
var vendor;
var renderer;

try {
  gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
} catch (e) {
}

if (gl) {
  debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
  vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
  renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
}

// Sample output:
//
// » console.log(renderer);
// ATI Technologies Inc. AMD Radeon R9 M370X OpenGL Engine

它通过WebGL检测图形硬件供应商名称，因此显然需要支持WebGL的浏览器。如果这对您没有问题，这可能就是您所需要的。

关于仅限CSS的解决方案，我担心你会失去运气。