Performance issue - [Violation] 'requestAnimationFrame'

In my code, I draw excel data using 2 classes. The CPU load is extremely high and I get this message in the console:

[Violation] 'requestAnimationFrame' handler took 542ms

There are no flare messages and when I reduce the drawing to say one line of text, the handler took down to 50ms but the violation message is still displayed.

How can I solve this problem?

Thanks in advance!

what do you mean by draw excel data? Can you share the code? If I understand correctly it’s just a warning so you can ignore it.

I am drawing data from a table, but I am not sure if this is really relevant, as the problem already occurs when I do simple drawings, such as rendering a line of text.

I can’t share the code because it’s client data.

I understand it’s only a warning, but the page is extremely slow and the CPU is almost at 100 percent.

What I understand is that it’s not that the warning is causing the performance issue but the performance issue is causing the warning.

I can only give high level comments as it’s hard to “solve” the issue from the given information. I would break the code into different parts or comment out some lines to see what is dragging the performance. But, in general, I avoid using p5.js for production code because often the library itself is not optimized as it focuses on learning rather than performance.

1 Like