Vaadin 8 grid rendering time slower than rendering it twice (empty, then full) switching DataProvider

[focbenz]

To further improve the performance of grid loading we found another strange behaviour or bug and this also describes the workaround. Loading an empty grid first using a filtered DataProvider and then removing the filter from the DataProvider is faster than just rendering the full grid once.

Affected versions:
Issue can be observed with latest Vaadin 8.8.5 release

Expected:
In case a grid is rendered the overall time should be faster than rendering it (twice) empty and then full

Actual:
The time to render the grid fully takes more time especially on slower machines compared to first rendering an empty grid e.g. by filtering the DataProvider and then changing the DataProvider without filter.

Times in Internet Explorer 11 measured with F12 debugging console:

create grid option	time until rendered	time until UI shows change
empty grid	591 ms	~ 600 ms
full grid	2414 ms	~ 2500 ms
empty grid, deferred full grid	1335 ms	~ 600 ms (empty grid renders)

Steps to reproduce the issue:

Run the provided sample project with mvn jetty:run and then:

• click the "clear UI" button and compare rendering times between:
• clicking "build empty Grid" button for comparison just loads an empty grid
• clicking "build full Grid" button loads the full grid with 200 rows by updating the empty DataProvider with a full one
• clicking "build empty Grid deferred to full Grid" button loads an empty grid first and then defers the loading of the full grid with the 200 rows DataProvider shortly using polling

Similar issues:
The last Vaadin grid performance issue in IE11 is also mildened with this workaround:
#10232 Vaadin 8.3.1 initial grid rendering time in browser too slow in Internet Explorer

Sample project:
https://github.com/FOCONIS/slow-grid-dataprovider-change

Sample code:

private ListDataProvider<GridEntry> emptyGridDataProvider = new ListDataProvider<GridEntry>(Collections.emptyList());
private ListDataProvider<GridEntry> fullGridDataProvider = new ListDataProvider<GridEntry>(createCollection(200));

(...)

// BTN0
final Button buttonButt = new Button("clear UI");
buttonButt.setId("buttonButt");
buttonButt.addClickListener(event -> gridwrapper.removeAllComponents());
horLayout.addComponent(buttonButt);

// BTN1
final Button button1 = new Button("build empty Grid");
button1.setId("btnGridEmpty");
button1.addClickListener(event -> buildGrid(emptyGridDataProvider));
horLayout.addComponent(button1);

// BTN2
final Button button2 = new Button("build full Grid");
button2.setId("btnGridFull");
button2.addClickListener(event -> buildGrid(fullGridDataProvider));
horLayout.addComponent(button2);

// BTN3
final Button button3 = new Button("build empty Grid deferred to full Grid");
button3.setId("btnGridEmptyDeferFull");
button3.addClickListener(event -> {
	buildGrid(emptyGridDataProvider);
	loadOnPoll = true;
	setPollInterval(1); // 1ms UI poll (as fast as possible)
});
horLayout.addComponent(button3);

(...)

@Override
public void poll(PollEvent event) {
	if (loadOnPoll) {
		grid.setDataProvider(fullGridDataProvider);
		setPollInterval(0);
	}
}

Load Times comparison IE11:

• full Grid loading: 2414 ms
  
• empty first then full Grid loading: 1335 ms
  

[yazun]

On top of this we see that big size returned by the data provider totally kills the performance - it went from subsecond in v7 to 15-20 seconds to render the grid on first 50 rows if dataprovider returns some large number, i.e. 50M. We can go up to billions in our case (filtered subsequently, usually) so this is really bad...

[focbenz]

Since this enhancement is no longer needed and Vaadin 8 is not actively developed anymore closing this issue with the described workaround we have been using.