Skip to content

Performance improvement to the hide method#434

Open
vovayatsyuk wants to merge 4 commits into
fabiospampinato:masterfrom
breezefront:perf-toggle
Open

Performance improvement to the hide method#434
vovayatsyuk wants to merge 4 commits into
fabiospampinato:masterfrom
breezefront:perf-toggle

Conversation

@vovayatsyuk
Copy link
Copy Markdown
Contributor

This PR removes unnecessary style recalculation when using the hide method. I faced a performance issue when started calling hide on thousands of elements.

The improvement is made by getting rid of computeStyle usage when calling hide and using ele.style.display only. Because it doesn't matter what display value was before hiding, if display is not inside the inline style attribute.

Here is the jQuery implementation I used as a reference: https://github.com/jquery/jquery/blob/main/src/css/showHide.js#L44-L65

Here are the screenshots before PR (Total scripting 4x slowdown: 5 seconds):

Zoomed out Zoomed in
Screenshot from 2024-12-20 09-38-42 Screenshot from 2024-12-20 09-39-03

Here are the screenshots after PR (Total scripting 4x slowdown: 1 second):

Zoomed out Zoomed in
Screenshot from 2024-12-20 09-41-40 Screenshot from 2024-12-20 09-42-03

vovayatsyuk added a commit to breezefront/module-breeze that referenced this pull request Dec 20, 2024
@vovayatsyuk
Copy link
Copy Markdown
Contributor Author

vovayatsyuk commented Feb 13, 2025

I found a bug that is not caused by this PR, but the fix requires changing the same lines, so I pushed the fix here.

I pushed failing test in the separate commit, so you can easily run it against unmodified code: 68f99c7

vovayatsyuk added a commit to breezefront/module-breeze that referenced this pull request Feb 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant