Minimise "Forced reflow"

Question

TD;DR

I spend some time tracking the performance of our app, which implements highcharts. I figured out, that some function like getBBox() do trigger "Forced reflow" quite often.

If you look at this list What forces layout / reflow, the things that trigger a reflow is very long.

My Question:

Are there alternative for at least some of the listed properties (espacially offsetWidth/offsetHeight), that do NOT trigger a reflow?

Answer 1

Are you familiar with docs like Avoid forced synchronous layouts? The main idea is to do all of your read operations before your write operations that change the layout of an element. As long as you follow that principle it's less important what properties you use. Although of course it's always a good idea to use properties that do as little work as possible.

.High-Performance Animations is a good resource on what properties are efficient though. This relates to the layers approach that Derek mentioned.