The Event Timing API [[ https://phabricator.wikimedia.org/T216597 | origin trial ]] revealed that the click handler for reference links can be quite slow (occurrences taking > 50ms). The reason is most likely that the reference drawer contains expensive viewport size access, which cause a [[ https://gist.github.com/paulirish/5d52fb081b3570c81e3a | styles recalc and layout ]].
The offending code: https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/917d7bd07e1b19dbb2e22aca4199bb9c8ff9bca9/src/mobile.startup/references/ReferencesDrawer.js#L80-L87
```
postRender: function () {
var windowHeight = util.getWindow().height();
Drawer.prototype.postRender.apply( this );
this.$el.find( '.references-drawer__header' ).append( [
new Icon( {
isSmall: true,
name: 'citation-invert',
additionalClassNames: 'references-drawer__title',
hasText: true,
label: mw.msg( 'mobile-frontend-references-citation' )
} ).$el,
icons.cancel( 'gray' ).$el
] );
// For lazy loading references - if no text append a spinner
if ( !this.options.text ) {
this.$el.append( icons.spinner().$el );
}
// make sure the drawer doesn't take up more than 50% of the viewport height
if ( windowHeight / 2 < 400 ) {
this.$el.css( 'max-height', windowHeight / 2 );
}
this.on( 'show', this.onShow.bind( this ) );
this.on( 'hide', this.onHide.bind( this ) );
},
```
This doesn't seem like something that's critical, and I'm pretty sure something equivalent can be achieved with a CSS media query. This code should be removed and a CSS-only solution/compromise found, in order to avoid responsiveness issues when users open a reference. To be clear, this can be slow all the time, not just when the conditional kicks in. It's getting the viewport size that's costly.
== Profile
{F29792007}
== Dev notes
To see a review of analysis on this, see https://phabricator.wikimedia.org/T226025#5342756
Since the drawer uses fixed positioning, I think we can remove the forced synchronous layout by removing the JS that checks the window's height and simply using the following CSS. Something like:
```
.drawer {
max-height: 50%
}
```
As found in https://phabricator.wikimedia.org/T209129#4885940 and discussed more [[ https://phabricator.wikimedia.org/T226025#5342756 | in this ticket ]], there is also a memory leak associated with the drawers that can cause extraneous JS to execute. That might be too much to tackle in this ticket, however, so the AC is scoped to fixing the forced synchronous layout.
== Acceptance Criteria
[] Replace the JS that queries the window's height with a CSS-only solution so that the forced synchronous layout is removed
[] Look more into the memory leak and make a new ticket for fixing that with notes from your review.