[
https://issues.apache.org/jira/browse/TAP5-1781?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Howard M. Lewis Ship closed TAP5-1781.
--------------------------------------
Resolution: Fixed
Fix Version/s: 5.4
Assignee: Howard M. Lewis Ship
This was one of the driving forces between the client overhaul in 5.4.
Your concerns have been applied, but your patch is now meaningless.
The JavaScript provided for most pages is now much "lighter", consisting of
document-level event handlers, rather than individual event handlers on
specific elements. There's much less to setup during page initialization. In
addition, RequireJS allows for the JavaScript to be loaded in parallel.
We've also gotten rid of some expensive operations such as on-blur field input
validation.
> 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
> Assignee: Howard M. Lewis Ship
> Labels: javascript, performance
> Fix For: 5.4
>
> 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
For more information on JIRA, see: http://www.atlassian.com/software/jira
