Reflow per rendered row

[vanslly]

Description

Reflow occurs once per row render, rather than once per grid render. Since a grid tends to have many rows, reflow per row is impacting performance significantly.

There's various ways this could be achieved.

1. Considering that the horizontal scroll position is a property of the viewport of a grid, rather than an individual row. The scroll position should be externalized and provided to all rows, rather than each row individually querying the horizontal scroll position.
2. A momoized function, that is module (webpack module) scoped, could be used for obtaining the horizontal scroll position when rendering a row.

Related is #5078 which resolved the issue of reflow being caused multiple times when a single row is rendered.

• igniteui-angular version: 7.3.9
• browser: Chrome 75

Steps to reproduce

1. Create a new Angular app with igniteui-angular@7.3.9 as a dependency.
2. Add a basic grid
3. Use Chrome to performance profile the initial grid render.
4. Notice the purple blocks on Chrome Dev Tools Performance Tabs's flame chart.

Result

You can observe how reflow gets worse per row rendered, because the DOM node count and event handler count is increasing for each rendered row.

By the time the 12th row is rendered reflow is more costly than the DOM insertions for the row.

Expected result

No reflow per row rendered. At most reflow should occur once per grid render.

[zdrawku]

Hello @vanslly, this is something that @rkaraivanov and @ChronosSF has been working on lately, and they will update this issue shortly

[zdrawku]

@vanslly, your observation is correct, we are going to plan time for further investigation and development, thank you for your recommendations and help with this

[ChronosSF]

@vanslly , I wanted to resolve this with the first fix that's already live but this one is a little bit trickier and will likely require some API changes to do cleanly for some specific scenarios (not grid relared).

As the rendering performance will only improve by very little I'll postpone the work on this for now so we can tackle it for a major version along with some small refactoring that we've planned on the for-of directive anyway.