检测浏览器图形性能? [英] Detect browser graphics performance?

问题描述

我有一个图形密集型网站.它具有在模糊的视频背景上运行的各种 CSS3 动画.它在我的台式机和支持 GPU 的 MacBook Pro 上看起来很棒，但在我的笔记本电脑和 MacBook Air 上运行起来就像垃圾一样.

所以基本上，我想知道是否有一种方法可以使用 Javascript(或任何东西)检测浏览器图形性能，然后仅在性能达到阈值时才应用 CSS 动画.该网站有一个加载屏幕，所以我有一些时间来测试性能.

我知道我可以使用 Modernizr 检测 WebGL，但不幸的是，即使我的笔记本电脑对 WebGL 的测试也呈阳性，尽管性能很差，所以我需要一个替代方案.

谢谢

解决方案

这是一个老问题，但由于我最近处理过类似的问题，我会给我 2 美分.

我使用 GreenSock 做了类似的事情来测量丢帧.但是如果你想用 requestAnimationFrame 来实现它，我相信它是非常相似的.

以下代码的工作原理如下:

1. 听动画帧

   <块引用>

   因为我使用的是 GSAP，所以我正在监听 TweenLite.ticker 'tick' 事件.对于 requestAnimationFrame，你可以用window.requestAnimationFrame(callback);

2. 测量每秒的帧数并更新附加数据，例如 lowestFrameRate &numberOfDrops

3. 如果条件适用，简化计算以提高 FPS

   <块引用>

   条件可以是站点的最低 FPS (lowestFrameRate)，也可以是发生丢帧的次数 (numberOfDrops).这取决于你的具体策略

