[TAP5-1539] Optimize document scans used by Tapestry.FieldEventManager to not locate the label or icon until actually needed

• Type: Improvement
• Status: Closed
• Priority: Major
• Resolution: Fixed
• Affects Version/s: 5.3, 5.2.4
• Fix Version/s: 5.3, 5.2.6
• Component/s: tapestry-core
• Labels: ie perfomance
• Assignee: Howard Lewis Ship
• Reporter: Pedro Ayala
• Created: 03/Jun/11 16:17
• Updated: 14/Oct/11 22:39
• Resolved: 21/Jun/11 21:53

Description

While creating the Field Event Manager we are initializing not only the basic features but also extra information for being use later, like label and icon.

For getting the icon we need to search for the element in the DOM (using a $) and for the label it is searching the DOM for a specific label, which is a very expensive operation in ie7.

If we move the initialization of these elements until they are really needed, we are saving some client side timing.

1. 1. 1. Eclipse Workspace Patch 1.0
         #P tapestry-core
         Index: src/main/resources/org/apache/tapestry5/tapestry.js
         ===================================================================
      • src/main/resources/org/apache/tapestry5/tapestry.js (revision 1131061)
        +++ src/main/resources/org/apache/tapestry5/tapestry.js (working copy)
        @@ -1667,13 +1667,6 @@
        initialize : function(field) { this.field = $(field); - var id = this.field.id; - - var selector = "label[for='" + id + "']"; - - this.label = this.field.up("form").down(selector); - this.icon = $(id + '_icon'); - this.translator = Prototype.K; var fem = $(this.field.form).getFormEventManager(); @@ -1698,7 +1691,24 @@ this.validateInput.bindAsEventListener(this)); }

        },
        +
        + getLabel : function()

        Unknown macro: {+ if (!this.label) { + var id = this.field.id; + var selector = "label[for='" + id + "']"; + this.label = this.field.form.down(selector); + }+ return this.label;+ }

        ,

+ getIcon : function() {
+ if (!this.icon)

{ + var id = this.field.id; + this.icon = $(id + '_icon'); + }

+ return this.icon;
+ },
+
/**

• Removes validation decorations if present. Hides the ErrorPopup, if it
• exists.
  @@ -1706,11 +1716,11 @@
  removeDecorations : function() {
  this.field.removeClassName("t-error");

• if (this.label)
• this.label.removeClassName("t-error");
  + if (this.getLabel())
  + this.getLabel().removeClassName("t-error");

• if (this.icon)
• this.icon.hide();
  + if (this.getIcon())
  + this.getIcon().hide();

if (this.errorPopup)
this.errorPopup.hide();
@@ -1730,12 +1740,12 @@

this.field.addClassName("t-error");

• if (this.label)
• this.label.addClassName("t-error");
  + if (this.getLabel())
  + this.getLabel().addClassName("t-error");

• if (this.icon) {
• if (!this.icon.visible())
• new Effect.Appear(this.icon);
  + if (this.getIcon()) { + if (!this.getIcon().visible()) + new Effect.Appear(this.getIcon()); }

if (this.errorPopup == undefined)