Improve javascript load time of pages improving onDomLoadedCallback
-------------------------------------------------------------------
Key: TAP5-1781
URL: https://issues.apache.org/jira/browse/TAP5-1781
Project: Tapestry 5
Issue Type: Improvement
Components: tapestry-core
Affects Versions: 5.3
Reporter: Pedro Ayala
Attachments: changes.patch
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) {
+ 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" ) {
+ if (element != Tapestry.currentFocusField) {
+ document.fire(Tapestry.FOCUS_CHANGE_EVENT, element);
+
+ Tapestry.currentFocusField = element;
+ }
+ }
},
/*
--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators:
https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira
