Menu
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?
853
Each time you read window. scrollY , you're causing a reflow. It just means that the browser is calculating the styles and layout to give you the value. It says it's likely a performance issue because it takes time and it is synchronous.
Calling getComputedStyle()getComputedStyle() will typically force style recalc. window.
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.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
