Many Panels cause bad performance

Hello Community,

I am new to Vaadin and wanted to use it for a new project. I played a little bit with the Framework and like it really much - great thx to the developers!

Now to my problem: I want to make a Panel or something equal which looks and acts like the NewsPanel from GoogleReader (see attached image). I made a horizontal SplitPanel with the navigation on the left side and a VerticalPanel on the right side.

For one NewsEntry (a headline, a link to the article, an icon and the preview text from the RSS/ATOM) I made a NewsEntryPanel which displays the data and has some Buttons (for example like/dislike, or add as favorite). So I added just about 100 NewsEntryPanels to this VerticalPanel on the right side of the SplitPanel.

The result looks like expected but the performance is so bad that you can’t use it (especially when resizing the SplitPanel). Do you have any idea what to do to avoid this?

Thanks for all answers…

Patrick Meier

We actually also see some browser freezes (Firefox 3.6 for 3-5seconds) when we use too much Panel components on a screen.

We have so far not looked deeper into this problem, but will probably have to do this in the next weeks.

What we do is avoid the Panel component as much as possible and use Vertical/Horizontal layouts as much as possible.

But there are just cases where a Panel is required because of the Scrollbar.


Just to let you know, it might actually be the default VerticalLayouts inside the Panel that are causing the bad performance. And Firefox is known to be the slowest of the modern browsers, it has some very slow layout calculations when the DOM hierarchy gets big enough.

So instead of VerticalLayouts, I’m suggesting you try and use CssLayouts as much as possible. You can also check out
DashLayout add-on
, which should perform a little better as well.


thanks for your fast replies. I will try the things you suggested…

Will post my solution when found a proper one.

I have now replaced most of my Vertical+HorizontalLayout components with the Dash counterparts and we see about 40% performance increase in the heavy screens.
We still have HorizontalLayouts in use, because the HorDashLayout seems to behave strange if we use the expandratio and fixed column widths.

Wow, that’s more than I was expecting! Dashing, if I may say :wink: Good to hear that all my hard work hasn’t been in vain .

That’s unfortunately true, DashLayout is still beta quality, and contains many known issues and probably even more bugs. So be warned, and test thoroughly in all the browsers you wish to support.

I’m hoping to find more time for my Community Friday projects, such as DashLayout and ReindeerMods, but client work keeps getting in the way :confused: