Solve frontend performance problem by chrome dev tool in real project (ag-grid)

↓ 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

tadaam

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

1. get 500 datas from server !
2. create 100 rows DOM
3. scroll down
4. 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👍