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
menu opens, page scrolls, etc
Page is unresponsive
- 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
- originally reported via email
- 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.
- It also appears that the the execution of Toggler.js takes 700ms. It appears it is causing lots of layout thrashing which contributes to its slow execution.
- In summary, the cause of this jank is multifactorial and there are multiple performance optimizations we can make in the MF code