↓ This is Japanese version of this article
We use ag-grid in our project
this is sample
One day my colleague QA engineer in my company made a task
When there is a lot of datas in table like 500, scroll doesn't move smoothly, sometimes even stops
▼ at first as a premise we use like this "tree data grid"
tree-data
▼ But before manually added like this vertical border by Javascript
Then I thought intuitively the reason would be this vertical border which operates DOM
but as I wrote in my blog before here, always must be Don't guess, just measure it !, so I measured by using google chrome > Inspect > Performance
there are two heavy parts, orange part and blue part
- orange part -> scripting
- blue part -> recalculating style
1.orange part
I found this function of ag-grid userComponentFactory.newCellRenderer
, this would be about customizing some cells of ag-grid
cell renderer (customize cell, like link, tooltip)
we need to add link or some tooltips by hovering in project. I've talked about this with engineers, but it turned out there is no alternative way.
2.blue part
This is exactly about adding vertical border manually by Javascript
But it is lighter function than I thought ...?? it wouldn't be the reason...
...And, ... I found heavier recalculating style process...
redrawAfterScroll()
👨💻 Aha, some function after scrolling
removeRowCompos()
RowContainerComponent.removeRowElement()
👨💻 remove row ....??
At first I didn't get what's going on here, after analyzing about it, I found rowBuffer: 100
setting of ag-grid in our project.
RowBuffer
What is RowBuffer ?
For example, if we get 10,000 datas from server, browser would crash easily if ag-grid makes DOM of all datas. So 10 rows before the first visible row and 10 rows after the last visible row
In our project RowBuffer sets 100, so browser life cycle is like this
- get 500 datas from server !
- create 100 rows DOM
- scroll down
- show new rows and need to remove previous rows DOM ... repeat it
yes, to maintain number of rows data DOM (100), after scrolling ag-grid removes DOM. This is heavy function that I found RowContainerComponent.removeRowElement()
😮 So how should I set RowBuffer
?
max-rendered-rows
I found ag-grid recommend max rows should be less than 500, so RowBuffer
sets 450 (500 was too heavy)
Of course it takes time to build DOM, but it's so much better than lagging/crash scroll
Problem was solved in our case.
I knew measuring is so important as performance problem,
but I realised it deeply through my project.
sayonara👍
Top comments (0)