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.

Sign up for GitHub

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

Jump to bottom

[Bug]: getScrollParent is triggering forced reflow, impacting boot performance #25326

Closed
2 tasks done
chenxinyanc opened this issue Oct 21, 2022 · 0 comments · Fixed by #25456
Closed
2 tasks done

[Bug]: getScrollParent is triggering forced reflow, impacting boot performance #25326

chenxinyanc opened this issue Oct 21, 2022 · 0 comments · Fixed by #25456
Labels
Fluent UI react-components (v9) Status: Fixed Fixed in some PR

Comments

@chenxinyanc
Copy link
Contributor

chenxinyanc commented Oct 21, 2022 •
edited
Loading

Library

React Components / v9 (@fluentui/react-components)

System Info

N/A (Using CodeSandbox)

@fluentui/react-components v9.5.2

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/s/tooltip-and-computed-style-b9wvlh?file=/example.tsx

Bug Description

After wrapping components in <Tooltip>, we observe significant time consumed by getScrollParent function.

fluentui/packages/react-components/react-positioning/src/utils/getScrollParent.ts

Line 48 in a965446

const { overflow, overflowX, overflowY } = getStyleComputedProperty(parentNode);

Especially, the window.getComputedStyle invocation in getStyleComputedProperty may force a style re-evaluation in some cases, causing performance issue.

fluentui/packages/react-components/react-positioning/src/utils/getScrollParent.ts

Line 25 in a965446

return window!.getComputedStyle(node, null);

Below is the flamechart of the example provided, when rendering 10 buttons with tooltips. (The time numbers may exaggerate as I've enabled 6x CPU slowdown to retrieve the complete stack track)
image

The example I've provided with this issue represents a typical scenario where such performance issue has been observed:

  • User opens our web app.
  • During web app initialization, we trigger a React component state change.
  • By changing the component state,
    • we change the styles of some parent <div> or <body> elements. (this is important to reproduce such a perf issue)
    • we also adds some buttons with tooltips inside the <div> element.

And we observed some browser freeze when performing the React state update, and we see a large chunk of time taken in "Recalculate Style".

Please open the sample provided, uncheck "Render buttons with tooltips", click "Render buttons", and see console output. Then after refreshing the browser check "Render buttons with tooltips", click "Render buttons", and see console output.

Actual Behavior

"Render buttons with tooltips" unchecked
image

"Render buttons with tooltips" checked
image

Animation

Expected Behavior

I don't expect to see a 5ms -> 15ms change to render the Buttons, only because I've added Tooltips for them.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Fluent UI react-components (v9) Status: Fixed Fixed in some PR
Projects
None yet
Milestone
No milestone
3 participants
@miroslavstastny @chenxinyanc @msft-fluent-ui-bot