Krinkle has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/382230 )
Change subject: mediawiki.notification: Move offset() computation to next frame
......................................................................
mediawiki.notification: Move offset() computation to next frame
Crrently on all page views in WMF production, the $.ready handler
is inserting the notif $area and subsequently doing a forced
style calculation due to getBoundingClientRect() from offset().
Move this to an animation frame instead and re-order the statements
so that DOM reads go before DOM writes.
Change-Id: I7c6201dc8d4e3227e01b75e853b6e4dc9a734031
---
M resources/src/mediawiki/mediawiki.notification.js
1 file changed, 25 insertions(+), 11 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/30/382230/1
diff --git a/resources/src/mediawiki/mediawiki.notification.js
b/resources/src/mediawiki/mediawiki.notification.js
index 291d996..5e4994f 100644
--- a/resources/src/mediawiki/mediawiki.notification.js
+++ b/resources/src/mediawiki/mediawiki.notification.js
@@ -280,6 +280,10 @@
.toggleClass( 'mw-notification-area-layout',
!isFloating );
}
+ /**
+ * Write to the DOM
+ */
+
// Prepend the notification area to the content area and save
it's object.
$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.
@@ -301,21 +305,31 @@
} );
mw.util.$content.prepend( $area );
- offset = $area.offset();
- $area.css( 'display', 'none' );
+ /**
+ * Read from the DOM.
+ * Must be in the next frame to avoid synchronous layout
+ * computation from offset()/getBoundingClientRect().
+ */
+ rAF( function () {
+ offset = $area.offset();
- $( window ).on( 'scroll', updateAreaMode );
+ // Initial mode (reads, and then maybe writes)
+ updateAreaMode();
- // Initial mode
- updateAreaMode();
+ // Once we have the offset for where it would normally
render, set the
+ // initial state of the (currently empty) notification
area to be hidden.
+ $area.css( 'display', 'none' );
- // Handle pre-ready queue.
- isPageReady = true;
- while ( preReadyNotifQueue.length ) {
- notif = preReadyNotifQueue.shift();
- notif.start();
- }
+ $( window ).on( 'scroll', updateAreaMode );
+
+ // Handle pre-ready queue.
+ isPageReady = true;
+ while ( preReadyNotifQueue.length ) {
+ notif = preReadyNotifQueue.shift();
+ notif.start();
+ }
+ } );
}
/**
--
To view, visit https://gerrit.wikimedia.org/r/382230
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I7c6201dc8d4e3227e01b75e853b6e4dc9a734031
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Krinkle <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
