== Steps to reproduce
# Go to https://en.m.wikipedia.org/wiki/List_of_Nvidia_graphics_processing_units on a mobile device (also reproduced on https://en.wikipedia.org/wiki/List_of_AMD_graphics_processing_units)
# Attempt to scroll or tap the menu
== Expected results
menu opens, page scrolls, etc
== Observed results
Page is unresponsive
== Environments observed
- Browser version: Chrome 73.0 , Firefox 66.0.2
- OS version: Android 9
- Device model: reproduced on Moto g7 plus, unsure of device of original report
== Notes:
- originally reported via email
- original reporters noticed a javascript task running for a really long time (~7s)
{F28619495- It appears this is in large part due to the pageIssues.js code in Minerva and is most noticeable when a page has a lot of nodes (the reported pages on this ticket each have over 18,000 nodes). As seen from the screenshot of the profiler, the initPageIssues function takes around 3 - 5 seconds to complete and blocks the main thread. During this time, many `this.$el.find( HEADING_SELECTOR )` calls from `Page.js` are made each taking around 50ms. If that call is cached as done in https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/503130/, this blocking from the pageIssues.js code is greatly reduced (from ~3 -5s to 78ms. {F28668990}
- It appears this is at least in large part due to the pageIssues.js code in Minerva and is most noticeable when a page has a lot of nodes (the reported pages on this ticket each have over 18,000 nodes). As seen from the screenshot of the profiler, the initPageIssues function takes around 2.5 seconds to complete and blocks the main thread. During this time, many `this.$el.find( HEADING_SELECTOR )` calls from `Page.js` are made each taking around 30ms. If that call is cached as done in https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/503130/,lso appears that the the execution of Toggler.js takes 700ms. this blocking from the pageIssues.js code is greatly reduced (from ~2.5s to 78ms.
- It also appears that the the execution of the Toggler.js code can range anywhere from 7ms to 700msIt appears it is causing lots of layout thrashing which contributes to its slow execution. More investigation is needed to determine why the Toggler execution time is so variable.
- Basically{F28668962}
- In summary, the cause of this jank is multifactorial and there are multiple performance optimizations we can make in the MF code