@nray could you analyze this one?

@Gilles Can you please clarify that the problematic click handler this task is referring to is when you click on a reference link like the one pictured below and then black reference drawer pops up?

I think that's what you meant, but wanted to make sure because "Lazy Loaded references" is actually a beta feature on the mobile site that is off by default

Is that correct?

Yes, it's the overlay at the bottom of the screen that happens when clicking on a reference link. It's affecting everyone, not just beta users.

So far as I know, reference previews are strictly in the Popups extension and nothing to do with MobileFrontend, so I've removed that tag.

@Niedzielski Thank you for removing that tag

@Gilles Thank you for clarifying. I've edited the title and description to reflect that

@nray could we just use vh units here for max-height instead?

There are multiple things to the Drawers that contribute to the performance problems. Here is the profile of it on the Obama page when the first reference is clicked using 6x throttle to simulate a mobile device:

Memory Leak

First, there is a memory leak in the Drawer and ReferenceDrawer's postRender methods. Within those methods, event listeners are setup. The leak occurs because with each click of a reference, the postRender methods are called in the init script, and after the gateway promise resolves. The postRender methods are also called when the ReferenceDrawer first initializes. Minerva uses the same reference drawer instance for each reference so the event listeners are added and never removed with each click of a reference.

Bottom line: Many extraneous setTimeout calls can be executed because of this memory leak.

Forced Synchronous Layout

When the reference drawer first displays, the Drawer's util.docReady callback is executed before the gateway resolves. The docReady invalidates the document by appending the drawer to the DOM. When the gateway resolves, it calls drawer.render causing the ReferencesDrawer postRender() method to call util.getWindow().height(); which triggers a forced synchronous layout.

	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 ) );
	},

We should be able to replace the drawer max-height logic with CSS alone (by setting a max-height on the .drawer class:

.drawer  {
   max-height: 50%;
}

Bottom line: By removing the JS code that queries the window height and replacing it with CSS, it should be enough to get rid of the FSL!.

Large Recalc Style (unrelated to the forced synchronous layout)

This is mostly likely caused by having a large DOM and will be difficult to change.

In T226025#5318006, @Jdlrobson wrote:

@nray could we just use vh units here for max-height instead?

@Jdlrobson Since the drawer uses fixed positioning, I think we could actually just use max-height here alone and it would get rid of the FSL. See my analysis above for more info!

Sounds like a plan! It would also simplify the Drawer code making it easier to refactor.