Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Performance issue due to adding popper classes to body on page with large number of DOM nodes #1019

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

huynhtehoa
Copy link

@huynhtehoa huynhtehoa commented Jan 26, 2024

Problem

  • When a page contains a large number of DOM nodes, toggling floating elements becomes very slow. This happens because floating-vue is adding/removing classes directly on body, which triggers reflowing that affects a lot of nodes

  • This is extremely impactful, especially in analytics application that renders tables with many cells

  • I do not see that these added classes are used anywhere so I guess they are either legacy or for customization ability

  • Using the Egdge performance tool, we could see that $_applyShow and $_applyHide are affecting many elements during the style recalculation phase
    image
    image

Solution

  • Added an addPopperClassesToBody option to disable the adding-popper-classes-to-body behavior
  • Default to true to avoid breaking current behavior

Copy link

netlify bot commented Jan 26, 2024

Deploy Preview for v-tooltip ready!

Name Link
🔨 Latest commit e348bce
🔍 Latest deploy log https://app.netlify.com/sites/v-tooltip/deploys/65b360c2b69fe00008b29f16
😎 Deploy Preview https://deploy-preview-1019--v-tooltip.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@huynhtehoa huynhtehoa changed the title add config to disable adding popper classes to body Performance issue due to adding popper classes to body on page with large number of DOM nodes Jan 26, 2024
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