Skip to content

perf(v2): reduce amount of component updates while scrolling#4473

Merged
slorber merged 1 commit intofacebook:masterfrom
armano2:perf/scroll-position
Mar 22, 2021
Merged

perf(v2): reduce amount of component updates while scrolling#4473
slorber merged 1 commit intofacebook:masterfrom
armano2:perf/scroll-position

Conversation

@armano2
Copy link
Copy Markdown
Contributor

@armano2 armano2 commented Mar 19, 2021

Motivation

This change limits amount of NavBar component updates by not updating it on every keyframe while user scroll through website

fixes #4454

Chrome

New "performance"

image

Old "performance"

image

Firefox

New flame chart

image

Old flame chart

image

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

open website in browser and start scrolling

@armano2 armano2 requested review from lex111 and slorber as code owners March 19, 2021 18:00
@netlify
Copy link
Copy Markdown

netlify bot commented Mar 19, 2021

@armano2 armano2 changed the title perf(v2): reduce amount of navbar renders while scrolling perf(v2): reduce amount of navbar updates while scrolling Mar 19, 2021
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Mar 19, 2021
@netlify
Copy link
Copy Markdown

netlify bot commented Mar 19, 2021

Deploy preview for docusaurus-2 ready!

Built without sensitive environment variables with commit 31ccd9f

https://deploy-preview-4473--docusaurus-2.netlify.app

@github-actions
Copy link
Copy Markdown

⚡️ Lighthouse report for the changes in this PR:

Category Score
🟢 Performance 92
🟢 Accessibility 96
🟢 Best practices 100
🟢 SEO 100
🟢 PWA 95

Lighthouse ran on https://deploy-preview-4473--docusaurus-2.netlify.app/

@armano2
Copy link
Copy Markdown
Contributor Author

armano2 commented Mar 19, 2021

There is actually more potential for optimization here, as we could add throttle to scroll event

Copy link
Copy Markdown
Contributor

@lex111 lex111 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, thanks for fixing my unoptimized code! 👏

@lex111 lex111 added the pr: performance This PR does not add a new behavior, but existing behaviors will be more memory- / time-efficient. label Mar 19, 2021
@armano2 armano2 changed the title perf(v2): reduce amount of navbar updates while scrolling perf(v2): reduce amount of component updates while scrolling Mar 20, 2021
@slorber
Copy link
Copy Markdown
Collaborator

slorber commented Mar 22, 2021

thanks, that looks good :)

@slorber slorber merged commit f12e8b5 into facebook:master Mar 22, 2021
@armano2 armano2 deleted the perf/scroll-position branch March 22, 2021 20:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Signed Facebook CLA pr: performance This PR does not add a new behavior, but existing behaviors will be more memory- / time-efficient.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Scrolling causes a noticeable stutter on Docusaurus v2 websites

4 participants