feat: improve rendering performance by content-visibility
#17907
Conversation
Add the CSS `content-visibility` to fluent-card of web-component. This style will avoid some unnecessary rendering processes when the components are not in the viewport. It will improve the performance of the page, like some feeds flow or multiple cards grid.
…ility feat: improve rendering performance by `content-visibility`
lqs469
requested review from
chrisdholt,
EisenbergEffect and
nicholasrice
as code owners
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: 1f31b1263b6d562edb2c5178648f846246a7ba14 (build) |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 9b6eb8d:
|
Perf AnalysisNo significant results to display. All results
Perf Analysis (Fluent)Perf comparison
Perf tests with no regressions
|
| @@ -22,6 +22,10 @@ export const CardStyles = css` | |||
| :host(:focus-within) { | |||
| --elevation: 8; | |||
| } | |||
|
|
|||
| :host * { | |||
There was a problem hiding this comment.
Does this need to be on every element within the host? I've tested this simply using :host {} and that works perfectly. I'd prefer to not use the * selector here if we don't have to - hiding the element itself should be enough.
| :host * { | |
| :host { |
There was a problem hiding this comment.
Same question from me.
There was a problem hiding this comment.
Sure, :host {} is also fine if we want to control elements behavior as possible as we can, I agree.
|
Thanks for the contribution @lqs469! Just one thing needed to pass the build and one request to modify the CSS selector. |
| @@ -22,6 +22,10 @@ export const CardStyles = css` | |||
| :host(:focus-within) { | |||
| --elevation: 8; | |||
| } | |||
|
|
|||
| :host * { | |||
There was a problem hiding this comment.
Same question from me.
|
|
@lqs469 the name of the build process is specific to react, but it runs against this as well. The portion that's missing is running |
Thanks for heads up, have updated change file. Please take a look. |
|
Thanks for the contribution @lqs469! |
|
🎉 Handy links: |
…t#17907) * feat: improve rendering performance by `content-visibility` Add the CSS `content-visibility` to fluent-card of web-component. This style will avoid some unnecessary rendering processes when the components are not in the viewport. It will improve the performance of the page, like some feeds flow or multiple cards grid. * chore: fluent-card host style * Change files Co-authored-by: Allen Lee <qinshuoli@microsoft.com>
Add the CSS
content-visibility: autoto fluent-card of web-component. This style will avoid some unnecessary rendering processes when the components are not in the viewport.It will improve the performance of the page, like some feeds flow or multiple cards grid.
Pull request checklist
None
Description of changes
Add CSS
content-visibility: autoto all elements of fluent-card.Focus areas to test
It shouldn't influence any feature or display of components.