General client-side performance problem

Hi there,

I am relatively new to Vaadin. Vaadin is great in terms of developer productivity, unfortunately it seems that client side rendering of components (firefox, chrome, IE 10) is unacceptably slow. What am I doing wrong or what am I missing? Any help would be much appreciated.

I wrote the following test case for Vaadin 6.8.7:


final Window mainWindow = new Window("My test case");
setMainWindow(mainWindow);

int numberOfComponents = 100; //200, 300, 400, 700, 1000

for (int i=0; i<numberOfComponents; i++) {
	mainWindow.addComponent(new Label("lorem ipsum dolor sit amet"));
}

I ran the test with different values for ‘numberOfComponents’: 100, 200, 300, 400, 700, 1000.

Server-side performance is fine. The debug window shows the following client-side timings (and wait-time before the window shows) :

100 labels - Processing time was 392ms for 10705 characters of JSON, Referenced paintables: 102
200 labels - Processing time was 687ms for 20505 characters of JSON, Referenced paintables: 202
300 labels - Processing time was 1137ms for 30306 characters of JSON, Referenced paintables: 302
400 labels - Processing time was 1431ms for 40106 characters of JSON, Referenced paintables: 402
700 labels - Processing time was 2883ms for 69507 characters of JSON, Referenced paintables: 702
1000 labels - Processing time was 5215ms for 98909 characters of JSON, Referenced paintables: 1002

Even a small application with some buttons, images, layouts, labels will easily contain 300 components. Which means this takes approx. 1 second just on the client-side to render the window. What am I missing?

In a usability survey I conducted, which consisted of 20 non-technical personnel, I found that response time below 500ms is considered “fast”. People start thinking it’s slow when it gets above 700ms. IMO, I don’t think you will ever need to display more than 200 components in a window. In terms of usability, if your user has to interact with that many components; the response time will be least of your worries as their productivity level will be waaayyy down.

According to
Nielsen Norman Group
, you should be fine as long as it doesn’t go over 1 sec. Also, I don’t think Vaadin loads ALL your components at once. It may lazy load the immediate ones.

Thanks for the reply. I actually tend to disagree that there is no problem.

[list]
[]
Even with a client-side response time of 500ms you will easily spend some more time on the server which will make people start thinking it’s slow.
[
]
As an example, add some more comments on this Forum page and start counting the number of necessary components you would need to render this page with Vaadin, I think you will easily reach more than 200 components.
[*]
Also my test case was very simplified, adding layouts and especially a (small) tree of layouts makes it much worse.
[/list]But I would prefer not to make this a philosophical discussion about what’s acceptable. So my technical question remains, am I doing something wrong or can something be done to speed up the client-side rendering? What is to expect with Vaadin 7? Or is the only solution making sure that the number of components in a window is less than e.g. 200?

Here is the result from the window with the most components I have. It seems to be roughly 1.5 ms per component.

Processing time was 110ms for 6954 characters of JSON
Referenced paintables: 98

Processing time was 218ms for 12160 characters of JSON
Referenced paintables: 147

So it seems you’re not doing anything wrong.

Thanks. Any idea what is happening during the client side processing step? How long would the JSON parser take? Perhaps it could be improved?

Found this
Optimizing Sluggis UI

Thank you for the link. Actually I already read that article and followed all the suggestions. I removed all layouts, especially layout trees and custom components from the test case which currently only consists of Label components. I found that even when using just Labels, performance degrades linearly with the number of components.

I just migrated my test case to Vaadin 7. The performance is much worse which is rather worrying. For 400 labels it now takes 7 seconds while it took only 1.4 seconds with the current 6.x release of Vaadin. Also the JSON characters increased from 40106 to 65969 (+60%).

20:01:05:640 Processing time was 7003ms for 65969 characters of JSON
20:01:05:643 Referenced paintables: 402

Here is the full debug output of another run of the test case:

Drag title=move, shift-drag=resize, doubleclick title=min/max.Use debug=quiet to log only to browser console.
20:49:33:048 Starting Vaadin client side engine. Widgetset: com.vaadin.DefaultWidgetSet
20:49:33:050 Widget set is built on version: 7.0.0.beta11
20:49:33:146 Starting application ROOT-2521314
20:49:33:147 Using theme: reindeer
20:49:33:150 Vaadin application servlet version: 7.0.0.beta11
20:49:33:157 inserting load indicator
20:49:33:160 Scheduling heartbeat in 300 seconds
20:49:33:164 JSON parsing took 3ms
20:49:33:167 Handling message from server
20:49:33:172 * Handling resources from server
20:49:33:173 * Handling type inheritance map from server
20:49:33:174 Handling type mappings from server
20:49:33:178 Handling resource dependencies
20:49:33:179 * Handling locales
20:49:33:180 * Handling meta information
20:49:33:182 * Creating connectors (if needed)
20:49:33:333 * Creating connectors completed: 151 ms
20:49:33:334 * Updating connector states
20:49:33:981 * Update of connector states completed: 648 ms
20:49:33:982 * Updating connector hierarchy
20:49:34:015 * Update of connector hierarchy completed: 34 ms
20:49:34:017 * Sending hierarchy change events
20:49:37:465 * Hierarchy state change event processing completed: 3450 ms
20:49:37:532 * Running @DelegateToWidget
20:49:37:667 * Sending state change events
20:49:38:001 * State change event processing completed: 536 ms
20:49:38:002 * Passing UIDL to Vaadin 6 style connectors
20:49:38:102 * Vaadin 6 style connector updates (updateFromUidl) completed: 101 ms
20:49:38:148 * Unregistered 0 connectors
20:49:38:149 * Unregistering of removed components completed: 46 ms
20:49:38:150 handleUIDLMessage: 4968 ms
20:49:38:151 Starting layout phase
20:49:38:152 Measured 0 non connector elements
20:49:38:152 Layout init in 1 ms
20:49:39:082 Measured 452 elements in 930 ms
20:49:39:083 Pass 1 completed in 931 ms
20:49:39:164 Did overflow fix for 1 elements in 80 ms
20:49:39:271 Measured 1 elements in 187 ms
20:49:39:272 Pass 2 completed in 188 ms
20:49:39:273 No more changes in pass 3
20:49:39:283 Invoke post layout listeners in 8 ms
20:49:39:283 Cleaned old measured sizes in 1124ms
20:49:39:284 Total layout phase time: 1133ms
20:49:39:288 * Layout processing completed: 1138 ms
20:49:39:291 * Dumping state changes to the console
-Response:
+change
+shared state
20:49:40:091 * Dumping state changes to the console completed: 804 ms
20:49:40:092 Processing time was 6925ms for 64408 characters of JSON
20:49:40:094 Referenced paintables: 402

