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?

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?

• javascript
• highcharts
• google-chrome-devtools

• 1 In most scenarios, if you want a better performance on manipulating DOM elements, you should separate it into a new layer and use only the hardware accelerated transformations which do not trigger any reflow of the entire page. – Derek 朕會功夫 Commented Oct 24, 2017 at 8:41
• @Derek朕會功夫 Very nice article. I tried to move one expensive element to a new layer, and it does reduce the reflow occurrences. The impact was not that massive, but it's a start. Thanks! – scipper Commented Oct 24, 2017 at 10:54
• You can switch to canvas charts. – woxxom Commented Oct 24, 2017 at 16:48

1 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.