Tips for optimizing the "framerate" (setInterval delay) in a JavaScript animation loop

Question

Tips for optimizing the "framerate" (setInterval delay) in a JavaScript animation loop

When creating a JavaScript animation, it's common practice to use setInterval (or multiple setTimeouts) to create a loop. But what is the optimal delay to set in these setInterval/setTimeout calls?

In the jQuery API page for the .animate() function, user "fbogner" mentions:

For those interested: Animations are created using a setInterval with a timeout of 13ms. This is quite speedy! Chrome has the fastest possible interval of around 10ms, while other browsers typically sample at 20-30ms.

How did jQuery arrive at this specific number for their animations?

I've started a bounty in hopes that someone familiar with the source code of Chromium or Firefox can offer concrete evidence to support the choice of a particular framerate. It would be interesting to see a compilation of different animations (or frameworks) and their corresponding delays. I believe this could lead to some enlightening research.

Fascinating discovery - I recently examined Google's Pac-Man source code to understand their approach. They implemented an array of various FPS values (90, 45, 30), beginning with the highest one. During each frame, they assess the "slowness" of the frame (how much it surpassed its designated time). If this slowness surpasses 50ms on 20 occasions, the framerate is decreased to the next value in the list (90 -> 45, 45 -> 30). Interestingly, the framerate doesn't return to higher values, likely because the game is relatively short-lived, making the effort not worthwhile.

Furthermore, the setInterval delay is calculated as 1000 / framerate. Notably, they opted for setInterval over repeated setTimeouts.

This dynamic framerate functionality is indeed quite impressive!

javascript jquery

Answer 1

Answer №1

It is likely that a significant portion of internet users have monitors with a refresh rate of 60Hz, meaning one frame every 16.66ms. To make the monitor the limiting factor, you would need to produce frames at a rate faster than 16.66ms.

