I need some advice about performance of Vaadin apps.
I have a class, named MyComponent, which consists of some components like VerticalLayout, HorizontalLayout, some Buttons and TextArea. They are one component together. But when I create and add them to the main layout it takes long time to show them on browser.
For example, when i create 100 objects of MyComponent and use add() method to add them to the main layout it takes about 22 seconds. It is too long time for users to wait.
So it will take 10 times longer if i set 1000 objects?!. I tested and came to a conclusion that add() method takes that long time not new MyComponent() code.
I don’t think it’s add() in itself that is slow. Try adding 100 instances of something simpler such as new Text("Hello") instead.
Instead, the problem in your case is most likely the total effective size of the component tree (or actually the DOM structure in the browser). If you have 100 copies of MyComponent and each of them is built up from e.g. 10 separate component instance of various types, then your component tree already contains over 1000 different component instances.
1000 components or elements isn’t a problem for a modern browser that natively supports the various Web Component features that Vaadin’s components are based on, but it will probably be a problem in Internet Explorer or Edge for which those features must be emulated instead of using built-in support.
My advice for you would be to rethink your UI design so that you don’t need to show so much stuff at the same time. I guess all those 100 components won’t be visible to the user at the same time, but instead the user has to scroll to seem more of them? In that case, you can use components such as IronList or Grid to make those components be lazily loaded on demand instead of forcing the browser to show them all up-front.
Leif Åstrand:
I don’t think it’s add() in itself that is slow. Try adding 100 instances of something simpler such as new Text("Hello") instead.
Instead, the problem in your case is most likely the total effective size of the component tree (or actually the DOM structure in the browser). If you have 100 copies of MyComponent and each of them is built up from e.g. 10 separate component instance of various types, then your component tree already contains over 1000 different component instances.
1000 components or elements isn’t a problem for a modern browser that natively supports the various Web Component features that Vaadin’s components are based on, but it will probably be a problem in Internet Explorer or Edge for which those features must be emulated instead of using built-in support.
My advice for you would be to rethink your UI design so that you don’t need to show so much stuff at the same time. I guess all those 100 components won’t be visible to the user at the same time, but instead the user has to scroll to seem more of them? In that case, you can use components such as IronList or Grid to make those components be lazily loaded on demand instead of forcing the browser to show them all up-front.
Thank you for reply!
But i can’t type in TextArea using it in Grid, why? Any ways to solve it?