devtools warning - forced reflow is a likely performance bottleneck - morris.js

Question

I have a page wherein I am displaying 23 donut charts using morris.js plugin. During performance analysis I came across this:

Of course there are 22 more of these warnings. The resultant time is 401ms.
My implementation of each donut chart is as follows:

Morris.Donut({
                    element: 'element1',
                    resize: false,
                    data: [{
                            label: "temp1",
                            value: temp1Value
                        },
                        {
                            label: "temp2",
                            value: temp2Value
                        },
                        {
                            label: "temp3",
                            value: temp3Value
                        }

                    ],
                    colors: ["#46BFBD", "#993366", "#993366"]
                });

I read in some posts that I should separate reads from writes. Any pointers how to implement this? Considering all 23 charts?

Benedictus

I'm not familiar with this particular library but I see the same behavior on morris.js homepage and it's likely there's no way around this: the library needs to force a reflow to calculate the coordinates. – Orogeny

Thanks a lot for the answer! I too checked in morris.js website and found the same warning on analysis. I replaced morris.js with chart.js for my donut charts and my page was super fast! – Benedictus

Answer 1

The comments to the question sum it up pretty well but I'll just document this more comprehensively and generally for anyone else that stumbles on this

Forced synchronous layouts AKA forced reflows occur when a page sets a CSS property that affects the layout of the element, and then some JS queries the layout position of the element. Since the layout position may have changed, the browser needs to re-compute the position.

You can check what properties cause layout at https://csstriggers.com/

If it happens to be your code that's causing the layout, then you want to refactor it to avoid setting layout then querying position

But it's likely not your code that's causing the forced synchronous layout. Under Recalculation Forced you can see the line of code that causes the FSL. Clicking the link takes you to that line of code.

You can learn the basics of diagnosing FSL using DevTools in Get Started With Analyzing Runtime Performance

And you can learn more about the theory of FSL in Avoid Forced Synchronous Layouts

Mahoney