[TAP5-1781] Improve javascript load time of pages improving onDomLoadedCallback

• Type: Improvement
• Status: Closed
• Priority: Major
• Resolution: Fixed
• Affects Version/s: 5.3
• Fix Version/s: 5.4
• Component/s: tapestry-core
• Labels: javascript performance
• Assignee: Howard Lewis Ship
• Reporter: Pedro Ayala
• Created: 08/Dec/11 16:52
• Updated: 25/Jul/13 20:52
• Resolved: 25/Jul/13 20:52

Description

One of tapestry main slow loading of big pages with many forms and components is the need of initializing the observers for popup up messages and for the click on submit elements.
Right now tapestry is using two $$, one for each process, and then creating an observe for each element. This way, although working fine, is terrible slow in ie7 with big pages.
One way to improve this issue is using less observes and removing the $$. This patch observe the document element for click and keyup events, and then checks if the element is one of the one we want fire some event.

Index: src/main/resources/org/apache/tapestry5/tapestry.js
===================================================================
— src/main/resources/org/apache/tapestry5/tapestry.js
+++ src/main/resources/org/apache/tapestry5/tapestry.js
@@ -99,6 +99,12 @@ var Tapestry = {

/** Initially, false, set to true once the page is fully loaded. */
pageLoaded : false,
+
+ /** Initially, false, set to true once we start observing the document for clicks. */
+ trackingClicks : false,
+
+ /** Initially, false, set to true once we start observing events for displaying errors. */
+ trackFocusError : false,

/**

• Invoked from onclick event handlers built into links and forms. Raises a
  @@ -196,25 +202,11 @@ var Tapestry = {
• Adds a focus observer that fades all error popups except for the
• field in question.
  */

• $$("INPUT", "SELECT", "TEXTAREA").each(function(element) {
• /*
• * Due to Ajax, we may execute the callback multiple times, and we
• * don't want to add multiple listeners to the same element.
• */
• var t = $T(element);
  -
• if (!t.observingFocusChange) {
• element.observe("focus", function() {
• if (element != Tapestry.currentFocusField) { - document.fire(Tapestry.FOCUS_CHANGE_EVENT, element); - - Tapestry.currentFocusField = element; - }
• });
  -
• t.observingFocusChange = true;
• }
• });
  + if (!Tapestry.trackFocusError) { + document.observe("keyup", Tapestry.errorPoup.bind(this)); + document.observe("click", Tapestry.errorPoup.bind(this)); + Tapestry.trackFocusError = true; + }

/*

• When a submit element is clicked, record the name of the element into
  @@ -224,17 +216,26 @@ var Tapestry = {
• TAP5-1418: Added "type=image" so that they set the submitting element
• correctly.
  */

• $$("INPUT[type=submit]", "INPUT[type=image]").each(function(element) {
• var t = $T(element);
  -
• if (!t.trackingClicks) {
• element.observe("click", function() { - $(element.form).setSubmittingElement(element); - }

  );
  -

• t.trackingClicks = true;
• }
• });
  + if (!Tapestry.trackingClicks)
  Unknown macro: {+ Event.observe(document, "click", function(event) { + var element = event.findElement(); + if (element.tagName == "INPUT" && (element.type=="submit" || element.type=="image")) + $(element.form).setSubmittingElement(element); + });+ + Tapestry.trackingClicks = true;+ }

  + },
  +
  + errorPoup : function(event) {
  + var element = event.findElement();
  + if (element.tagName == "INPUT" || element.tagName == "SELECT" || element.tagName == "TEXTAREA" )

  Unknown macro: {+ if (element != Tapestry.currentFocusField) { + document.fire(Tapestry.FOCUS_CHANGE_EVENT, element); + + Tapestry.currentFocusField = element; + }+ }

  },

/*