Is there a way to determine the monitor's frame rate using JavaScript?

Question

Is there a way to determine the monitor's frame rate using JavaScript?

Could JavaScript be used to determine the refresh rate of a monitor, typically set at 60Hz for most LCD monitors?
Is there a method available to execute a function after a specific number of frames have passed?

There has been some curiosity about my reasons for needing this information. Here's the scenario: I am working on an animation that runs in a continuous loop, rendering frame by frame. It is crucial that each iteration synchronizes with the monitor's refresh rate to avoid tearing. Currently, I am using setTimeout(loop, 16) within the loop method, which is somewhat effective. The second parameter should ideally be set as 1/(refresh rate), hence why I posed these questions.

javascript

Answer 1

Answer №1

If you're working on modern browsers, one trick you can try is using window.requestAnimationFrame along with a simple callback to track the time between each call and calculate the frames per second (FPS).

Additionally, you can choose to skip rendering every few calls to adjust the frame rate as needed.

I've provided a basic example at http://jsfiddle.net/rBGPk/ - the calculations may not be perfect, but it should give you an idea of how to implement this concept.

Answer 2

If you're working on modern browsers, one trick you can try is using window.requestAnimationFrame along with a simple callback to track the time between each call and calculate the frames per second (FPS).

Additionally, you can choose to skip rendering every few calls to adjust the frame rate as needed.

I've provided a basic example at http://jsfiddle.net/rBGPk/ - the calculations may not be perfect, but it should give you an idea of how to implement this concept.

Answer 3

Answer №2

The method outlined below calculates the FPS by measuring the time interval between two consecutive animation frames.

Caution: This approach may yield inaccurate results as a skipped animation frame can occur when the CPU is occupied with other tasks.

// Function to obtain FPS as a Promise
const getFPS = () =>
  new Promise(resolve =>
    requestAnimationFrame(t1 =>
      requestAnimationFrame(t2 => resolve(1000 / (t2 - t1)))
    )
  )

// Call the function to retrieve the FPS
getFPS().then(fps => console.log(fps));

Tips

Avoid overusing setInterval and setTimeout for real-time rendering
Instead, utilize requestAnimationFrame
Check out the MDN Tutorial on Timeouts and Intervals, specifically the section on requestAnimationFrame

Answer 4

The method outlined below calculates the FPS by measuring the time interval between two consecutive animation frames.

Caution: This approach may yield inaccurate results as a skipped animation frame can occur when the CPU is occupied with other tasks.

// Function to obtain FPS as a Promise
const getFPS = () =>
  new Promise(resolve =>
    requestAnimationFrame(t1 =>
      requestAnimationFrame(t2 => resolve(1000 / (t2 - t1)))
    )
  )

// Call the function to retrieve the FPS
getFPS().then(fps => console.log(fps));

Tips

Avoid overusing setInterval and setTimeout for real-time rendering
Instead, utilize requestAnimationFrame
Check out the MDN Tutorial on Timeouts and Intervals, specifically the section on requestAnimationFrame

Answer 5

Answer №3

Measure time interval between repaint events:

const getRepaintInterval = () => {
  return new Promise((resolve) => {
    requestAnimationFrame((t1) => {
      requestAnimationFrame((t2) => {
        resolve(t2 - t1);
      });
    });
  });
};

Alternatively, calculate the Frames Per Second (FPS) within a specific second:

const getFps = () => new Promise(resolve => {
    let repaint = 0;
    const start = performance.now();
    const withRepaint = () => {
        requestAnimationFrame(() => {
            if ((performance.now() - start) < 1000) {
                repaint += 1;
                withRepaint();
            } else {
                resolve(repaint);
            }
        });
    };
    withRepaint();
});

Or determine FPS using a designated start and end point:

const fpsHandler = () => {
    let repaint;
    let stop;
    let ret;
    let start;
    const init = () => {
        ret = undefined;
        stop = false;
        repaint = 0;
        start = performance.now();
    };
    init();
    const withRepaint = () => {
        requestAnimationFrame(() => {
            if (!stop) {
                repaint += 1;
                withRepaint();
            }
        });
    };
    return {
        start: () => {
            init();
            withRepaint();
        },
        end: () => {
            stop = true;
            if (!ret) ret = repaint / ((performance.now() - start) / 1000);
            return ret;
        }
    }
};

