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.
|
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.
|
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)
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
"Render buttons with tooltips" checked
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
Library
React Components / v9 (@fluentui/react-components)
System Info
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 bygetScrollParentfunction.fluentui/packages/react-components/react-positioning/src/utils/getScrollParent.ts
Line 48 in a965446
Especially, the
window.getComputedStyleinvocation ingetStyleComputedPropertymay 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
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)
The example I've provided with this issue represents a typical scenario where such performance issue has been observed:
<div>or<body>elements. (this is important to reproduce such a perf issue)<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
"Render buttons with tooltips" checked
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