Upgraded Vaadin 7.7.7 to Vaadin 8 in my project.
And now rendering of grids is very slow.
In my application performance has gone from 1.5 Sec to 8 Sec to render 80 columns,
even when there is no data to show.
This makes migrating to 8 imposible
Is there any work around for this?
I’m using Vaadin version 8.0.1
Minimal reproducible example
Add this grid to UI
Grid<String> grid = new Grid<>();
grid.setSizeFull();
for (int i = 0; i < 80; i++) {
grid.addColumn(row -> "novalue").setCaption("Column_" + i).setWidth(50);
}
I’m very happy to see the team addressing
this ticket now. I’m currently spending what will be hundreds of hours converting a project to Vaadin 8. The first converted Grid of 60 Grids, quite a small one, performs much more slowly than in Vaadin 7. Both initial rendering and row selection/de-selection are affected. I haven’t tried a larger grid yet, but 8 seconds would consistitue a broken system from the user’s point of view.
8.0.3 made a huge improvement. I hope to benchmark V8 vs. V7 properly when I’m finished converting my project and get the compatibility packages out. That will be a couple weeks still. When Grids are under a tabsheet, navigating from tab to tab is still noticably slower under V8, contrary to the measurements in
the ticket . However this is much faster than they were pre-8.0.3. We’re talking 2s V8 (previously 8 or 10s) vs 1s V7 or thereabouts, or a bit lazier feeling when switching tabs. Chrome’s circular progress bar makes a few revolutions.
I believe that data acquisition and refresh is generally faster in V8, but this time is a small part of the total. Browser rendering seems to be the rate determining step.
I have enclosed profiles of the rendering of two identical looking Grids - one in Vaadin 7 the other in Vaadin 8. These tests are done by pressing the tab that contains the Grid and recording the Chrome activity until the Grid appears.
The elapsed times to paint the Grids are:
Vaadin 7: ~1.6 seconds
Vaadin 8: ~2.8 seconds
That introduces a more sluggish feel to the user swapping between Grids in V8. I’d be interested if there is anything the developer can do to reduce this or if it is all under the control of the framework?
The attached files can be unzipped and loaded into Chrome: Developer Tools, Timeline, Load Profile… and shows the huge explosion of “Forced Reflows” in the Vaadin 8 version, which is causing the slower performance. 31926.zip (3.38 MB)
Yikes! I just ported my app from Vaddin 6 to 7 and rendering a somewhat complex layout (mainly a Table and an unchanged iframe in a HorizontalSplitPanel) became a lot slower, especially in Firefox (from seamless to sluggish). If this is a tendency with newer versions then we should reconsider choosing Vaadin as our preferred framework.
When we were building the TreeGrid for Vaadin 8.1, we’ve been also paying attention to the rendering times of Grid. Can you run your test against the 8.1 version as well? If there are still major issues with the rendering speed, you can contact me with a full example and I’ll see if there are some still low-hanging fruits to pick from the rendering.
Hi Teemu, I look forward to comparing Grid 8.0.7 to Grid 8.1 as soon as Vaadin 8.1 is released. I’ll characterize the total Grid loading times and Chrome activity reports as before. Thanks for continuing to keep an eye on performance - Vaadin maintains its excellence by paying attention to these important details.
I was unable to find any rendering-related perfomance improvement in Grid 8.1.0. Once rendered, Grid performance, eg. for scrolling and filtering is excellent. The issue I face is that when the user clicks a tab to expose a grid, there is a Chrome-generated progress bar that lasts for a few seconds before the Grid paints.
A quick test with an identical Grid before and after the Vaadin upgrade shows:
8.0.7: ~3300mS
8.1.0: ~3650mS
These on a MacBook Air running everything locally (Eclipse, Tomcat, browser).
Of the processing time, the server related calculations seem to take about 50mS and Chrome “animation” takes the rest. The time is mostly consumed by an event that Chrome describes as a forced reflow, which is generated as each cell is styled.
Details are contained in the attached files, comparing 8.0.7 and 8.1.0 using an identical Grid. The report is generated by Chrome’s recorder function.
I’m still experiencing very slow rendering in TreeGrid and Grid in Vaadin 8.1.4.
Of the processing time, the server related calculations seem to take about 50mS and Chrome “animation” takes the rest. The time is mostly consumed by an event that Chrome describes as a forced reflow, which is generated as each cell is styled.
This describes exactly my experience. Once rendered, the Grid performs great, but it’s taking seconds to render.
Is there any data I can provide to help finding the cause for that?
If you are also affected and have not noticed any improvements please help out and spread the word.
We are also affected by the slow first time rendering of the Grid since we switched to Vaadin 8.x
Some issues have been addressed over time but the overall time it takes to render the Grid for the first time has not improved a lot during the 8.1.x releases. Trying to stay up to date with the current Vaadin releases we have followed 8.1.x from the early beta phase until recently switching to the 8.2.1 release because the issue (#10465) of increased rendering time with initially hidden columns has been fixed.
Still the rendering times of the Grid is not in a range where a user would tolerate the waiting time with more than 2 seconds even in the fastest browser for Grid rendering which is currently Chrome. Rendering the Grid on Firefox takes longer and Internet Explorer is even worse than Firefox.
All samples below take the time to render the Vaadin 8.2.1 Grid with 100 fixed width columns and 1000 rows using the normal Valo theme in a Vaadin sample application just showing the Grid using a native Windows 7 64 Bit environment with 64 Bit Versions of the browsers.
I am affected by a similar problem. I always thought, that having components in Grid or having too many columns (30+) is the problem why my Grids are rendering that slow. Now I found out, that my only problem is, that my Grids are having a footer and rendering the footer makes everything that slow. If I relinquish on the footer, I can live with the rendering time but as soon as I add a footer it takes many seconds to render the Grid which is not an option.