вторник, 24 января 2012 г.

GWT widget performance and optimization solution

Many times we have heard stories about how slow GWT widgets are. This is my story about that. I work in big company, owner of one of the biggest social network portals in the world. We have more than 100 million users. I’m GWT developer, and I’m responsible for web performance and music service on this portal.

It all started when we have developed our first music service prototype. We had to show users big lists of tracks. Each track was a GWT widget. And each track had 6-7 active elements, and each of them also was a widget.

During prototype testing, I have noticed that big track list rendering takes a lot of time on old browsers. So I started to dig into the problem. First of all, I’ve created a test case, which contained 163 tracks, and made measurements, results was lamentable: IE6 took 4.5 sec to render this list, FF4 took 0.5 sec.

First improvement I’ve made was removing of all event listeners from widgets and made one in tracks container. Each active element got unique “id” attribute to make it possible for event listener to identify which element was clicked. Each track container got “data-query” attribute with JSON data for event listener to make necessary action after click. In this case this is track id, which needed to find track data in music model.

For example, in music play history we need not only track id, but also track position to identify track on the screen for highlighting, because we can have more than one track with the same id there.

Taking in account fact that all widgets where using UiBinder, I was hoping for good results. But in reality results were as following: IE6 – 4 sec, FF4– 0.35 sec.
My next step was to delete all widgets and build HTML using the simple string concatenation. Events handling wasn’t a problem at that moment, because of my pervious improvement. But result was superb: IE6 – 0.85 sec, FF4 – 0.15 sec.

Such performance was good enough for me, so I stopped future investigations. But this solution was tested in several others projects on our portal, such as messaging and discussions and every time we made services 3-4 times faster.

5 комментариев:

  1. Where interaction is minimal or non-existant, strongly consider using Cells to render large data sets - while somewhat harder to work with (just strings, no element interaction when building content), they are quite efficient, as the cell widgets produce the entire content as an html string before attaching it to the dom.

    Also worth pointing out: UiBinder xml compiles to nearly the same Java that you yourself would write, so there should be no expected improvement there. The only difference would be where you use different widgets, like Html or HtmlPanel in place of composed elements.

  2. Thanks for sharing, nice post! Post really provice useful information!

    Hệ thống website máy đưa võng TS của An Thái Sơn gồm: Mayduavong.me, Mayduavong.biz, Mayduavongtudong.org, Mayduavongts.com, Treem.org cung cấp máy đưa võng giá rẻ tốt nhất.

  3. Thanks for sharing, nice post! Post really provice useful information!

    Giaonhanquocte247 chuyên dịch vụ order hàng nhật, ship hàng đức và dịch vụ order hàng đức về VN uy tín, giá rẻ.

  4. Thanks for sharing, nice post! Post really provice useful information!

    Giaonhan247 chuyên dịch vụ mua vòng tay pandora, giải đáp mua hàng trên amazon có đảm bảo không, hướng dẫn cách mua hàng trên amazon, dịch vụ nước hoa pháp chính hãng và giải đáp gửi hàng từ mỹ về việt nam mất bao lâu giá bao nhiêu.