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

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

Merged
merged 1 commit into from
Mar 22, 2021

Conversation

armano2
Copy link
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

@netlify
Copy link

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

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

⚡️ 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
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
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
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