☰

FPS and Ping Display

Displays FPS and Ping on the top-right corner of the page

  1. // ==UserScript==
  2. // @name         FPS and Ping Display
  3. // @version      1.0
  4. // @description  Displays FPS and Ping on the top-right corner of the page
  5. // @author       hynap
  6. // @match        *://*/*
  7. // @grant        none
  8. // @namespace https://greasyfork.org/users/1381858
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     const statsDiv = document.createElement('div');
  15.     statsDiv.style.position = 'fixed';
  16.     statsDiv.style.top = '10px';
  17.     statsDiv.style.right = '10px';
  18.     statsDiv.style.zIndex = '10000';
  19.     statsDiv.style.padding = '5px';
  20.     statsDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
  21.     statsDiv.style.color = '#fff';
  22.     statsDiv.style.fontSize = '14px';
  23.     statsDiv.style.fontFamily = 'Arial, sans-serif';
  24.     statsDiv.style.borderRadius = '5px';
  25.     statsDiv.innerHTML = `0<br>0 ms`;
  26.     document.body.appendChild(statsDiv);
  27.  
  28.     let lastFrameTime = performance.now();
  29.     let frameCount = 0;
  30.     let fps = 0;
  31.  
  32.     function updateFPS() {
  33.         const now = performance.now();
  34.         frameCount++;
  35.         if (now - lastFrameTime >= 100) {
  36.             fps = (frameCount / ((now - lastFrameTime) / 1000)).toFixed(2);
  37.             lastFrameTime = now;
  38.             frameCount = 0;
  39.         }
  40.         requestAnimationFrame(updateFPS);
  41.     }
  42.  
  43.     function updatePing() {
  44.         const startTime = performance.now();
  45.         fetch(window.location.href, { method: 'HEAD' })
  46.             .then(() => {
  47.                 const ping = (performance.now() - startTime).toFixed(2);
  48.                 statsDiv.innerHTML = `${fps}<br>${ping} ms`;
  49.             })
  50.             .catch(() => {
  51.                 statsDiv.innerHTML = `${fps}<br>error`;
  52.             });
  53.     }
  54.  
  55.     setInterval(updatePing, 100);
  56.     requestAnimationFrame(updateFPS);
  57. })