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

[Performance] Improve scrolling performance #382

Closed
HEIGE-PCloud opened this issue Dec 8, 2021 · 1 comment · Fixed by #402
Closed

[Performance] Improve scrolling performance #382

HEIGE-PCloud opened this issue Dec 8, 2021 · 1 comment · Fixed by #402
Assignees
Labels
performance The performance needs to be improved

Comments

@HEIGE-PCloud
Copy link
Owner

HEIGE-PCloud commented Dec 8, 2021

image

The scrolling is super slow...

DoIt/src/js/theme.js

Lines 912 to 942 in f7386ce

function handleScrollEvent () {
window.newScrollTop = getScrollTop()
const scroll = window.newScrollTop - window.oldScrollTop
const isMobile = isMobileWindow()
forEach($headers, $header => {
if (scroll > ACCURACY) {
$header.classList.remove('animate__fadeInDown')
animateCSS($header, ['animate__fadeOutUp', 'animate__faster'], true)
} else if (scroll < -ACCURACY || window.newScrollTop <= 20) {
$header.classList.remove('animate__fadeOutUp')
animateCSS($header, ['animate__fadeInDown', 'animate__faster'], true)
}
})
if (window.newScrollTop > MINIMUM) {
if (isMobile && scroll > ACCURACY) {
$fixedButtons.classList.remove('animate__fadeIn')
animateCSS($fixedButtons, ['animate__fadeOut', 'animate__faster'], true)
} else if (!isMobile || scroll < -ACCURACY) {
$fixedButtons.style.display = 'block'
$fixedButtons.classList.remove('animate__fadeOut')
animateCSS($fixedButtons, ['animate__fadeIn', 'animate__faster'], true)
}
} else {
if (!isMobile) {
$fixedButtons.classList.remove('animate__fadeIn')
animateCSS($fixedButtons, ['animate__fadeOut', 'animate__faster'], true)
}
$fixedButtons.style.display = 'none'
}
for (const event of window.scrollEventSet) event()
window.oldScrollTop = window.newScrollTop

#368

@HEIGE-PCloud HEIGE-PCloud added the bug Something isn't working label Dec 8, 2021
@HEIGE-PCloud HEIGE-PCloud changed the title [BUG] Improve scrolling performance [Performance] Improve scrolling performance Dec 8, 2021
@HEIGE-PCloud HEIGE-PCloud added performance The performance needs to be improved and removed bug Something isn't working labels Dec 8, 2021
@HEIGE-PCloud
Copy link
Owner Author

The main cost comes from getBoundingClientRect. The usage of this function needs to be audited and use constants to cache its result if possible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
performance The performance needs to be improved
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant