[grid] Significant performance degradation in v21

[mletenay]

Description

Significant performance degradation of grid component in v21.0.3 (vs v20.0.8). When identical code is executed (and measured by chrome's profiler), the V21 shows much higher scripting times than previous V20. Depending on number of columns the performance seems to be worse by 30-60%.

Expected outcome

Vaadin v20.0.8 Sample grid with 50 columns - scripting time ~800ms Sample grid with 100 columns - scripting time ~1750ms

Actual outcome

Vaadin v21.0.3 Sample grid with 50 columns - scripting time ~1050ms Sample grid with 100 columns - scripting time ~2800ms

Minimal reproducible example

Vaadin flow simple showcase:

package com.example.application.views.helloworld;

import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.List;

import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.AfterNavigationEvent;
import com.vaadin.flow.router.AfterNavigationObserver;
import com.vaadin.flow.router.Route;

@Route("gridTest")
public class GridView extends VerticalLayout implements AfterNavigationObserver {

    Grid<LotOfColumns> grid = new Grid<>(LotOfColumns.class);

    public GridView() {
        setSizeFull();
        grid.setSizeFull();
        grid.setColumns("id", 
                "c01", "c02", "c03", "c04", "c05", "c06", "c07", "c08", "c09", "c10", 
                "c11", "c12", "c13", "c14", "c15", "c16", "c17", "c18", "c19", "c20", 
                "c21", "c22", "c23", "c24", "c25", "c26", "c27", "c28", "c29", "c30", 
                "c31", "c32", "c33", "c34", "c35", "c36", "c37", "c38", "c39", "c40", 
                "c41", "c42", "c43", "c44", "c45", "c46", "c47", "c48", "c49", "c50",
                "c51", "c52", "c53", "c54", "c55", "c56", "c57", "c58", "c59", "c60",
                "c61", "c62", "c63", "c64", "c65", "c66", "c67", "c68", "c69", "c70",
                "c71", "c72", "c73", "c74", "c75", "c76", "c77", "c78", "c79", "c80",
                "c81", "c82", "c83", "c84", "c85", "c86", "c87", "c88", "c89", "c90",
                "c91", "c92", "c93", "c94", "c95", "c96", "c97", "c98", "c99", "c100");
        add(grid);
    }

    @Override
    public void afterNavigation(AfterNavigationEvent event) {
        List<LotOfColumns> items = new ArrayList<>(100);
        for (int i = 0; i < 100; i++) {
            items.add(new LotOfColumns(i));
        }
        grid.setItems(items);
    }

    public static class LotOfColumns {
        private long id;
        private String c01, c02, c03, c04, c05, c06, c07, c08, c09, c10; 
        private String c11, c12, c13, c14, c15, c16, c17, c18, c19, c20; 
        private String c21, c22, c23, c24, c25, c26, c27, c28, c29, c30; 
        private String c31, c32, c33, c34, c35, c36, c37, c38, c39, c40; 
        private String c41, c42, c43, c44, c45, c46, c47, c48, c49, c50;
        private String c51, c52, c53, c54, c55, c56, c57, c58, c59, c60;
        private String c61, c62, c63, c64, c65, c66, c67, c68, c69, c70;
        private String c71, c72, c73, c74, c75, c76, c77, c78, c79, c80;
        private String c81, c82, c83, c84, c85, c86, c87, c88, c89, c90;
        private String c91, c92, c93, c94, c95, c96, c97, c98, c99, c100;

        public LotOfColumns() {
            super();
        }

        public LotOfColumns(int row) {
            super();
            this.id = row;
            try {
            for (Field field : getClass().getDeclaredFields()) {
                if (String.class.equals(field.getType())) {
                        field.set(this, "row" + row + field.getName());
                }
            }
            } catch (ReflectiveOperationException e) {
                throw new RuntimeException(e);
            }
        }

        public long getId() {
            return id;
        }
        public String getC01() {
            return c01;
        }
... rest of accessors
}

Steps to reproduce

Measure client side performance and compare V20 with V21. V21 seems to show unexpected performance degradation.

Environment

• Vaadin (Flow) v21.0.3.
• OS Windows 10.

Browsers Affected

• [x] Chrome
• [ ] Firefox
• [ ] Safari
• [ ] Edge
• [ ] IE 11
• [ ] iOS Safari
• [ ] Android Chrome

[tomivirkki]

Hi, two changes (https://github.com/vaadin/web-components/pull/2910, https://github.com/vaadin/web-components/pull/2912) targeting to improve the virtualizer performance were shipped with Vaadin 21.0.5. Please let us know if this is still an issue.

If your app has as many columns as the example in the description, there really aren't any ways around performance issues until https://github.com/vaadin/web-components/issues/1459 gets implemented.

[web-padawan]

What Tomi said: https://github.com/vaadin/web-components/issues/2880#issuecomment-968816972, but please use 21.0.6 which will also include a correct TestBench version.