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

时间:2017-12-16 01:19:40

标签: css performance css3

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

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") {} 媒体查询是否考虑了效果。

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

2 个答案:

答案 0 :(得分:1)

JavaScript可以执行requestAnimationFrame之类的操作,并在动画期间为FPS计时(使用transition / transitionEndanimation / 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,这会在帧速率不一致时提供帮助。

答案 1 :(得分:1)

例如,您可以使用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的解决方案,我担心你会失去运气。