FPS(true/* showDebugBox */);函数 FPS(showDebugBox) {//显示用于调试的帧用户界面如果(showDebugBox){$('body').append(['
','FPS:<span id="framerate">0</span>;','最低 FPS:<span id="lowest">null</span>;','DROPS 低于 30:<span id="drops">0</span>','</div>'].加入(''));}var $framerate = showDebugBox ?document.querySelector("#framerate") : {};var $lowest = showDebugBox ?document.querySelector("#lowest") : {};var $drops = showDebugBox ?document.querySelector("#drops") : {};var prevTime = 0;无功帧= 0;var ticker = TweenLite.ticker;无功 fps;//将保持网站渲染的最低帧率//请记住，第一次渲染几乎总是较低//比平均帧率晚变量最低帧率 = -1;//将密切关注低于 30fps 的下降次数.//发生这种情况时，禁用一些动画以便//保持 requestAnimationFrame 周期较短var numberOfDrops = 0;ticker.addEventListener("tick", 更新);函数更新(){var current = ticker.time;帧++；如果(当前> prevTime + 1){fps = Math.round(frames/(current - prevTime));$framerate.textContent = fps;prevTime = 当前；帧 = 0;//用第一个 fps 值初始化最低帧率if (lowestFrameRate === -1) {最低帧率 = fps；$lowest.textContent = minimumFrameRate;console.info('最低帧率初始化'，最低帧率);}//更新最低帧率如果(fps <最低帧率){最低帧率 = fps；$lowest.textContent = minimumFrameRate;console.info('最低帧率'，最低帧率);}//更新帧率低于 30 的次数如果 (fps <30) {numberOfDrops++;//你可以降低动画的复杂度//这里如果你想基于低于阈值的下降$drops.textContent = numberOfDrops;console.info('帧率低于 30');}//如果有超过 2 滴if (numberOfDrops >= 2) {//你可以在这里降低动画的复杂度//如果你想基于滴数.//你还需要为这个东西定义一个结束场景//如果帧继续下降会发生什么?}}}}

.hud {位置:固定；顶部:0；左:0；字体系列:Lucida Console"，摩纳哥，等宽；字母间距:1px；行高:1.6；字体大小:10px；填充:4px 8px；背景:rgba(0, 0, 0, 0.3);指针事件:无；用户选择:无；z-索引:5000；}身体 {高度:500vh；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

I have a graphically intensive website. It has all kinds of CSS3 animations running over a blurred video background. It looks great on my desktop and on GPU-enabled MacBook Pros, but it runs like junk on my laptop and MacBook Air.

So basically, I want to know if there is a way to detect Browser graphics performance with Javascript (or anything) and then only apply the CSS animations if the performance reaches a threshold. The site has a loading screen, so I have some time to test for performance.

I know I can detect WebGL with Modernizr, but unfortunately even my laptop tests positive for WebGL even though performance is very poor so I need an alternative.

Thanks

解决方案

This is an old question, but I'll give my 2 cents since I dealt with something similar recently.

I did something similar using GreenSock to measure frame drops. But I'm sure it's very similar if you want to implement it with requestAnimationFrame.

The following code works as follows:

1. listen to animation frame

   Since I'm using GSAP, I'm listening to the TweenLite.ticker 'tick' event. For requestAnimationFrame, you can do the same with window.requestAnimationFrame(callback);

2. measure the number of frames every second and update additional data like lowestFrameRate & numberOfDrops

3. if the condition applies, simplify the calculations to improve FPS

   The condition can either be the lowest FPS for the site (lowestFrameRate), or the number of times a frame drop occurred (numberOfDrops). It depends on your specific strategy

FPS(true /* showDebugBox */ );

function FPS(showDebugBox) {

  // SHOW FRAMERATE UI FOR DEBUGGING
  if (showDebugBox) {
    $('body').append([
      '<div class="hud">',
      'FPS: <span id="framerate">0</span>; ',
      'lowest FPS: <span id="lowest">null</span>; ',
      'DROPS Below 30: <span id="drops">0</span>',
      '</div>'
    ].join(''));
  }

  var $framerate = showDebugBox ? document.querySelector("#framerate") : {};
  var $lowest = showDebugBox ? document.querySelector("#lowest") : {};
  var $drops = showDebugBox ? document.querySelector("#drops") : {};
  var prevTime = 0;
  var frames = 0;
  var ticker = TweenLite.ticker;

  var fps;

  // will keep the lowest framerate the site was rendered at
  // keep in mind that the first render is almost always lower
  // than the average framerate later
  var lowestFrameRate = -1;
  // will keep tab on the number of drops below 30fps.
  // when this happens, disable some animations in order to
  // keep the requestAnimationFrame cycle short
  var numberOfDrops = 0;

  ticker.addEventListener("tick", update);

  function update() {

    var current = ticker.time;

    frames++;

    if (current > prevTime + 1) {
      fps = Math.round(frames / (current - prevTime));
      $framerate.textContent = fps;
      prevTime = current;
      frames = 0;

      // initialize lowestFrameRate with first fps value
      if (lowestFrameRate === -1) {
        lowestFrameRate = fps;

        $lowest.textContent = lowestFrameRate;
        console.info('lowest framrate initialized', lowestFrameRate);
      }

      // update lowest frame rate
      if (fps < lowestFrameRate) {
        lowestFrameRate = fps;

        $lowest.textContent = lowestFrameRate;
        console.info('lowest framerate', lowestFrameRate);
      }

      // update number of times frame rate dropped below 30
      if (fps < 30) {
        numberOfDrops++;

        // you can reduce the complexity of the animations
        // here if you want to base it on a drop below a threshold

        $drops.textContent = numberOfDrops;
        console.info('framerate dropped below 30');
      }

      // if there were more than 2 drops
      if (numberOfDrops >= 2) {
        // you can reduce the complexity of the animations here
        // if you want to base it on the number of drops.

        // you also need to define an end scenario for this thing
        // what happens if the frames continue to drop?
      }
    }
  }
}

.hud {
  position: fixed;
  top: 0;
  left: 0;
  font-family: "Lucida Console", Monaco, monospace;
  letter-spacing: 1px;
  line-height: 1.6;
  font-size: 10px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
  user-select: none;
  z-index: 5000;
}

body {
  height: 500vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

这篇关于检测浏览器图形性能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！