Tips for optimizing performance on a very sluggish GWT app for mobile browsers

Question

His,

Could maybe some of you share their experiences of mobile development on GWT?

We are developing a pretty interactive website with lots of clickable panels/buttons and experiencing tremendous browser sluggishness. It is a virtual no-go, navigating to the next page takes over a minute at times.

It could be an architecture weakness: every element is a view possibly containing subviews. And every view is backed by a DTO that is coming from server. Maybe such deep object graph is too much, but we are trying to concentrate on optimizing efficiency of view rendering, since the idea of splitting everything in components is so dear to us :) Here are some points of concern to me, but there are probably more.

• As videos from Google I/O Conference 2010 suggest, I have tried constructing widgets with UiBinder. But that has not brought much of speed improvement. We use lots of panels - HTMLTable, HTMLPanel, VerticalPanel, - since every view that hosts other views should attach them somehow. Could replacing them with the new CellList do some good or is a simple HorizontalPanel already lightweight enough?

• There are lost of clickable widgets on the page. And though general recommendation is to cut back on widgets, we do need them all to handle onMouseDown events. What would be the least CPU-intensive clickable component - VerticalPanel with MouseDown handler, a Button, etc?

• Once a user clicks a button there is an PRC request being issued. I have noticed that if PRC calls are stopped for a while, then the style rendering of clicked buttons goes much faster than if an RPC call is made right after a button is clicked. Is there a pattern that dictates how to fire an RPC call that would not interfere with style rendering.

• Profiling reports (Firebug and Speedtracer) indicate that setInnerHTML() and add() calls account for most of the load. add() should be called when views are attached to their parents and I do not know why setInnerHTML takes so long (according to the video presentations they should be very speedy). Is there maybe a reasonable way to optimize add() calls? I really cannot think of a way to do that.

I appreciate every suggestion. Thanks.

Answer 1

From what you've said, add and setInnerHTML are being called a lot. It seems to me that you're looping through a large number of objects and adding them to the UI. If this is the case, you can either use IncrementalCommand (deprecated in GWT 2.1) or Scheduler.RepeatingCommand (GWT 2.1) to let the browser breath while you add a lot of elements.

Furthermore, if you're trying to display information in a grid based format, have you looked at the new Cell based wigets in GWT 2.1?

Another useful tip is to try and avoid using Widgets as much as you can. You mentioned you tried using UiBinder, with little success. But are you still using Label and panels for layout? A good rule of thumb is to follow Kelly Norton's "CAN I HAZ WIDGET" diagram from the Measure in Milliseconds: Performance Tips for Google Web Toolkit talk (slide 27). He also linkes to the Widget inspector bookmarklet to help you track down excess Widget usage. The idea being that most of your layout and labeling would be done with standard HTML and CSS.