Could you re-test with the 7.0.0 RC (to be released tomorrow)?

RC is somewhat slower than 6.8, but the not that much slower. OTOH, layout should be much faster. We’ll be optimizing rendering and communications more in 7.0.x series.

Thank you for the information! I have run my test with Vaadin 7.0.0 RC1. The processing time now was approximately 5.4 seconds. Indeed a nice performance improvement of about 20% compared to the former Vaadin 7.0.0 beta 11, yet still more than 3 times slower than the current Vaadin 6.x release.

This is the debug output:

20:57:16:010 Starting Vaadin client side engine. Widgetset: com.vaadin.DefaultWidgetSet
20:57:16:013 Widget set is built on version: 7.0.0.rc1
20:57:16:182 Starting application ROOT-2521314
20:57:16:183 Using theme: reindeer
20:57:16:185 Vaadin application servlet version: 7.0.0.rc1
20:57:16:193 inserting load indicator
20:57:16:195 Scheduling heartbeat in 300 seconds
20:57:16:200 JSON parsing took 3ms
20:57:16:203 Handling message from server
20:57:16:205 * Handling resources from server
20:57:16:206 * Handling type inheritance map from server
20:57:16:207 Handling type mappings from server
20:57:16:211 Handling resource dependencies
20:57:16:212 * Handling locales
20:57:16:213 * Handling meta information
20:57:16:215 * Creating connectors (if needed)
20:57:16:356 * Creating connectors completed: 141 ms
20:57:16:357 * Updating connector states
20:57:16:961 * Update of connector states completed: 605 ms
20:57:16:963 * Updating connector hierarchy
20:57:16:991 * Update of connector hierarchy completed: 30 ms
20:57:16:993 * Sending hierarchy change events
20:57:20:294 * Hierarchy state change event processing completed: 3303 ms
20:57:20:313 * Running @DelegateToWidget
20:57:20:443 * Sending state change events
20:57:20:664 * State change event processing completed: 370 ms
20:57:20:665 * Passing UIDL to Vaadin 6 style connectors
20:57:20:756 * Vaadin 6 style connector updates (updateFromUidl) completed: 92 ms
20:57:20:803 * Unregistered 0 connectors
20:57:20:804 * Unregistering of removed components completed: 46 ms
20:57:20:804 handleUIDLMessage: 4589 ms
20:57:20:805 Starting layout phase
20:57:20:806 Measured 0 non connector elements
20:57:20:806 Layout init in 0 ms
20:57:20:841 No more changes in pass 1
20:57:20:850 Invoke post layout listeners in 8 ms
20:57:20:851 Cleaned old measured sizes in 37ms
20:57:20:851 Total layout phase time: 45ms
20:57:20:852 * Layout processing completed: 48 ms
20:57:20:853 * Dumping state changes to the console
-Response:
+change
+shared state
20:57:21:585 * Dumping state changes to the console completed: 733 ms
20:57:21:586 Processing time was 5383ms for 64408 characters of JSON
20:57:21:587 Referenced paintables: 402

Tried this out with 7.1.8 at Devoxx with Mark. It seems that 1000 components takes just 390ms on my MacBook on Safari.

package com.example.perftest;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@SuppressWarnings("serial")
@Theme("perftest")
public class PerftestUI extends UI {

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = PerftestUI.class)
    public static class Servlet extends VaadinServlet {
    }

    @Override
    protected void init(VaadinRequest request) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);

        int numberOfComponents = 1000; // 200, 300, 400, 700, 1000

        for (int i = 0; i < numberOfComponents; i++) {
            layout.addComponent(new Label("lorem ipsum dolor sit amet"));
        }

    }

}

On FireFox the same test took 1.5s
On Chrome it was 600ms
On IE8 under XP under emulator, it took whopping 30 sec

In any case, I would recommend to keep the number of components visible on screen at once quite a bit smaller. 1000 componets sounds like bad UX in any case - regardless of the speed.

If one replaces vertical layout with CssLayout, IE8 goes from 30sec to 9secs and FF from 1.5s to 700ms.

Dear Joonas,

I tried your code, and my results with Vaadin 7.3.0 on Windows 8.1 are:
Chrome 38.0.2125.104: Processing time was 1369ms for 137164 characters of JSON
Safari 5.1.7: Processing time was 1589ms for 137310 characters of JSON
Mozilla Firefox 32.0.3: Processing time was 3267ms for 137308 characters of JSON

That is slower than I expected. My expectation was based on your post.

Is there something that can explain these differences?

Do we know why IE rending takes time, its spending most of the time while styling the page.