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

[Feature] Improve breakpoint performance #589

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

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.

The `matchMedia` function in Safari is quite slow. If we try to access
the breakpoint inside an `requestAnimationFrame` loop, it gets slow.
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 +16 B (+0.43%) πŸ”Ί
Base 7.5 kB +16 B (+0.21%) πŸ”Ί
DECORATORS 6.85 kB +13 B (+0.19%) πŸ”Ί
BASE 7.57 kB +13 B (+0.17%) πŸ”Ί
FRAMEWORK 12.33 kB +5 B (+0.04%) πŸ”Ί
Unchanged

@studiometa/js-toolkit

Name Size Diff
AbstractService 512 B -
addClass 226 B -
addStyle 238 B -
ALL 17.4 kB -
animate 2.93 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 880 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.13 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.56 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 894 B -
useScheduler 290 B -
useScroll 1.03 kB -
UTILS 7.5 kB -
wait 79 B -
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 -
withScrolledInView 1.87 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.02%. Comparing base (8ff7f35) to head (2d83644).
Report is 8 commits behind head on develop.

Additional details and impacted files
@@           Coverage Diff            @@
##           develop     #589   +/-   ##
========================================
  Coverage    99.01%   99.02%           
========================================
  Files          122      122           
  Lines         4183     4186    +3     
  Branches      1139     1140    +1     
========================================
+ Hits          4142     4145    +3     
  Misses          41       41           
Flag Coverage Ξ”
unittests 99.02% <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.

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