[Bug][Grid] getScrollbarWidth and setScrollbarWidth decrease Grid performance

[WissamProgress]

I'm submitting a...

• Bug report

Current behavior

getScrollbarWidth and setScrollbarWidth methods cause performance issues for the Grid component.

Expected behavior

There methods should not cause performance issues, and the Grid component should load quickly

Minimal reproduction of the problem with instructions

Issue 1

For each table, the component creates a new BrowserSupportService object in the getScrollbarWidth function (scrollbarWidth.js), and adds a new element to the document to calculate the width of the scrollbar document.body.appendChild(div); this.scrollbar = div.offsetWidth - div.scrollWidth; document.body.removeChild(div); which causes performance issues because each such call takes ~60ms, and the component calls this function on componentDidMount and on componentDidUpdate.

Steps to reproduce:

1. Open any Data Grid, for example https://www.telerik.com/kendo-react-ui/components/grid/
2. Open Chrome Dev tools Performance tab
3. Click Record
4. Turn the page in the table to the second page
5. Click stop recording

Result:

getScrollbarWidth causes Style recalculations and leads to performance issues (please see attached screenshot)

Issue 2

Data Grid component calls this code several times in setScrollbarWidth function: document.body.style.setProperty('--kendo-scrollbar-width', "".concat(scrollbarWidth, "px")); which causes the Chrome browser to recalculate the styles, although the value does not change.

Steps to reproduce:

1. Open any Data Grid, for example https://www.telerik.com/kendo-react-ui/components/grid/
2. Open Chrome Dev tools Performance tab
3. Click Record
4. Execute the code above in the console (or document.body.style.setProperty('--kendo-scrollbar-width', "8px"))
5. Click stop recording

Result:

This code causes Style recalculations and leads to performance issues (please see attached screenshot)

Reported in Ticket ID: 1636255