enchance/solve bad performance when clicking metric button #925
Conversation
There was a problem hiding this comment.
First of all, I like your solution and it greatly improves the performance, thank you! However, I have some comments regarding the code quality. Especially the view breaks if the content of the table cells get to long, which is unfortunately a realistic use case. Nevertheless, looking forward to include this PR!
|
@cyfml: Here is an example of a result zip file that breaks the new view. It's just the PartialPlagiarism test case with longer (realistic) submission names. |
|
Ah, and of course please also update to the current state of the |
@sebinside Thanks, the difficult of this is it doesn't fit for table, it's more suitable for list. Because in table structure, i add the new component |
|
@cyfml What about DynamicScroller then? The benefit is described as |
|
@sebinside I am trying. |
|
@sebinside All things are done. Please review it and test them. |
|
Kudos, SonarCloud Quality Gate passed! |
|
Good work, I tested it with 3000 comparisons and did not encounter any problems. Thank you! |
|
@sebinside Thanks. Could you add an item about this problem in issues list? When i write documentation, i have something to look. |
This PR fixed bad performance when clicking metric button. When there are more than thousand comparisons, it becomes very slow. The reason is that, web page needs to re-render thousand of DOM nodes (
<tr>). Because all comparisons shows in theComparisonsTable. It wastes too much time and memory. I found it takes 1 second or even several seconds to load page in Vue dev tool, when there are over 1K comparisons. This problem should be considered at designing, but not too late.Actually, there are two solutions;
paging:
show some parts of comparisons in one page. This solution dosen't fit our design. Because scrolling will be more suitable to see the coherence of similarity. From high to low.
virtual scroll:
Virtual scrolling enables a performant way to simulate all items being rendered by making the height of the container element the same as the height of a total number of elements to be rendered, and then only rendering the items in view. So performance is really good, even there are over 10K records. So I choose this way to improve the performance. But we need install this plugin
(vue-virtual-scroller@next).I keep the layout of this
ComparisonsTableas before as possible. Because original table layout must be replaced when using this plugin.Additionally, I also made the route lazy loaded.