const { start, end } = fpsHandler();

Answer 6

Measure time interval between repaint events:

const getRepaintInterval = () => {
  return new Promise((resolve) => {
    requestAnimationFrame((t1) => {
      requestAnimationFrame((t2) => {
        resolve(t2 - t1);
      });
    });
  });
};

Alternatively, calculate the Frames Per Second (FPS) within a specific second:

const getFps = () => new Promise(resolve => {
    let repaint = 0;
    const start = performance.now();
    const withRepaint = () => {
        requestAnimationFrame(() => {
            if ((performance.now() - start) < 1000) {
                repaint += 1;
                withRepaint();
            } else {
                resolve(repaint);
            }
        });
    };
    withRepaint();
});

Or determine FPS using a designated start and end point:

const fpsHandler = () => {
    let repaint;
    let stop;
    let ret;
    let start;
    const init = () => {
        ret = undefined;
        stop = false;
        repaint = 0;
        start = performance.now();
    };
    init();
    const withRepaint = () => {
        requestAnimationFrame(() => {
            if (!stop) {
                repaint += 1;
                withRepaint();
            }
        });
    };
    return {
        start: () => {
            init();
            withRepaint();
        },
        end: () => {
            stop = true;
            if (!ret) ret = repaint / ((performance.now() - start) / 1000);
            return ret;
        }
    }
};

const { start, end } = fpsHandler();

Answer 7

Answer №4

This method is strong and reliable, utilizing the requestAnimationFrame feature.

function calculateFramesPerSecond(options){
    var requestFrame = window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame;
    if (!requestFrame) return true; // Determine if "true" is returned;
                                    // set default FPS, display error message, etc...
    function checkFramerate(){
        if (index--) requestFrame(checkFramerate);
        else {
            // var result = 3*Math.round(count*1000/3/(performance.now()-start));
            var result = count*1000/(performance.now()- start);
            if (typeof options.callback === "function") options.callback(result);
            console.log("Calculated: "+result+" frames per second");
        }
    }
    if (!options) options = {};
    var count = options.count||60, index = count, start = performance.now();
    checkFramerate();
}

The higher the count, the more precise the FPS value will be, but it will also increase test duration.

You can implement additional logic for rounding to intervals like 15/12s, such as 24, 30, 48, 60, 120... FPS.

Here's the condensed version (rounded to 3 FPS):

function calcFPS(a){function b(){if(f--)c(b);else{var e=3*Math.round(1E3*d/3/(performance.now()-g));"function"===typeof a.callback&&a.callback(e);console.log("Calculated: "+e+" frames per second")}}var c=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame;if(!c)return!0;a||(a={});var d=a.count||60,f=d,g=performance.now();b()}

Usage examples:

calcFPS(); // Simply logs output to the console (console log can be removed,
           // rendering this call unnecessary)

calcFPS({count: 30}); // Manually define the count (test duration should be around 500ms
                      // on a 60FPS display)

calcFPS({callback: useFPS}); // Specify a callback function to utilize
                             // the FPS value

var FPS = 0, err = calcFPS({count: 120, callback: fps => FPS = fps});
if (err) FPS = 30;

Answer 8

This method is strong and reliable, utilizing the requestAnimationFrame feature.

function calculateFramesPerSecond(options){
    var requestFrame = window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame;
    if (!requestFrame) return true; // Determine if "true" is returned;
                                    // set default FPS, display error message, etc...
    function checkFramerate(){
        if (index--) requestFrame(checkFramerate);
        else {
            // var result = 3*Math.round(count*1000/3/(performance.now()-start));
            var result = count*1000/(performance.now()- start);
            if (typeof options.callback === "function") options.callback(result);
            console.log("Calculated: "+result+" frames per second");
        }
    }
    if (!options) options = {};
    var count = options.count||60, index = count, start = performance.now();
    checkFramerate();
}

The higher the count, the more precise the FPS value will be, but it will also increase test duration.

You can implement additional logic for rounding to intervals like 15/12s, such as 24, 30, 48, 60, 120... FPS.

Here's the condensed version (rounded to 3 FPS):

