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.
Dropdown: Consider avoid force recalculation styles
See original GitHub issue// Excuse my beginner’s English
Look at this code please: https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Dropdown/Dropdown.js#L953
Forced reflow is a likely performance bottleneck.
In this lines of code, DOM is reading and writing immediately.
Would be cool, if dom reading will be removed in favor of calculations on variables. Maybe DOM reading could be async (via requestAnimationFrame).
Issue Analytics
- State:
- Created 6 years ago
- Reactions:18
- Comments:15 (4 by maintainers)
Top Results From Across the Web
What is involved in Chrome's Recalculate Style Event?
Recalculate Style. Get all the style rules; Evaluate the selectors and match against the DOM; Calculate the computed style for every element.
Read more >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....
Read more >Dropdown - Semantic UI
A dropdown allows a user to select a value from a series of options. ... description may require setting a minimum width on...
Read more >Specificity - CSS: Cascading Style Sheets - MDN Web Docs
Avoiding and overriding !important · Increase the specificity of the selector of the formerly !important declaration so that it is greater than ...
Read more >Minimizing browser reflow | PageSpeed Insights
From the table above it's clear that not all changes to the style in ... Avoid unnecessary complex CSS selectors - descendant selectors...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hey folks, please use the reaction button on the main thread to show support. This makes issues sortable by most reactions and helps assess their potential impact. Comments confirming the issue ping a lot of people and get lost in the noise.
This issue has been labeled
optimizationandhelp wantedmeaning it is valid, we are aware many people are experiencing the problem, and we’d love a PR. With ❤️ , thank you!We should investigate implementing react-virtualized for the Dropdown list. This could resolve perf issues with large lists.