jenkins-bot has submitted this change and it was merged. Change subject: mediawiki.notification: Improve scroll performance ......................................................................
mediawiki.notification: Improve scroll performance This fixes the problem with random scroll lag when on a page that had 1 or more notifications at some point. The scroll handler was fairly expensive and kept being called on every scroll event. The actual frame where a frame is detected does take more than 16ms to paint but that's unavoidable. It only happens for 1 or 2 frames, which is perfectly within the response guidelines for RAIL. https://developers.google.com/web/fundamentals/performance/rail (MacBook Pro, Latest Chrome, CPU throttle 5x) 1. Before * Duration of no-change scroll event (not crossing offset.top in ither direction) ~5ms * Duration of changed scroll event (crossing the offset.top and swapping classes) ~10ms * Paint: - 16ms for no-change frames (50-60fps) - 40ms for frames that paint a change. (25-30fps) 2. After storing isFloating as boolean and not checking className if nothing changed. * no-change scroll event: ~0.13ms * changed scroll event: ~2ms * Paint: - 15ms for no-change frame (60fps) - 33ms for no-change frame (30fps) 3. After changing $window.scrollTop() to window.pageYOffset. * no-change scroll event: 15μs (0.015ms) * changed scroll event: ~1ms * Paint: - 11ms for no-change frame (60fps) - 20ms for no-change frame (48fps) Change-Id: Ia48b00cd0834700ce79e72d4599c51ff8c6179b5 --- M resources/src/mediawiki/mediawiki.notification.js 1 file changed, 8 insertions(+), 3 deletions(-) Approvals: Gilles: Looks good to me, approved Thiemo Mättig (WMDE): Looks good to me, but someone else must approve jenkins-bot: Verified diff --git a/resources/src/mediawiki/mediawiki.notification.js b/resources/src/mediawiki/mediawiki.notification.js index 926f8c5..e1287db 100644 --- a/resources/src/mediawiki/mediawiki.notification.js +++ b/resources/src/mediawiki/mediawiki.notification.js @@ -262,7 +262,8 @@ * @ignore */ function init() { - var offset, $window = $( window ); + var offset, + isFloating = false; $area = $( '<div id="mw-notification-area" class="mw-notification-area mw-notification-area-layout"></div>' ) // Pause auto-hide timers when the mouse is in the notification area. @@ -289,13 +290,17 @@ $area.hide(); function updateAreaMode() { - var isFloating = $window.scrollTop() > offset.top; + var shouldFloat = window.pageYOffset > offset.top; + if ( isFloating === shouldFloat ) { + return; + } + isFloating = shouldFloat; $area .toggleClass( 'mw-notification-area-floating', isFloating ) .toggleClass( 'mw-notification-area-layout', !isFloating ); } - $window.on( 'scroll', updateAreaMode ); + $( window ).on( 'scroll', updateAreaMode ); // Initial mode updateAreaMode(); -- To view, visit https://gerrit.wikimedia.org/r/324335 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: Ia48b00cd0834700ce79e72d4599c51ff8c6179b5 Gerrit-PatchSet: 2 Gerrit-Project: mediawiki/core Gerrit-Branch: master Gerrit-Owner: Krinkle <[email protected]> Gerrit-Reviewer: Bartosz Dziewoński <[email protected]> Gerrit-Reviewer: Catrope <[email protected]> Gerrit-Reviewer: Daniel Friesen <[email protected]> Gerrit-Reviewer: Esanders <[email protected]> Gerrit-Reviewer: Fomafix <[email protected]> Gerrit-Reviewer: Gilles <[email protected]> Gerrit-Reviewer: Jack Phoenix <[email protected]> Gerrit-Reviewer: Jdlrobson <[email protected]> Gerrit-Reviewer: Jforrester <[email protected]> Gerrit-Reviewer: Thiemo Mättig (WMDE) <[email protected]> Gerrit-Reviewer: VolkerE <[email protected]> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
