Vaadin 8.3.1 initial grid rendering time in browser too slow in Internet Explorer

[focbenz]

There is still a performance issue with a standard Vaadin 8.3.1 grid in Internet Explorer which renders the Grid slowest of all tested browser (Internet Explorer, Firefox and Chrome)
The last Vaadin grid performance issue #10232 on GitHub was closed with improvements for the initial rendering of the grid in this Pull Request: #10579

The updated sample project uses the released Vaadin 8.3.1 including the initial rendering fixes.
Also the test scenario was changed to reflect a typical list view in the application with 20 visible columns and 15 hidden columns.

Minimal reproducible example: https://github.com/FOCONIS/slow-grid-sample
Vaadin Framework version: 8.3.1
Browser version: Internet Explorer 11
Expected behavior: rendering times around 1 seconds or ideally less
Actual behavior: rendering times above 4 seconds even on fast machines

These are performance results for Vaadin 8.3.1 with the default scenario 20 columns, 15 hidden columns and 1000 rows on a fast machine with the application running locally: Windows 7 64 Bit OS with Intel Core i7 CPU @ 2.3 Ghz and 16 GB RAM.

The slowest rendering with variable column widths and additional header row containing filters:

Browser	Grid Size (Columns,Hidden Columns,Rows)	Render Time (ms)
IE	(20, 15, 1000)	4461
IE	(20, 15, 1000)	4497
IE	(20, 15, 1000)	4448
IE	(20, 15, 1000)	4437

Not using the complex filter row in header:

Browser	Grid Size (Columns,Hidden Columns,Rows)	Render Time (ms)
IE	(20, 15, 1000)	2802
IE	(20, 15, 1000)	2908
IE	(20, 15, 1000)	2906

Additionally using fixed widths instead of variable column widths:

Browser	Grid Size (Columns,Hidden Columns,Rows)	Render Time (ms)
IE	(20, 15, 1000)	2494
IE	(20, 15, 1000)	2409
IE	(20, 15, 1000)	2380

All those times taken are ideal because slower client hardware, running the application remotely and a lot more components than just the grid in the final application increase the rendering time for the grid again.

[TatuLund]

Could you attach your test application here? I just tested app with 47 columns (non-fixed width, all visible) and first render took 2.3s with IE. In my test I had only simple data in the Grid, just Strings.

[TatuLund]

I tested also similar application with Vaadin 7, 50 String columns and the initial render took also rough two seconds, so the performance is more or less the same.

[basisbit]

When developing a fix for this, please also consider adding more complex / "real world" data. For Example long strings within the table data & column names, a ComponentColumn, one column as fixed & always visible most left column, paged loading from a DataProvider with lots of data.
Otherwise, there will be just another issue opened again after this issue here is closed (this happened already a couple of times for the "many column in grid problem"...).

[focbenz]

@TatuLund we have setup a small test application in the linked GitHub project:
https://github.com/FOCONIS/slow-grid-sample

As for the comparison with Vaadin 7 table we think that no end user is willing to wait multiple seconds for the page to load if that is the main content on that page. With the already stated enhancements like fixed width columns and removing the filter columns we achieve rendering times of under 1 second in Chrome browser but our customers need the application to run in Internet Explorer / Edge.
So currently we might need to look at faster components or other strategies like paging because displaying views containing a Vaadin Grid takes too long.

[TatuLund]

@basisbit As a pathological case, I tested 50 columns with TextFieldRenderer in each column. The initial render time is then 8-12 seconds depending on the browser. With ComponentColumn it should be slightly slower, since it adds small overhead. So yes, this kind of cases can be easily done. It is then totally different question what is the performance target for such cases.

@focbenz Thanks for the test application. Rendering times I see with it are similar to my previous tests. Note, I did testing Vaadin 7 Grid (not Table) vs. Vaadin 8 Grid and found that the performance between those are equal in first rendering. One fundamental problem here is that IE11 is factor of two or so slower browser in most cases compared to Chrome. That is something we at Vaadin cannot fix.

[basisbit]

might be nice to use CSS for styling the table/grid (or at least offering the option to do so).
@TatuLund any rough guess if implementing a setSizeUndefined for Columns would be feasible?

[TatuLund]

@basisbit See this https://vaadin.com/download/release/8.3/8.3.1/docs/api/com/vaadin/ui/Grid.Column.html#setWidthUndefined--

[basisbit]

@TatuLund thanks a lot for your quick reply, but unfortunately this is not what I asked for at all and does not help to solve this issue, because then gwt / vaadin javascript code magically sets some width and again, it is slow and rather not CSS-styleable :-

[TatuLund]

Corner case was found. Having footer slows down Grid rendering due double calculations, fix is coming: #10705

[focbenz]

Thanks Tatu for the heads up!
Will check out the fix but currently we are not using the footers.

[stale]

Hello there!

It looks like this issue hasn't progressed lately. There are so many issues that we just can't deal them all within a reasonable timeframe.

There are a couple of things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

• Check if the issue is still valid for the latest version. There are dozens of duplicates in our issue tracker, so it is possible that the issue is already tackled. If it appears to be fixed, close the issue, otherwise report to the issue that it is still valid.
• Provide more details how to reproduce the issue.
• Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
• Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
• Try fixing the issue yourself and create a pull request that contains the test case and/or a fix for it. Handling the pull requests is the top priority for the core team.
• If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!

[focbenz]

I think we have to accept that Internet Explorer is slow ... so yes that info is stale.

[basisbit]

This is not an issue of the specific webbrowser, but instead is an issue of how tables/grids are implemented in vaadin. There are plenty examples out there that show how to do big amount of data in tables and quickly css style it with good performance in all major web browsers.

[stale]

Hello there!

We are sorry that this issue hasn't progressed lately. We are prioritizing issues by severity and the number of customers we expect are experiencing this and haven't gotten around to fix this issue yet.

There are a couple of things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

• Check if the issue is still valid for the latest version. There are dozens of duplicates in our issue tracker, so it is possible that the issue is already tackled. If it appears to be fixed, close the issue, otherwise report to the issue that it is still valid.
• Provide more details how to reproduce the issue.
• Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
• Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
• Try fixing the issue yourself and create a pull request that contains the test case and/or a fix for it. Handling the pull requests is the top priority for the core team.
• If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!

[focbenz]

The issue is still valid but Internet Explorer is overall slow and might be one of the worst browsers to be used in a modern RIA. The best solution for performance problems with Internet Explorer is to switch to basic HTML components and lightweight CSS optimized for IE with all its flaws and otherwise try and discontinue support for this browser if that is possible within the target audience.

[stale]

Hello there!

We are sorry that this issue hasn't progressed lately. We are prioritizing issues by severity and the number of customers we expect are experiencing this and haven't gotten around to fix this issue yet.

There are a couple of things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

• Check if the issue is still valid for the latest version. There are dozens of duplicates in our issue tracker, so it is possible that the issue is already tackled. If it appears to be fixed, close the issue, otherwise report to the issue that it is still valid.
• Provide more details how to reproduce the issue.
• Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
• Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
• Try fixing the issue yourself and create a pull request that contains the test case and/or a fix for it. Handling the pull requests is the top priority for the core team.
• If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!

[basisbit]

Issue is still valid.

[focbenz]

Vaadin 8 is no longer actively developed and Internet Explorer 11 has not been an issue anymore being replaced with newer versions of Microsoft OS switching to Chromium based MS Edge browser.