Just a quick post because there doesn’t seem to be much on the web about this.
RichFaces AJAX library, originally a separate project called Ajax4JSF, is a well integrated engine for AJAX-enabling a JSF web page.
The library adapts standard JSF/HTML forms so that the POST is sent back to the server via a background request (e.g. XmlHttpRequest ). All requests handled by the server are wrapped in a filter that runs what is mostly the normal JSF lifecycle. The response is then processed by the filter to encode aspects of the JSF response that are not in the returned HTML – like HTTP redirects. This post-processed response is returned to the client which then parses the response and applies it to the page, updating elements, triggering redirects, and so on.
This is fast because JSF builds and holds an in-memory representation of the web page through out the page lifecycle, so the original JSF page does not need to be re-parsed.
Never-the-less, there’s always a need for more speed, and as you expand your AJAX enabled page to include more and more dynamic controls, you may encounter some slow down as both the server and the client need to parse more and more data.
In our application, and on a single page, we have 20 externally included sections, each with a couple of independent forms, and a corresponding number of modal panels, again each with their own forms. Since these forms have been independently developed, performance issues have arisen.
Luckily the designers of the AJAX enabled components within Richfaces have kept this in mind and have provided a full set of attributes that allow you to control what is included in the AJAX lifecycle. Unfortunately, the documentation is somewhat sparse on the various core attributes and how they interact so I hope to use this page to detail how these tags can be used together to optimize the AJAX JSF lifecycle. It’s a work in progress that I will populate as a I update our application.
Core Lifecycle Tags
|Establish an AJAX form
||When any AJAX event defined within an a4j:form is submitted – only form fields from within that form will be submitted. This is the only way to limit the data sent to the server.
|Restrict server-side processing
||Isolate a section of the component tree so that during the AJAX request the server only has to process a subset of the page. Attributes on this tag identify how that isolation affects the individual JSF phases – including determining what is to be included in the HTTP AJAX response. selfRendered appears to disregard non-verbatim code, but it may work well with Facelets since it already stores HTML in the component tree.
|Identify a dynamic output region
||The outputPanel marks a place in the component tree for which the server might send a response, and thus for which the client may have to perform a partial page update. Setting the ajaxRendered=true attribute on this tag bloats all AJAX request from the page and thus slows client and server processing.
In the next post I will follow up with information about the attributes on these tags. Several attributes on the above tags interact with each other; for example what is the effect of combining a form inside an a4j:region renderRegionOnly=”true” and a4j:outputPanel ajaxRendered=”true”?