When I re-rendered the table, I found that Recalculate Style was very time-consuming。
I guess the general reason is: when I slide the table, the columns of the table will be regenerated and rendered, and the sliding of the virtual hidden column in the middle also needs to follow the rhythm.
And I guess that the layout tree of the browser is laid out from top to bottom, and it will be very time-consuming to calculate the scrollLeft.
The solution is to throw the re-assignment calculation of scrollLeft and scrollTop into requestAnimationFrame. Let the reassignment operation not block the current react rendering process.
Janlaywss
commented
2 years ago
When I re-rendered the table, I found that Recalculate Style was very time-consuming。
I guess the general reason is: when I slide the table, the columns of the table will be regenerated and rendered, and the sliding of the virtual hidden column in the middle also needs to follow the rhythm.
And I guess that the layout tree of the browser is laid out from top to bottom, and it will be very time-consuming to calculate the scrollLeft.
The solution is to throw the re-assignment calculation of scrollLeft and scrollTop into requestAnimationFrame. Let the reassignment operation not block the current react rendering process.