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 = $( '' )
// 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
Gerrit-Reviewer: Bartosz Dziewoński
Gerrit-Reviewer: Catrope
Gerrit-Reviewer: Daniel Friesen
Gerrit-Reviewer: Esanders
Gerrit-Reviewer: Fomafix
Gerrit-Reviewer: Gilles
Gerrit-Reviewer: Jack Phoenix
Gerrit-Reviewer: Jdlrobson
Gerrit-Reviewer: Jforrester
Gerrit-Reviewer: Thiemo Mättig (WMDE)
Gerrit-Reviewer: VolkerE
Gerrit-Reviewer: jenkins-bot <>
___
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
