Had a really interesting chat with @Krinkle just now.
He pointed out that in PagePreviews we wait for the document to be loaded, query the page to get all the links that can be hovered and then add a event handler to all those links.
We already do this, but only for the article content container.
The downsides of current approach:
- The first-possible activation of page previews is artificially postponed until the entire page is ready (including below-the-fold images, and other scripts)
- High cost to querying the DOM, creating and iterating a large array, and attaching many event listeners (one for each link).
Using jQuery event delegation on the /document/, we can avoid the need to add many event listeners by using only one (on the document object), and this approach also doesn't require waiting till the DOM is ready.
$(() => $('a').on('click', showHoverCard)); // wait for dom ready, find all <a>, implicit iterate, add event listener to each
becomes
$(document).on('click', '#mw-content-text a', showHoverCard);
This will make use of event bubbling to add a single event handler to the body element. When the event fires, it will look at ev.target and fire the event only if the element matches the selector.
This means a link that has been rendered before the document is ready will show a page preview right away.
More documentation here: http://api.jquery.com/on/
This seems like a no-brainer.
Acceptance criteria
- Remove the mw.hook subscription
- Set the .on listeners on document
- Modify validLinkSelector to include the selector for the wikipage.content container