Calendar Widget and High CPU Usage

Hi. I have a client who also faces this issue. I’ve sent some additional information directly the developers:

On pages with the calendar widget in the sidebar, there is high CPU usage. In the Chrome console, there is constant spam with:
[Violation] Forced reflow while executing JavaScript took ms

After tracing the issue, this apparently comes from the EM_ResizeObserver. Usually a reflow is caused by CSS class changes. So before this line:
events-manager.js:2790: el.classList.add(‘size-‘ + name);
I added:
console.log(‘add class ‘+name);
to get some information. And it shows that the observer is constantly switching between small/large CSS classes. A few times every second. This causes very high CPU usage.

Thank-you Middelkoop.cc for your detailed response.

@janmiddelkoop reported this to me, here’s my reply:

I think the issue here is less the class adding and more the fact that the resizeobserver is going back/forth between large/small. We use a resizeobserver rather than CSS media queries because we cannot guess your calendar size based on screen size, given you can use it on sidebars or your main site page width could be anything despite screen-size. This responds, in theory, to a page load and then any screen or page content resizing.

My guess is that something in your theme or maybe another plugin is triggering the resizeobeserver, and maybe by coincidence there’s a breakpoint in the size that’s causing that trigger between large/small.

As it’s in the sidebar, do you have any animation going on there, that may be affecting the size of the calendar?