function calcFPS(a){function b(){if(f--)c(b);else{var e=3*Math.round(1E3*d/3/(performance.now()-g));"function"===typeof a.callback&&a.callback(e);console.log("Calculated: "+e+" frames per second")}}var c=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame;if(!c)return!0;a||(a={});var d=a.count||60,f=d,g=performance.now();b()}

Usage examples:

calcFPS(); // Simply logs output to the console (console log can be removed,
           // rendering this call unnecessary)

calcFPS({count: 30}); // Manually define the count (test duration should be around 500ms
                      // on a 60FPS display)

calcFPS({callback: useFPS}); // Specify a callback function to utilize
                             // the FPS value

var FPS = 0, err = calcFPS({count: 120, callback: fps => FPS = fps});
if (err) FPS = 30;

Answer 9

Answer №5

In some previous answers, it was explained to use the requestAnimationFrame method and calculate the time difference between frames. Here is a solution that leverages the requestAnimationFrame function along with the timestamp already provided to the callback. In this case, there is no need for an additional call to performance.now().

var previousTimestamp, divInterval, divFPS;

const raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

const rafLoop = timestamp => {
    let interval = timestamp - previousTimestamp;
    let fps = 1000 / interval;
    divInterval.innerHTML = `Interval: ${interval}`;
    divFPS.innerHTML = `FPS: ${fps}`;
    previousTimestamp = timestamp;
    raf(rafLoop);
};

divInterval = document.getElementById('interval');
divFPS = document.getElementById('fps');

// Initializes the previousTimestamp variable and then calls the rafLoop function.
raf(timestamp => {
    previousTimestamp = timestamp;
    raf(rafLoop);
});

<div id="interval"></div>
<div id="fps"></div>

For another example with animation using the technique derived from this snippet, check out this CodePen link.

Answer 10

In some previous answers, it was explained to use the requestAnimationFrame method and calculate the time difference between frames. Here is a solution that leverages the requestAnimationFrame function along with the timestamp already provided to the callback. In this case, there is no need for an additional call to performance.now().

var previousTimestamp, divInterval, divFPS;

const raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

const rafLoop = timestamp => {
    let interval = timestamp - previousTimestamp;
    let fps = 1000 / interval;
    divInterval.innerHTML = `Interval: ${interval}`;
    divFPS.innerHTML = `FPS: ${fps}`;
    previousTimestamp = timestamp;
    raf(rafLoop);
};

divInterval = document.getElementById('interval');
divFPS = document.getElementById('fps');

// Initializes the previousTimestamp variable and then calls the rafLoop function.
raf(timestamp => {
    previousTimestamp = timestamp;
    raf(rafLoop);
});

<div id="interval"></div>
<div id="fps"></div>

For another example with animation using the technique derived from this snippet, check out this CodePen link.

Is there a way to determine the monitor's frame rate using JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Tips on positioning a div based on the screen dimensions

Error SCRIPT438: The function 'formatCurrency' is not supported by this object

Is there a simple method to automatically increase the version number of Mongoose documents with each update request?

Delete an entry in a singular mapping in a one-to-one connection [TypeORM]

Preventing Columns in SlickGrid from Being Reordered

Using window.location.replace() for redirection after AJAX call succeeds

Error: Unable to extract the 'id' property from 'this.props.Name' because it is undefined in ReactJS

How can I implement a division animation with Javascript upon clicking a hyperlink?

Transmit information across disparate components in Vue.js

Confirmation dialog with user-defined button text

Analyzing the functionality of Express with Mocha and Chai

Can the Browser Handle Quick Sorting of Enormous XML Data?

The Tiny Scrollbar jQuery plugin experiences a malfunction when the defer attribute is added to the script tags in the javascript code

My loop encountered an 'Undefined' error while attempting to retrieve an object from a JSON file

Initiating, halting, and rejuvenating a timer in JavaScript

Loading a div using Ajax within a frame

What are the steps to implement server side routing using react-router 2 and expressjs?

Using Slick Slider and Bootstrap CSS to display text on top of images

"Obtaining a three.js sprite within a Verold script - the ultimate guide

The v-list-group does not automatically expand sub-groups based on the path specified in the group prop