Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiDataGrid] Fullscreen browser rendering performance in Chrome #3705

Closed
kertal opened this issue Jul 8, 2020 · 5 comments
Closed

[EuiDataGrid] Fullscreen browser rendering performance in Chrome #3705

kertal opened this issue Jul 8, 2020 · 5 comments

Comments

@kertal
Copy link
Member

kertal commented Jul 8, 2020

When using Chrome 83, MacOS 10.16.4, I'm experiencing high CPU load, laggy interface by hovering rows in full screen mode. It starts with setting the number of rows to 50, and when setting it to 100 it looks like this:

image

Used the docs for this: https://elastic.github.io/eui/#/tabular-content/data-grid

This is not the case in Firefox, and if I test it on a non-retina monitor it's much better (Just a quarter of the pixels to render, obviously). However seems that a simple hover takes much more CPU than in other browsers, so it's worth investigating.

Here's a screen of the Chrome performance tools:
Bildschirmfoto 2020-07-08 um 08 21 35
And here's the profile:
Profile-20200708T082241.json.zip

@timroes
Copy link
Contributor

timroes commented Jul 8, 2020

I can reproduce that behavior in Chrome Linux, even on a low-dpi screen. But what feels even more laggy is switching the page size from let's say 100 to 50 or 10 to 50, will cause a couple of seconds to render this.

screenshot-20200708-091718

@sulemanof
Copy link
Contributor

I'm experiencing the same issues, switching the pages, when there are 50+ rows per page. Reproducible in any browser. I'm on Windows 10.
Here is the performance snapshot of switching from 1st to 2nd page of grid in docs example https://elastic.github.io/eui/#/tabular-content/data-grid :

image

As far as I can see it on the snapshot, the performance drawdown mostly depends on amount of nodes and the heavy calculation of tabbable utility (takes around 200ms).

@kertal
Copy link
Member Author

kertal commented Jul 9, 2020

Seems .euiDataGrid__verticalScroll is causing this poor performance of hover cells in Chrome, seems to be normal when deactivating: overflow-y & height

Bildschirmfoto 2020-07-09 um 08 34 49

Of course this is not the solution, since pagination disappears and scrolling doesn't work, but it's a trace. And Discover with DataGrid is also rendered this way

@cchaos cchaos changed the title EuiDataGrid fullscreen browser rendering performance in Chrome [EuiDataGrid] Fullscreen browser rendering performance in Chrome Sep 20, 2020
@github-actions
Copy link

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

@github-actions
Copy link

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants