What causes the choppy and inconsistent performance of requestAnimationFrame on Ubuntu's Chrome browser?

Question

What causes the choppy and inconsistent performance of requestAnimationFrame on Ubuntu's Chrome browser?

I'm at a loss here, unsure of what might be causing this issue.

After developing a game engine with webgl, I conducted testing primarily on Firefox where everything ran smoothly without any lag or stuttering, even during more intensive tasks like blending with multiple framebuffers.

However, when I switched over to Chrome, the story changed completely. Chrome struggled to maintain a stable fps, even when running simple tasks. To troubleshoot, I ran an experiment to determine if the issue lied within my code or the requestAnimation loop. Here's the code snippet I used:

<!DOCTYPE html>
<html>
<body>
<div id="fpsCounter"></div>

Lowest fps
<div id="minFps"></div>

<br>
Highest fps
<div id="maxFps"></div>
<script>
    // Code Snippet
</script>
</body>

</html>

The code snippet continuously loops the animation frame and displays the fps in a div element. In Firefox, the code performed well, averaging around 58 fps without dropping below 52. However, Chrome struggled to reach 40 fps and frequently dipped below 28. Interestingly, Chrome exhibited occasional bursts of high speeds, reaching a peak of 99 fps, but consistent performance at 60 fps is more crucial.

Additional Details:

Firefox version: 55.0.2 64-bit
Chrome version: 60.0.3112.78 (official version) 64-bit
OS: Ubuntu 16.04 LTS
Ram: 8gb
GPU: gtx 960m
Cpu: intel core i7HQ

Here's a snapshot of Chrome's performance: https://i.sstatic.net/zD70S.png

javascript google-chrome firefox requestanimationframe

Answer 1

Answer №1

For the purpose of testing, I created a simple HTML page:

<!DOCTYPE html>
<html>
<head>
    <title>requestAnimationFrame</title>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <script>
    "use strict"

    // (tested in Ubuntu 18.04 and Chrome 79.0)
    //
    // requestAnimationFrame is not precise
    // often SKIPs a frame
    //

    function loop() {
        requestAnimationFrame(loop)
        var ctx = document.getElementById("canvas").getContext("2d")
        ctx.fillStyle = "red"
        ctx.fillRect(100,100,200,100)
    }

    loop()
    </script>
</body>
</html>

Check out this summary in the dev tools image

No issues with memory leaks were identified, and the scripting execution time was found to be insignificant.

View the FPS in the dev tools image

The FPS exhibited inconsistent behavior, particularly while running Chrome on Ubuntu.

The root cause in this particular test was linked to hardware acceleration.

The FPS performance improved when hardware acceleration was disabled.

UPDATE

Further tests were conducted using a page with a single canvas element. Based on these tests, it can be concluded that browsers are complex and may not always run smoothly.

Proposed Architecture for Games

var previousTimeStamp = 0

function mainLoop(timeStamp) {
    if (! shallSkipLoop(timeStamp)) { gameLoop() } 
    requestAnimationFrame(mainLoop)
}

function gameLoop() {    
    // Implement game logic here
}    

function shallSkipLoop(timeStamp) { 
    var deltaTime = timeStamp - previousTimeStamp
    previousTimeStamp = timeStamp
    //
    // Preventing skipping frames under 1000 / 60 ms!!!
    // This issue arises when the browser delays executing a frame 
    // in an attempt to sync with the next screen refresh;
    // however, it may lead to unsynchronized frames: 
    // one very short (e.g., 5ms) and the other significantly longer (e.g., 120ms)
    // This behavior could potentially be a browser bug
    //
    return deltaTime < 16
}

requestAnimationFrame(mainLoop)

Answer 2

For the purpose of testing, I created a simple HTML page:

<!DOCTYPE html>
<html>
<head>
    <title>requestAnimationFrame</title>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <script>
    "use strict"

    // (tested in Ubuntu 18.04 and Chrome 79.0)
    //
    // requestAnimationFrame is not precise
    // often SKIPs a frame
    //

    function loop() {
        requestAnimationFrame(loop)
        var ctx = document.getElementById("canvas").getContext("2d")
        ctx.fillStyle = "red"
        ctx.fillRect(100,100,200,100)
    }

    loop()
    </script>
</body>
</html>

Check out this summary in the dev tools image

No issues with memory leaks were identified, and the scripting execution time was found to be insignificant.

View the FPS in the dev tools image

The FPS exhibited inconsistent behavior, particularly while running Chrome on Ubuntu.

The root cause in this particular test was linked to hardware acceleration.

The FPS performance improved when hardware acceleration was disabled.

UPDATE

Further tests were conducted using a page with a single canvas element. Based on these tests, it can be concluded that browsers are complex and may not always run smoothly.

Proposed Architecture for Games

var previousTimeStamp = 0

function mainLoop(timeStamp) {
    if (! shallSkipLoop(timeStamp)) { gameLoop() } 
    requestAnimationFrame(mainLoop)
}

function gameLoop() {    
    // Implement game logic here
}    

function shallSkipLoop(timeStamp) { 
    var deltaTime = timeStamp - previousTimeStamp
    previousTimeStamp = timeStamp
    //
    // Preventing skipping frames under 1000 / 60 ms!!!
    // This issue arises when the browser delays executing a frame 
    // in an attempt to sync with the next screen refresh;
    // however, it may lead to unsynchronized frames: 
    // one very short (e.g., 5ms) and the other significantly longer (e.g., 120ms)
    // This behavior could potentially be a browser bug
    //
    return deltaTime < 16
}

requestAnimationFrame(mainLoop)

What causes the choppy and inconsistent performance of requestAnimationFrame on Ubuntu's Chrome browser?

Answer №1

UPDATE

Proposed Architecture for Games

Similar questions

Creating a div resizing function using only JavaScript is a fun and useful project to tackle

Perform a series of database queries one after the other, ensuring they are completed before

Protractor will pause for 30 seconds once the page has finished loading in Angular 2

Unique: "Unique One-Step Deviation in Date Comparison"

AngularJS is encountering an issue where it cannot locate the App Module

Quicker method for displaying an element in an array than utilizing a for loop

Babel is failing to transpile the Modal component from material-ui-next to ES5

Tips for transitioning this JavaScript code into jQuery syntax

Linux web server blocking requests across different domains, even with correct Access-Control-Allow-Origin headers set

Here is a way to attach a function to dynamically generated HTML that is returned in an AJAX request

Enhance the standard input control in Vue.js by extending it to include features such as

Displaying a dynamic menu using Angular's ngFor loop

Preventing event duplication through clone() method

Tips for handling the rejection of a promise within a callback function in Node.js

mootools.floor dispose function malfunctioned

Client-side rendering for NextJS server components is also supported

The functions Show() and Hide() may not work in all scenarios within jQuery

When clearInterval is used, the value of the variable is wiped out

Arrow icon from Material UI for a smaller device

Error: The "res.json" method is not defined in CustomerComponent