You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tapestry.apache.org by "Pedro Ayala (Created) (JIRA)" <ji...@apache.org> on 2011/12/08 17:53:39 UTC
[jira] [Created] (TAP5-1781) Improve javascript load time of pages
improving onDomLoadedCallback
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
[jira] [Updated] (TAP5-1781) Improve javascript load time of pages
improving onDomLoadedCallback
Posted by "Pedro Ayala (Updated) (JIRA)" <ji...@apache.org>.
[ https://issues.apache.org/jira/browse/TAP5-1781?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Pedro Ayala updated TAP5-1781:
------------------------------
Attachment: changes.patch
> 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
> Labels: javascript, performance
> 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
[jira] [Updated] (TAP5-1781) Improve javascript load time of pages
improving onDomLoadedCallback
Posted by "Pedro Ayala (Updated) (JIRA)" <ji...@apache.org>.
[ https://issues.apache.org/jira/browse/TAP5-1781?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Pedro Ayala updated TAP5-1781:
------------------------------
Attachment: changes.patch
> 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
> Labels: javascript, performance
> 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