Optimize comparison list view
The comparison view contains a list view in a scrollable area with an line item for every metadata item in the comparison. Depending on the comparison, this list can be exorbitantly long (10k+ lines). Displaying this many elements on screen is extremely inefficient, and causes browsers to lock up when selecting the "check all" check box (because it results in thousands of incremental manipulations in the DOM). This issue also causes mobile browsers to crash when more than a thousand or so items show in the comparison results.
There is a common pattern for handling long lists like this, in which a finite number of list items exist in the DOM. These list items are reused as a user scrolls through the list. Once a list item has scrolled far enough out of view, it is moved to the opposite side of the list, and its content dynamically updated to display the appropriate data for that index.
Spence DiNicolantonio
shared this idea
-
Thanks for the feedback!
The comparison viewer actually already employs the optimization you mention in order to improve the performance of the page when you have a very large comparison. We're aware of the problem with the "check all" box's performance in very large comparisons, particularly when you're currently viewing the "Selected items" tab. I believe the issue isn't actually down to DOM operations but rather a slowdown due to recalculating various internal state, such such as filtering the list for the "Selected items" tab and sorting the current view of the objects.
We've been working on the performance of this page (and several other parts of the app), but I recognize this particular issue could probably use some more attention. Out of interest, which mobile browser in particular were you experiencing crashes with?
