Increase Scrolling performance

[listyque]

Is your feature request related to a problem? Please describe.
If we have more than 50 table items in a row we hit real big performance issues. Video example:

Describe the solution you'd like
https://dev.opera.com/articles/css-will-change-property/

[remkonoteboom]

Did it also take that long to switch tabs? I saw you pressed it a few times.

At the moment, we are relying on the browser scroll (no javascript). Have you tried the "will-change" property mentioned in your linked articles on that slow scrolling element?

[listyque]

Hi!
Yes i tryed the "will-change", also some other hacks. Browser now do not redraw on scroll, but it not make any performance difference.
Tab switching took long time to just switch. It happens all time whet tabs with lots table rows switched.

Before spike: just scrolling simple table with 50+ items.
First spike: Right after clicking on tab with Assets
Second spike: The Assets tab actually showed.
After that scrolling Assets tab a little

[listyque]

Loading Assets table in with chunks:

[listyque]

Also: Closing all tabs does not cleaning DOM Nodes, and JS event listeners

[listyque]

A lot of events and DOM Nodes seems to be generated by "Buttons" widgets, and TaskElementWdg.
Does js have something like "instances"? Looks like every row of this table is a big application by itself :)

[diegocortassa]

I can confirm that switching to a big table take quite a long time for me too

[remkonoteboom]

The basic problem here is that recalculating a large table style is slow. Doing a performance test, I get:

Recalculate Style: Forced reflow is likely a performance bottleneck.

I think this occurs both when switching tabs and scrolling although on my machine I have no scrolling bottleneck. However, I looked at the task manager on a big table (500 rows with tasks visible) and noticed that when I scroll quickly on a big table (on Chrome), the GPU goes way up. I have a 1050Ti graphics card on my laptop, so this probably why I never noticed the performance hit on scrolling: this GPU is easily able to handle it.

However, the tab change was slower ... again not that slow because of the GPU, but there was definitely an extended pause.

The table layout is is certainly not optimized with the styling. Actually, it's rather bad with way too much inline styling. This might be significantly improved with using classes. I will try moving some css to handle be more central and see if that helps.

[listyque]

I tested the same table on Firefox: Scrolling performance is perfect (60fps). On Chrome maximum 5-10fps.
Switching tabs on firefox is also faster.
Firefix is using 10-40% of GPU
Chrome: 5-15% of GPU

I can send to You html file (34Mb) with my table if You need

[remkonoteboom]

Don't worry, I can reproduce the behavior with a big table I have. The big offender, I believe is the task column. If I remove that, everything is much faster. I am making some optimizations on the table itself and after I will try to take on the task column which has a lot of redundant css. Without the task column, my tab switching is significantly faster.

[remkonoteboom]

Another optimization (which is still experimental) is to remove the bvr attrs. These are not needed after initial load, but they hang around. Setting this "feature/remove_bvr_attrs" to "true" will remove this. This makes for significantly smaller html with all the bvr garbage removed.

There is a caveat which hasn't been fixed yet. When doing a clone of an element, the behaviors will not be copied because these attrs are removed. The above setting will keep the behaviors if "SPT_TEMPLATE" class is added to it. We haven't completely covered all places where items are clone, so at times it cause the UI to seem to be not functioning. But most things will work and it would be great if others could find places where it doesn't work.

The good thing is that a 34Mb file like the one you have would probably be much much smaller and much more readable.

[listyque]

This thing: "feature/remove_bvr_attrs" made the same table from 34 to 10 Mb.
I am surprised that this is not enabled by default :P
Also, removing "Tasks" column - make a lot differenct, not as perfect as in firefox, but 2-4x faster