Skip to content

[Feature] Improve breakpoint performance #589

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

Merged
merged 4 commits into from
May 9, 2025
Merged

Conversation

titouanmathis
Copy link
Contributor

@titouanmathis titouanmathis commented Jan 27, 2025

πŸ”— Linked issue

No issue.

❓ 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 matchMedia function is really slow in Safari, adding a cache will improve performance when accessing any of the breakpoint props from the resize service.

See https://jsbench.me/kpm6eyv92r/1 in different browsers.

πŸ“ 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.

Copy link

github-actions bot commented Jan 27, 2025

Export Size

@studiometa/js-toolkit

Name Size Diff
useResize 1.01 kB +14 B (+1.41%) πŸ”Ί
ResizeService 990 B +13 B (+1.33%) πŸ”Ί
withBreakpointManager 1.4 kB +17 B (+1.23%) πŸ”Ί
withBreakpointObserver 1.59 kB +16 B (+1.01%) πŸ”Ί
withResponsiveOptions 2.25 kB +13 B (+0.58%) πŸ”Ί
SERVICES 3.7 kB +21 B (+0.57%) πŸ”Ί
FRAMEWORK 12.33 kB +24 B (+0.20%) πŸ”Ί
BASE 7.56 kB +14 B (+0.19%) πŸ”Ί
DECORATORS 6.84 kB +9 B (+0.13%) πŸ”Ί
ALL 17.39 kB +22 B (+0.13%) πŸ”Ί
Base 7.49 kB +9 B (+0.12%) πŸ”Ί
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 -
round 56 B -
saveActiveElement 56 B -
ScrollService 1.01 kB -
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.87 kB -
useKey 847 B -
useLoad 592 B -
useMutation 819 B -
usePointer 1.08 kB -
useRaf 888 B -
useScheduler 290 B -
useScroll 1.03 kB -
UTILS 7.47 kB -
wait 79 B -
withDrag 1.99 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 -
withScrolledInView 1.85 kB -
withTrailingCharacters 96 B -
withTrailingSlash 120 B -

Copy link

codecov bot commented Jan 27, 2025

Codecov Report

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

Project coverage is 99.13%. Comparing base (1e7936f) to head (84a9b61).
Report is 5 commits behind head on develop.

Additional details and impacted files
@@           Coverage Diff            @@
##           develop     #589   +/-   ##
========================================
  Coverage    99.13%   99.13%           
========================================
  Files          122      122           
  Lines         4182     4185    +3     
  Branches      1138     1139    +1     
========================================
+ Hits          4146     4149    +3     
  Misses          36       36           
Flag Coverage Ξ”
unittests 99.13% <100.00%> (+<0.01%) ⬆️

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.

The `matchMedia` function in Safari is quite slow. If we try to access
the breakpoint inside an `requestAnimationFrame` loop, it gets slow.
@titouanmathis titouanmathis force-pushed the feature/performance branch from 2d83644 to 8fd12ab Compare May 9, 2025 10:21
@titouanmathis titouanmathis force-pushed the feature/performance branch from 8fd12ab to 84a9b61 Compare May 9, 2025 10:22
@titouanmathis titouanmathis merged commit ddfeb0a into develop May 9, 2025
14 checks passed
@titouanmathis titouanmathis deleted the feature/performance branch May 9, 2025 10:25
@titouanmathis titouanmathis mentioned this pull request May 9, 2025
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