Solve frontend performance problem by chrome dev tool in real project (ag-grid)
Tags: javascript, performance, frontend
Published: 2022-09-02 10:18:15

↓ This is Japanese version of this article
{%link https://dev.to/kaziusan/sukurorudedong-kanakunarimasu-wodouyatutechrome-dev-toolshi-yong-sitefrontnowen-ti-wojie-jue-sitanoka-53a2 %}

---

We use **ag-grid** in our project
[this is sample](https://www.ag-grid.com/example)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13hv5z6rue964nv0oypf.png)

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](https://www.ag-grid.com/javascript-data-grid/tree-data/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6f1lg7q3pxq9m1bugpdw.png)

▼ But before manually added like this vertical border by Javascript

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/678w17ustd99xjdesqer.png)

Then I thought intuitively the reason would be this vertical border which operates DOM

but as I wrote in my blog before [here](https://dev.to/kaziusan/rail-important-way-of-thinking-about-frontend-performance-97i), always must be **Don't guess, just measure it !**, so I measured by using **google chrome > Inspect > Performance**

tadaam
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hg55u68195v32hurd7lr.png)

there are two heavy parts, orange part and blue part
- orange part -> scripting
- blue part -> recalculating style

### 1.orange part

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yl1g5rhdxel0fv0zgcn7.png)

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)](https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgyut2ubmf6biivvkgun.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzxf4alm6w4chkhz6z93.png)
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...


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ouf3xqmsqauzwpcy6l5h.png)
> 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](https://www.ag-grid.com/javascript-data-grid/dom-virtualisation/#row-buffer)

**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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/falfw2am8borx00payfc.png)

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](https://www.ag-grid.com/javascript-data-grid/dom-virtualisation/#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👍