Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Forced reflow - Performance bottleneck

See original GitHub issue

Hello akiran,

The slider has been an amazing addition for many projects of ours. Thank you.

We were trying to optimize all our apps using several metrics.

A case in which the slider seems to trigger expensive forced reflow of our layouts which is impacting the performance on a huge scale.

We wanted to know if it is such that this issue can be fixed or our implementation of it is not the optimal in a way.

helpers.js getWidth: function getWidth(elem) { return elem && (elem.getBoundingClientRect().width || elem.offsetWidth) || 0; },

Can this be optimized?

screen shot 2018-06-15 at 11 31 54 am 2

screen shot 2018-06-15 at 11 46 37 am 2

Thank you for your time.

Issue Analytics

State:
Created 5 years ago
Reactions:22
Comments:19 (1 by maintainers)

Top GitHub Comments

2reactions

aripekkakocommented, Jun 25, 2018

I’m not a maintainer of this repository. I think your best bet is to

make a quick-and-dirty test to see if your performance problems are fixed with the recycling.
If it works, then submit a PR with a proper fix
Hope Akiran will have time to look the PR through and prepare to maintaining your own fork in the meantime.

0reactions

BHARANA4commented, Sep 17, 2021

same issue

Top Results From Across the Web

What is a Forced Reflow and How to Solve it? - Yonatan Kra

Force reflow (or Layout Reflow) is a major performance bottleneck. It happens when a measurement of the DOM happens after a DOM mutation....

Forced reflow is likely performance bottleneck - Stack Overflow

It says it's likely a performance issue because it takes time and it is synchronous. If you read, set, read, set, read, set...

What forces layout/reflow. The comprehensive list. · GitHub

This is also called reflow or layout thrashing, and is common performance bottleneck. Generally, all APIs that synchronously provide layout metrics will ...

Forced reflow is likely performance bottleneck - YouTube

CSS : Google DevTool Timeline: Forced reflow is likely performance bottleneck [ Beautify Your Computer ...

Layout Thrashing and Forced Reflows - Web Performance Tips

If you hover over one of these tasks, you'll see a warning stating: Forced reflow is a likely performance bottleneck.