(For more resources on Oracle, see here.)
The following diadram illustrates the roles of each layer.
Use AJAX to boost up the performance of your web pages
Asynchronous JavaScript and XML (AJAX) avoid the full page refresh and minimize the data that being transferred between client and server during each round trip. ADF Faces is packaged with 150+ AJAX enabled components which adds AJAX capability to your applications with zero effort. Certain events on an ADF Faces component trigger Partial Page Rendering (PPR) by default. However action components, by default, triggers full page refresh which is quite expensive and may not be required in most of the cases. Make sure that you set partialSubmit attribute to true whenever possible to optimize the page lifecycle. When partialSubmit is set to true, then only the components that have values for their partialTriggers attribute will be processed through the lifecycle.
Avoid mixing of html tags with ADF Faces components
Don’t mix html tags and ADF Faces components though JSF design let you to do so using <f:verbatim> tag. Mixing row html contents with ADF Faces components may produce undesired output, especially when you have complex layout design for your page. It’s highly discouraged to use <f:verbatim> to embed JavaScript or CSS, instead you can use <af:resource> which adds the resource to the document element and optimizes further processing during tree rendering.
Avoid long Ids for User Interface components
It’s always recommended to use short Ids for your User Interface (UI) components. Your JSF page finally boils down to html contents, whose size decides the network bandwidth usage for your web application. If you use long Ids for UI (User Interface) component, that increases the size of the generated html content. This becomes even worse, if you have many UI elements with long Ids.
If there’s no Id is set for a UI component explicitly, ADF Faces runtime auto generates Ids for you. ADF Faces let you to control the auto generation of component ids by setting context parameter ‘oracle.adf.view.rich.SUPPRESS_IDS‘ in the web.xml file. The <context-param> entry in the web.xml file may look like as shown below.
<context-param>
<param-name>
oracle.adf.view.rich.SUPPRESS_IDS
</param-name>
<param-value>auto or explicit </param-value>
</context-param>
Possible values for oracle.adf.view.rich.SUPPRESS_IDS are listed below.
- auto: Components can suppress auto generated IDs, but explicitly set ID will be honored.
- explicit: This is the default value for oracle.adf.view.rich.SUPPRESS_IDS parameter. In this case both auto generated IDs and explicitly set IDs would get suppressed.
Avoid inline usage of JavaScript/Cascading Style Sheets (CSS) whenever possible
If you need to use custom JavaScript functions or CSS in your application, try using external files to hold the same. Avoid inline usage of JavaScripts/CSS as much as possible. A better idea is to logically group them in external files and embed the required one in the candidate page using <af:resource> tag. If you keep JavaScript and CSS in external files, they are cached by the browser. Apparently, subsequent requests for these resources are served from the cache. This in turn reduces the network usage and improves the performance.
Avoid mixing JSF/ADF Faces and JavaServer Pages Standard Tag Library (JSTL) tags
Stick on JSF/ADF Faces components for building your UI as much as you can. JSF component may not work properly with some JSTL tags as they are not designed to co-exist. Relying on JSF/ADF Faces components may give you better extensibility and portability for your application as bonus.
Don’t generate client component unless it’s really needed
ADF Faces runtime generates the client components only when they are really required on the client. However you can override this behavior by setting the attribute clientComponent to true, as shown in the following code snippet.
<af:commandButton text="DoSomething" clientComponent="true">
<af:clientListener method="doSomething" type="action"/>
</af:commandButton>
Set clientComponent to true only if you need to access the component on the client side using JavaScript. Otherwise this may result in increased Document Object Model (DOM) size at the client side and may affect the performance of your web page. The following diagram shows the runtime coordination between client side and server side component trees.
In the above diagram, you can see that no client side component is generated for the server component whose clientComponent attribute is set to false.
Prefer not to render the components over hiding components from DOM tree
If you need to hide UI components conditionally on a page, try achieving this with rendered property of the component instead of using visible property. Because the later creates the component instance and then hides the same from client side DOM tree, where as the first approach skips the component creation at the server side itself and client side DOM does not have this element added. Apparently setting rendered to false, reduces the client content size and gives better performance as bonus.
