Perfromance issues with CustomLayout and TabSheet

Dear Vaadin users,

I am currently experimenting with
CustomLayout
and I am experiencing the performance problems. I would like to render a 500Kb HTML with some components on the top. The code to display the HTML in a tab as following:

import java.io.IOException;
import com.vaadin.ui.CustomLayout;
import com.vaadin.ui.Panel;
import org.apache.commons.io.IOUtils;

public class TestPanel extends Panel {

	public TestPanel() {
		try {
			final CustomLayout layout = new CustomLayout((String) null);

			layout.setTemplateContents(IOUtils.toString(getClass().getResourceAsStream("TestPanel.html")));

			addComponent(layout);
		}
		catch (IOException e) {
			throw new RuntimeException(e);
		}
	}
}

and the code to add this panel to the tab sheet:

tabSheet.addTab(new TestPanel(), "Test panel", null).setClosable(true);

So what happens: the server side completes quite fast (in 2 seconds), then the browser freezes for 15 seconds till the page is rendered.

There are no
location
attributes for nodes in test HTML and I do not add components to
CustomLayout
. So its task is to simply render HTML.
CSSLayout
+
Label
do the job much much faster. What prevents
CustomLayout
to work as fast as
CSSLayout
?

The next problem arises when the user decides to close the above mentioned tab. The browser freezes for such a significant time (> 2 mins), that I decided not to wait. Why closing a tab is so communication intensive? Any chance to improve this?

I’m not sure if these alternatives work but I think they are worth the shot:

  • Replace layout with a Label: Label label = new Label(IOUtils.toString(getClass().getResourceAsStream(“TestPanel.html”), Label.CONTNET_XHTML);
  • Try to replace layout with an Embedded that shows the html page directly.

I think that Vaadin tries to interpret the html and recalculate sizes of everything as CustomLayout is meant for layouting and not just showing HTML, so getting rid of that might help the perfomance. That is if you don’t need any of the specific features in CustomLayout.

Jens, thank you for reply. Ineed, I need special features from
CustomLayout
: I want to react on mouse clicks and on mouse click I want to render a popup window, which needs to be shown at position of the component, which was clicked. So I need a kind of combination of
AbsoluteLayout
and

ClickableCustomLayout

. Perhaps you can advise, how to boil this mixture…

You should first try the “?debug” option in your URL to see if the timing and change information there is of any help.

Are there other tabs that might be heavy to paint/render when closing one tab? If I remember correctly (not certain), removing a tab from a tabsheet might repaint the whole tabsheet, including all of its tabs. If this is the case, maybe you could e.g. try to use the LazyLoadWrapper add-on for each tab to see if it helps.

In any case, I believe at this scale, you can significantly improve the performance by some client side profiling and custom client side coding - perhaps even by starting e.g. with a standard layout and removing the extra bits. A fully customized component would probably be even better.

No, there are no other tabs, which require sensible time to be re-calculated. Once I add the above mentioned tab to
TabSeet
, the tab switching takes few seconds to complete. But when I close the time, this times becomes minutes (e.g. magnitudes larger then switching).

I have fired
the bug
, as I think this should be optimized.