Testing performance: widgets vs elements+bubble, widgets win?

I have been making a few test on attaching events to elements using the event bubble, and I can't believe the results. I am getting better performance from Widgets! I was expecting same of better performance than widgets.

How can this be possible?

Firefox on devmode (here elements win):

Widgets:3990ms

Elements:2806ms

Firefox with the compiled app:

Widgets:448ms

Elements:543ms

Here is the code: 

1. package com.performance.client;
2.  
3. import com.google.gwt.core.client.GWT;
4. import com.google.gwt.dom.client.Element;
5. import com.google.gwt.dom.client.ImageElement;
6. import com.google.gwt.event.dom.client.ClickEvent;
7. import com.google.gwt.event.dom.client.ClickHandler;
8. import com.google.gwt.uibinder.client.UiBinder;
9. import com.google.gwt.uibinder.client.UiField;
10. import com.google.gwt.user.client.ui.Widget;
11.  
12. public class ElementEvent extends Widget {
13.  
14.   private static ElementEventUiBinder uiBinder = GWT.create(ElementEventUiBinder.class);
15.  
16.   interface ElementEventUiBinder extends UiBinder<Element, ElementEvent> {
17.   }
18.  
19.   private final String i1 = "http://www.google.com.ar/images/srpr/nav_logo39.png";
20.   private final String i2 = "http://www.gstatic.com/codesite/ph/images/defaultlogo.png";
21.  
22.   @UiField
23.   ImageElement image;
24.  
25.   @UiField
26.   Element button;
27.  
28.   @UiField
29.   Element label;
30.  
31.   public ElementEvent() {
32.     setElement(uiBinder.createAndBindUi(this));
33.  
34.     addDomHandler(new ClickHandler() {
35.       @Override
36.       public void onClick(ClickEvent event) {
37.         Element e = event.getNativeEvent().getEventTarget().cast();
38.         if (e.equals(label)) {
39.           image.setSrc(i1);
40.         } else if (e.equals(button)) {
41.           image.setSrc(i2);
42.         }
43.       }
44.     }, ClickEvent.getType());
45.   }
46. }

1. <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
2. <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder">
3.         <ui:style>
4.                
5.         </ui:style>
6.         <div>
7.                 <div ui:field="label">1</div>
8.                 <button ui:field="button">1</button>
9.                 <img ui:field="image"src="http://www.gstatic.com/codesite/ph/images/defaultlogo.png"></img>
10.         </div>
11. </ui:UiBinder>

1. package com.performance.client;
2.  
3. import com.google.gwt.core.client.GWT;
4. import com.google.gwt.event.dom.client.ClickEvent;
5. import com.google.gwt.uibinder.client.UiBinder;
6. import com.google.gwt.uibinder.client.UiField;
7. import com.google.gwt.uibinder.client.UiHandler;
8. import com.google.gwt.user.client.ui.Composite;
9. import com.google.gwt.user.client.ui.Image;
10. import com.google.gwt.user.client.ui.Widget;
11.  
12. public class WidgetEvent extends Composite {
13.  
14.   private static WidgetEventUiBinder uiBinder = GWT.create(WidgetEventUiBinder.class);
15.  
16.   interface WidgetEventUiBinder extends UiBinder<Widget, WidgetEvent> {
17.   }
18.  
19.   private final String i1 = "http://www.google.com.ar/images/srpr/nav_logo39.png";
20.   private final String i2 = "http://www.gstatic.com/codesite/ph/images/defaultlogo.png";
21.  
22.   public WidgetEvent() {
23.     initWidget(uiBinder.createAndBindUi(this));
24.   }
25.  
26.   @UiField
27.   Image image;
28.  
29.   @UiHandler("label")
30.   public void labelClick(ClickEvent e) {
31.     image.setUrl(i1);
32.   }
33.  
34.   @UiHandler("button")
35.   public void buttonClick(ClickEvent e) {
36.     image.setUrl(i2);
37.   }
38. }

1. <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
2. <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
3.         xmlns:g="urn:import:com.google.gwt.user.client.ui">
4.         <ui:style>
5.                
6.         </ui:style>
7.         <g:HTMLPanel>
8.                 <g:Label ui:field="label">0</g:Label>
9.                 <g:Button ui:field="button">0</g:Button>
10.                 <g:Image ui:field="image"url="http://www.gstatic.com/codesite/ph/images/defaultlogo.png"></g:Image>
11.         </g:HTMLPanel>
12. </ui:UiBinder>

1. package com.performance.client;
2.  
3. import com.google.gwt.core.client.EntryPoint;
4. import com.google.gwt.user.client.ui.FlowPanel;
5. import com.google.gwt.user.client.ui.HorizontalPanel;
6. import com.google.gwt.user.client.ui.Label;
7. import com.google.gwt.user.client.ui.RootPanel;
8. import com.google.gwt.user.client.ui.VerticalPanel;
9.  
10. public class EventPerformance implements EntryPoint {
11.  
12.   @Override
13.   public void onModuleLoad() {
14.     VerticalPanel v = new VerticalPanel();
15.     v.setWidth("100%");
16.  
17.     HorizontalPanel p = new HorizontalPanel();
18.     p.setWidth("100%");
19.  
20.     final Label w = new Label();
21.     final Label e = new Label();
22.  
23.     v.add(w);
24.     v.add(e);
25.     v.add(p);
26.  
27.     FlowPanel p1 = new FlowPanel();
28.     FlowPanel p2 = new FlowPanel();
29.  
30.     p.add(p1);
31.     p.add(p2);
32.  
33.     long init = System.currentTimeMillis();
34.     for (int i = 0; i < 1000; i++) {
35.       p2.add(new ElementEvent());
36.     }
37.     e.setText("Elements:" + (System.currentTimeMillis() - init) + "ms");
38.  
39.     init = System.currentTimeMillis();
40.     for (int i = 0; i < 1000; i++) {
41.       p1.add(new WidgetEvent());
42.     }
43.     w.setText("Widgets:" + (System.currentTimeMillis() - init) + "ms");
44.  
45.     RootPanel.get().add(v);
46.   }
47. }

Thanks!

--
Guit: Elegant, beautiful, modular and *production ready* gwt applications.

http://code.google.com/p/guit/

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.