Skip to content

[Bugfix] Performance: scroll layout thrashing #645

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

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from

Conversation

titouanmathis
Copy link
Contributor

@titouanmathis titouanmathis commented Jul 17, 2025

πŸ”— Linked issue

No

❓ Type of change

  • πŸ“– Documentation (updates to the documentation, readme or JSdoc annotations)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality like performance)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

The useSroll() service and the withScrolledInView decorator were reading the current scroll from the window object on each frame, triggering layout thrashing and slowing performance down.

This PR refactors access to the current scroll to limit performance drains.

Capture d’écran 2025-07-17 aΜ€ 14 32 20

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have added tests (if possible).
  • I have updated the documentation accordingly.
  • I have updated the changelog.

When updating the scroll serviced props, we read values from the DOM
which trigger a layout recalculation too soon. We switch to using the
existing `domScheduler` to separate updating the props and triggering
the service's callbacks into different scheduled tasks.
Reading the scroll from the window can trigger layout thrashing,
switching to scroll values from the scroll service which already
implement a more performant way of reading scroll values.
Copy link

Export Size

@studiometa/js-toolkit

Name Size Diff
withScrolledInView 2.74 kB +886 B (+47.84%) πŸ”Ί
ScrollService 1.26 kB +247 B (+24.33%) πŸ”Ί
useScroll 1.28 kB +246 B (+23.86%) πŸ”Ί
DECORATORS 7.21 kB +355 B (+5.18%) πŸ”Ί
SERVICES 3.73 kB +23 B (+0.62%) πŸ”Ί
BASE 7.59 kB +29 B (+0.38%) πŸ”Ί
Base 7.52 kB +28 B (+0.37%) πŸ”Ί
ALL 17.42 kB +28 B (+0.16%) πŸ”Ί
FRAMEWORK 12.35 kB +18 B (+0.15%) πŸ”Ί
Unchanged

@studiometa/js-toolkit

Name Size Diff
AbstractService 512 B -
addClass 226 B -
addStyle 238 B -
animate 2.92 kB -
boundingRectToCircle 154 B -
cache 179 B -
camelCase 401 B -
clamp 67 B -
clamp01 87 B -
collideCircleCircle 99 B -
collideCircleRect 159 B -
collidePointCircle 112 B -
collidePointRect 103 B -
collideRectRect 99 B -
createApp 1.28 kB -
createEaseInOut 116 B -
createEaseOut 71 B -
createElement 526 B -
createRange 90 B -
damp 78 B -
dashCase 376 B -
debounce 92 B -
domScheduler 296 B -
DragService 1.85 kB -
ease 435 B -
easeInCirc 68 B -
easeInCubic 59 B -
easeInExpo 80 B -
easeInOutCirc 141 B -
easeInOutCubic 130 B -
easeInOutExpo 134 B -
easeInOutQuad 128 B -
easeInOutQuart 133 B -
easeInOutQuint 152 B -
easeInOutSine 151 B -
easeInQuad 63 B -
easeInQuart 61 B -
easeInQuint 62 B -
easeInSine 77 B -
easeLinear 49 B -
easeOutCirc 115 B -
easeOutCubic 103 B -
easeOutExpo 112 B -
easeOutQuad 103 B -
easeOutQuart 100 B -
easeOutQuint 103 B -
easeOutSine 121 B -
endsWith 88 B -
getAncestorWhere 91 B -
getAncestorWhereUntil 119 B -
getClosestParent 173 B -
getComponentResolver 138 B -
getDirectChildren 194 B -
getInstanceFromElement 90 B -
getInstances 146 B -
getOffsetSizes 159 B -
hasWindow 62 B -
HELPERS 2.43 kB -
historyPush 499 B -
historyReplace 503 B -
importOnInteraction 891 B -
importOnMediaQuery 236 B -
importWhenIdle 223 B -
importWhenPrefersMotion 275 B -
importWhenVisible 911 B -
inertiaFinalValue 142 B -
isArray 70 B -
isBoolean 78 B -
isDefined 86 B -
isDev 72 B -
isDirectChild 206 B -
isEmpty 207 B -
isEmptyString 93 B -
isFunction 72 B -
isNull 72 B -
isNumber 84 B -
isObject 105 B -
isString 86 B -
keyCodes 97 B -
KeyService 833 B -
lerp 57 B -
loadElement 169 B -
loadIframe 189 B -
loadImage 188 B -
loadLink 186 B -
loadScript 197 B -
LoadService 577 B -
lowerCase 60 B -
map 71 B -
matrix 106 B -
mean 91 B -
memo 100 B -
memoize 189 B -
MutationService 784 B -
nextFrame 162 B -
nextMicrotask 111 B -
nextTick 134 B -
noop 39 B -
noopValue 49 B -
objectToURLSearchParams 302 B -
pascalCase 377 B -
PointerService 1.05 kB -
Queue 226 B -
RafService 878 B -
randomInt 80 B -
randomItem 232 B -
removeClass 222 B -
removeStyle 238 B -
ResizeService 990 B -
round 56 B -
saveActiveElement 56 B -
scrollTo 2.12 kB -
SmartQueue 411 B -
snakeCase 378 B -
startsWith 87 B -
throttle 101 B -
toggleClass 225 B -
transform 321 B -
transition 916 B -
trapFocus 363 B -
tween 1.55 kB -
untrapFocus 45 B -
upperCase 54 B -
useDrag 1.89 kB -
useKey 847 B -
useLoad 592 B -
useMutation 819 B -
usePointer 1.08 kB -
useRaf 888 B -
useResize 1.01 kB -
useScheduler 290 B -
UTILS 7.47 kB -
wait 79 B -
withBreakpointManager 1.4 kB -
withBreakpointObserver 1.59 kB -
withDrag 2.01 kB -
withExtraConfig 135 B -
withFreezedOptions 140 B -
withIntersectionObserver 260 B -
withLeadingCharacters 88 B -
withLeadingSlash 107 B -
withMountOnMediaQuery 322 B -
withMountWhenInView 286 B -
withMountWhenPrefersMotion 355 B -
withMutation 943 B -
withName 81 B -
withoutLeadingCharacters 86 B -
withoutLeadingCharactersRecursive 124 B -
withoutLeadingSlash 93 B -
withoutTrailingCharacters 98 B -
withoutTrailingCharactersRecursive 129 B -
withoutTrailingSlash 103 B -
withRelativePointer 1.21 kB -
withResponsiveOptions 2.25 kB -
withTrailingCharacters 96 B -
withTrailingSlash 120 B -

Copy link

codecov bot commented Jul 17, 2025

Codecov Report

All modified and coverable lines are covered by tests βœ…

Project coverage is 99.13%. Comparing base (fe7b21e) to head (39bba0f).

Additional details and impacted files
@@           Coverage Diff            @@
##           develop     #645   +/-   ##
========================================
  Coverage    99.13%   99.13%           
========================================
  Files          122      122           
  Lines         4186     4186           
  Branches      1139     1143    +4     
========================================
  Hits          4150     4150           
  Misses          36       36           
Flag Coverage Ξ”
unittests 99.13% <100.00%> (ΓΈ)

Flags with carried forward coverage won't be shown. Click here to find out more.

β˜” View full report in Codecov by Sentry.
πŸ“’ Have feedback on the report? Share it here.

πŸš€ New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • πŸ“¦ JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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

Successfully merging this pull request may close these issues.

1 participant