Question

例如，在具有大屏幕但没有专用图形卡的笔记本电脑上，规则为：

package guis;

import java.awt.Font;

import org.newdawn.slick.TrueTypeFont;

public class Gui {

    private TrueTypeFont font;
    private Font awtFont;

    public Gui() {
        this.awtFont = new Font("Times New Roman", Font.BOLD, 24);
        this.font = new TrueTypeFont(awtFont, false);
    }

    public void drawString(int x, int y, String text) {
        font.drawString(x, y, text);
    }

}

显着滞后，但仅使用.menu-item:hover { filter: blur(5px); }或@media (max-width: 600px)查询定位并不容易。

理想情况下，拥有像

这样的东西会很棒

@supports

或@performance ("good enough to handle whatever it is in question") {}媒体查询是否考虑了效果。

这样的事情存在吗？或者有什么方法可以找出类似的东西吗？

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的解决方案，我担心你会失去运气。

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

2 个答案: