point-platform/biggus-griddus

Replace paired remove/insert events with single replace

Closed this issue · 0 comments

Currently many operations (scrolling, certain updates during sorting) causes a row to be removed, and another inserted.

The Grid<T> class currently actually removes the <tr> element from the table, and adds a new one.

This results in a lot of DOM element churn, as can be seen in this timeline which was captured during a prolonged period of heavy scrolling back and forth in a table with several thousand rows:

image

It also has the effect that, for a split moment, the table has one fewer rows, which can cause a re-layout.

The solution is to remodel this as a 'replace' which takes an existing <tr> element, moves it to a new position and rebinds it to a new data item.