Сравнение частоты обновления: тест 75 Гц и 60 Гц - Fcodenotes

Метод 1: использование анимации JavaScript и CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes testAnimation {
      0% { background-color: red; }
      50% { background-color: blue; }
      100% { background-color: red; }
    }
    .test-element {
      animation: testAnimation 5s infinite;
    }
  </style>
</head>
<body>
  <div class="test-element"></div>
  <script>
    // Calculate the average frame rate
    let frameCount = 0;
    let startTime = performance.now();
    requestAnimationFrame(function loop() {
      frameCount++;
      requestAnimationFrame(loop);
    });
    setTimeout(function() {
      let endTime = performance.now();
      let averageFPS = frameCount / ((endTime - startTime) / 1000);
      console.log("Average FPS:", averageFPS);
    }, 5000);
  </script>
</body>
</html>

Метод 2. Использование сторонней библиотеки (например, PixiJS)

<!DOCTYPE html>
<html>
<head>
  <script src="https://pixijs.download/v6.1.3/pixi.js"></script>
</head>
<body>
  <script>
    // Create a PIXI application
    const app = new PIXI.Application({
      width: 800,
      height: 600,
      backgroundColor: 0x000000, // Set background color
    });
    document.body.appendChild(app.view);
    // Create a sprite with an animation
    const sprite = PIXI.Sprite.from("path/to/sprite.png");
    sprite.animationSpeed = 0.1;
    sprite.play();
    app.stage.addChild(sprite);
    // Calculate the average frame rate
    let frameCount = 0;
    let startTime = performance.now();
    app.ticker.add(function () {
      frameCount++;
    });
    setTimeout(function() {
      let endTime = performance.now();
      let averageFPS = frameCount / ((endTime - startTime) / 1000);
      console.log("Average FPS:", averageFPS);
    }, 5000);
  </script>
</body>
</html>