Why does chromecast take so long between animation frames

Question

I have a game I'm developing, that runs quite smoothly on chrome on my Mac, but very slowly on my chromecast. I've optimized the JS quite a bit already.

I assumed it was just the low powered hardware in the chromecast, combined with the slowish JS.

But investigating, using the performance object in JS it seems that the delay between the animation frames being called is much longer than my code takes.

 Court.prototype.update = function () { if (!window.court.paused) { if (window.debug) { console.log('time since last update ' + (performance.now() - window.start) + ' ms'); } window.start = performance.now(); window.court.draw(); // my drawing routing var end = performance.now(); if (window.debug) { console.log('to exit court.draw() took ' + (end - window.start) + ' ms'); } // reschedule next animation update window.requestAnimationFrame(window.court.update); } }; 

When I run that code and follow the console output from the chromecast I get this:

time since last update 89.75099999998201 ms

court.draw() took 0.984999999665888 ms

time since last update 89.35899999960384 ms

court.draw() took 29.77499999997235 ms

time since last update 106.37199999973382 ms

court.draw() took 1.5410000000920263 ms

time since last update 93.46499999992375 ms

court.draw() took 0.3149999997767736 ms

time since last update 91.99499999977706 ms

court.draw() took 0.31399999988934724 ms

time since last update 126.3730000000578 ms

court.draw() took 9.191000000100757 ms

time since last update 104.55799999999726 ms

court.draw() took 0.3160000001080334 ms

time since last update 99.06599999976606 ms

court.draw() took 0.3130000000091968 ms

time since last update 94.06499999977677 ms

court.draw() took 0.3140000003404566 ms

time since last update 88.65700000023935 ms

So, my drawing routine takes between 1 and 30ms, but the Animation Frame is only called about every 100ms, to give a maximum refresh rate of 10fps.

Is there any way to get chromecast to reduce the refresh rate?

Answer 1

We have been able to get 30FPS on Chromecast using requestAnimationFrame. It is very important to optimize your code for the device. Re-use objects aggressively, do not allocate objects or add new properties in the game loop.

I would recommend starting with just a basic requestAnimationFrame handler without any code to get the baseline performance. Then start adding your animation logic and use the Chrome dev tools to measure and find the bottlenecks.

Answer 2

I'm pretty close to giving up now, concluding that Chromecast is slow, full-stop.

I've removed all my drawing code and have a routine that calculates a couple of thing only, and a couple of calls to methods on JS classes that do very little.

Timing it and the time between frames I get a repeating cycle of three frames, with a time between frames of 10ms, 10ms and 30ms - averaging 50ms - or approx 60fps which is OK.

court.draw() took 5.6939999999485735 ms Time since last frame 10.18 ms

court.draw() took 5.745999999817286 ms Time since last frame 10.55 ms

court.draw() took 5.739999999605061 ms Time since last frame 29.22 ms

Just clearing and drawing a very small rectangle representing a ball each frame bumps the time up to 25ms in my code, and 70ms between frames....making it unbearably slow...

With no tools to get any further insight into why it's so slow, I feel like I'm just wasting my time now..

Answer 3

I have instrumented to code to measure main calls, and also to enable/disable drawing calls (calls to context.ClearRect() and context.FillRect() for the canvas)

Conclusions:

When not drawing:

My code takes about 15-16ms (need to improve that a bit!) Refresh Period between frames is about 20ms so there is 4-5ms of overhead per frame even when not drawing...

When drawing:

My code takes about 28ms --> 12ms extra for calls to drawing methods Refresh Period between frames is about 65ms so there is 37ms overhead per frame when drawing --> 12ms of it in "foreground" in my own code ---> 25ms of it in "background" between calls to requestAnimationFrame()

So even if I get my own code down to 10ms (say) I doubt it will reduce the over time to 16ms required for 60fps, as (presumably) the background work is to fill the pixels on the display and there's no way I can reduce that more....I only remove/draw things when strictly necessary already.

I'm drawing 1, 2, or 3 tiny boxes in the canvas, in monochrome....not sure if there are some additional canvas drawing tricks I can try?