Repository navigation
High cpu usage by Display module #179
Description
I'm having a lot of fun with this, but ran into this performance issue.
I'm using the Display module to render a rectangular display, and getting 100% cpu usage from this line:
/**
* Timer tick: update dirty parts
*/
_tick() {
this._backend.schedule(this._tick);
if (!this._dirty) {
return;
}
backend.schedule() is this line:
schedule(cb) { requestAnimationFrame(cb); }
It appears that, as long as there's nothing to do, it just executes and returns as fast requestAnimationaly possible. Adding a 2ms setTimeout to this._backend.schedule(this._tick) dropped chrome's cpu usage from 100% to 7%.
Implementing an optional rate limiter would trivial, but I wanted to make sure that I'm not using it wrong before submitting a PR?
Activity
ondras commentedon May 18, 2020
Hi @Jon-Biz,
it is, generally speaking, browser's responsibility to throttle
requestAnimationFramefreqency into suitable domain: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrameAs far as I now, the typical frequency is 60fps, which corresponds to ~16ms delay between individual calls. It is weird that a manual +2ms delay would drop the CPU usage as much.
Instead of introducing additional delays, we might simply stop the whole loop and wait until the nearest draw operation. This would remove unnecessary
tick/schedulecalls that are currently a no-op.However, I am quite interested in how you got into this, because an empty
requestAnimationFrameloop shall not be observable with respect to CPU usage. Please:tickcalls, so we can see the real frequency?Thanks!