The choice of a value like 13ms can be attributed to two reasons. Firstly, the browser requires some time to repaint the screen (generally at least 1ms). This results in an update frequency of around 15ms, which coincidentally happens to match the standard timer resolution on Windows of 15ms (refer to John Resig's blog post). A well-crafted 15ms animation should look consistent across various browsers and operating systems.

For what it's worth, fbogner is incorrect in stating that non-Chrome browsers fire setInterval every 20-30ms. I conducted a test to measure the firing speed of setInterval and obtained the following results:

Chrome - 4ms
Firefox 3.5 - 15ms
IE6 - 15ms
IE8 - 15ms

Answer 2

It is likely that a significant portion of internet users have monitors with a refresh rate of 60Hz, meaning one frame every 16.66ms. To make the monitor the limiting factor, you would need to produce frames at a rate faster than 16.66ms.

The choice of a value like 13ms can be attributed to two reasons. Firstly, the browser requires some time to repaint the screen (generally at least 1ms). This results in an update frequency of around 15ms, which coincidentally happens to match the standard timer resolution on Windows of 15ms (refer to John Resig's blog post). A well-crafted 15ms animation should look consistent across various browsers and operating systems.

For what it's worth, fbogner is incorrect in stating that non-Chrome browsers fire setInterval every 20-30ms. I conducted a test to measure the firing speed of setInterval and obtained the following results:

Chrome - 4ms
Firefox 3.5 - 15ms
IE6 - 15ms
IE8 - 15ms

Answer 3

Answer №2

In order to manage the frame rate of a drawing application, the following pseudo-code can be utilized:

FPS_WANTED = 25 
(just a starting point, subject to change during execution)

TIME_OF_DRAWING = 1000/FPS_WANTED 
(in milliseconds, providing an accurate measurement for frame rate)
(should be adjusted as FPS_WANTED is modified)

UntilUserExitsApplication()
{

  time1 = getTime();
  doAnimation();
  time2 = getTime();
  animationTime = time2-time1;

  if (animationTime > TIME_OF_DRAWING)
  {
     [the desired FPS cannot be achieved]
     Options:
     1. Reduce FPS to test lower frame rates
     2. Maintain current settings for maximum CPU performance
  }
  else
  {
     [the target FPS can be attained - choices include:]
     1. wait(TIME_OF_DRAWING-animationTime) - sustain constant FPS
     2. increase frame rate if preferred
     3. Opt for best CPU utilization without adjustments
  }

}

While variations may exist, this fundamental algorithm is applicable in all animated scenarios.

Answer 4

In order to manage the frame rate of a drawing application, the following pseudo-code can be utilized:

FPS_WANTED = 25 
(just a starting point, subject to change during execution)

TIME_OF_DRAWING = 1000/FPS_WANTED 
(in milliseconds, providing an accurate measurement for frame rate)
(should be adjusted as FPS_WANTED is modified)

UntilUserExitsApplication()
{

  time1 = getTime();
  doAnimation();
  time2 = getTime();
  animationTime = time2-time1;

  if (animationTime > TIME_OF_DRAWING)
  {
     [the desired FPS cannot be achieved]
     Options:
     1. Reduce FPS to test lower frame rates
     2. Maintain current settings for maximum CPU performance
  }
  else
  {
     [the target FPS can be attained - choices include:]
     1. wait(TIME_OF_DRAWING-animationTime) - sustain constant FPS
     2. increase frame rate if preferred
     3. Opt for best CPU utilization without adjustments
  }

}

While variations may exist, this fundamental algorithm is applicable in all animated scenarios.

Answer 5

Answer №3

When it comes to creating looping animations, striking a balance between speed and workload is crucial.

For instance, if you aim to smoothly slide a div across the screen in one second for a visually appealing effect, you'll need to adjust the loop speed accordingly. This ensures that the animation is both noticeable and seamless.

Ultimately, finding the perfect balance may require some trial and error, taking into consideration factors such as workload, time, and browser capabilities. The goal is to create an animation that looks great on any browser.

Answer 6

When it comes to creating looping animations, striking a balance between speed and workload is crucial.

For instance, if you aim to smoothly slide a div across the screen in one second for a visually appealing effect, you'll need to adjust the loop speed accordingly. This ensures that the animation is both noticeable and seamless.

Ultimately, finding the perfect balance may require some trial and error, taking into consideration factors such as workload, time, and browser capabilities. The goal is to create an animation that looks great on any browser.

Answer 7

Answer №4

fbogner's provided number has undergone testing. Web browsers limit the execution of JavaScript activity to ensure usability each time.

If JavaScript were able to run every 5 milliseconds, the browser runtime would have less CPU time available for rendering updates or responding to user input (such as clicks) because JavaScript execution slows down the browser.

I believe that Chrome developers permit shorter intervals for running JavaScript compared to other browsers due to their V8 Javascript Engine, which compiles JavaScript code for faster performance and reduces the amount of time the browser is blocked by interpreted code.

However, the engine's speed alone is not sufficient to allow for shorter intervals; the developers have likely conducted tests to determine the optimal shortest interval that allows for quick execution without significantly slowing down the browser.

Answer 8

fbogner's provided number has undergone testing. Web browsers limit the execution of JavaScript activity to ensure usability each time.

If JavaScript were able to run every 5 milliseconds, the browser runtime would have less CPU time available for rendering updates or responding to user input (such as clicks) because JavaScript execution slows down the browser.

I believe that Chrome developers permit shorter intervals for running JavaScript compared to other browsers due to their V8 Javascript Engine, which compiles JavaScript code for faster performance and reduces the amount of time the browser is blocked by interpreted code.

However, the engine's speed alone is not sufficient to allow for shorter intervals; the developers have likely conducted tests to determine the optimal shortest interval that allows for quick execution without significantly slowing down the browser.

Answer 9

Answer №5

It's interesting to consider the interval time in jQuery and how 13ms equates to 80fps, showing just how fast it truly is. Typically, the "standard" frames per second used in movies and other media is 25fps, which is adequate to not cause any noticeable flickering for the human eye. With 25fps translating to 40ms, we can conclude that anything below 40ms should be sufficient for smooth animations.

Answer 10

It's interesting to consider the interval time in jQuery and how 13ms equates to 80fps, showing just how fast it truly is. Typically, the "standard" frames per second used in movies and other media is 25fps, which is adequate to not cause any noticeable flickering for the human eye. With 25fps translating to 40ms, we can conclude that anything below 40ms should be sufficient for smooth animations.

Tips for optimizing the "framerate" (setInterval delay) in a JavaScript animation loop

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How can I effectively display a blank menu item for the SelectField component in Material-UI within a React application?

Exploring the power of React Leaflet and the exciting possibilities of React Leaflet

Can you provide instructions on how to use JavaScript to click and hold a button for a specific duration?

Creating HTML code using Django and JavaScript

jQuery ajax errors are slipping through the cracks and not being properly addressed

Guide to authenticating Cashfree gateway's webhook signature using JavaScript

Directive unable to recognize ng-pattern functionality

The pageSize in React's Material Table does not reflect dynamic updates

Refresh Subview in Subview with MVC AJAX Update

Creating a new object store in IndexedDB on Windows 8

Image displayed in tooltip when hovering over

Guide on extracting JSON data from jQuery containing an array in C#

How can we extract word array in Python that works like CryptoJS.enc.Hex.parse(hash)?

Rearrange the layout by dragging and dropping images to switch their places

Can one customize the background color of a segment in a radar chart using Chart.js?

What's the best way to send a message back to AJAX along with a code from PHP?

smoothly hide the dropdown menu when a link is clicked with a transition effect

Running NodeJS scripts with ElectronJS is not possible

The build process encountered an error due to the absence of ESLint configuration after the import

Updating ngModel value dynamically from controller