This appendix describes how to get optimal performance when using JavaScript with WebCenter Portal pages.
This appendix contains the following topics:
ADF UI components are complex entities, each containing one or more HTML, CSS, and JavaScript (JS) elements. When a component is rendered, the HTML tags are stamped on the page with right CSS style classes attached. ADF is smart enough to download only the JS files belonging to the components rendered on the page. If individual JS files are downloaded, however, it will cause a lot of network traffic per page, slowing down the page performance. The solution is to use JavaScript Partitions.ADF's JavaScript Partitioning feature helps combine individual JS files from ADF components together into buckets, thereby reducing the number of downloads. By default, all ADF pages need the boot.js
and core.js
files to operate. Additionally, JS files are downloaded either combined as partitions or one for each component (if no partition is defined). For more information about JavaScript partitioning, see "Using JavaScript Library Partitioning" in Web User Interface Developer's Guide for Oracle Application Development Framework.
The general rules to get optimal JS performance are:
Keep the number of static file downloads less to avoid network latency
Keep individual file size to be around the same else the largest file will delay the page load.
Construct the home page carefully so that subsequent browser pages need fewer file downloads
Keeping these general rules in mind, follow these steps to tune the JS partitions for optimal performance:
Create a new file called adf-js-partitions.xml
file in WEB-INF and add the XML as described in the "How to Create JavaScript Partitions" section in Web User Interface Developer's Guide for Oracle Application Development Framework.
Remove all the features from the core partition that start with Adf*
.
Note:
Remember to redeploy the application and clear the browser cache every time you test theadf-js-partitions.xml
file.Test the home page and note the JS files downloaded. Figure E-1 shows the results using Firebug.
Figure E-1 Initial results for downloaded files for the home page
To create partitions, examine the individual JS files downloaded by your page. The files starting with Adf
don't have partitions defined, while files such as dnd-11.1.1.7
are partitions. Remove (or comment out) all those partitions as well in the adf-js-partitions.xml
file.
To find the feature name, open the JS file in Firebug or similar tool. The createComponentClass
usually contains the feature name as shown in Figure E-2.
Create a new partition (for example, custom-webcenter
), and using the technique above, add all the downloaded features to the new partition as shown in Example E-1. Note that this is only an example, and that your partition will be different depending on the content of the home page.
Example E-1 Sample JavaScript partition
<partition> <partition-name>custom-webcenter</partition-name> <feature>AdfRichDialog</feature> <feature>AdfRichSubform</feature> <feature>AdfRichForm</feature> <feature>AdfRichPopup</feature> <feature>AdfInlineEditing</feature> <feature>AdfRichPanelSplitter</feature> <feature>AdfPageCustomizable</feature> <feature>AdfRichShowDetailFrame</feature> <feature>AdfRichPanelGridLayout</feature> <feature>AdfShowPopupBehavior</feature> <feature>AdfRichCommandLink</feature> <feature>AdfRichCommandButton</feature> <feature>AdfRichDocument</feature> <feature>AdfRichPanelWindow</feature> <feature>AdfDragAndDrop</feature> <feature>AdfRichPanelCustomizable</feature> <feature>AdfDialogServicePopupContainer</feature> </partition>
Note:
There is a dependency betweenAdfUIEditableValue
and AdfRichOutputLabel
, and consequently AdfRichOutputLabel
should be in the core partition even when an output label is not used on the page. If this is not done, the following error is produced:
<FeatureUtils> <_resolveFeatures> Ignoring feature-dependency on feature "AdfDvtCommon". No such feature exists
.
Remove the features which you added to custom from the existing partitions and re-run the application to see the difference in number of downloads and (more importantly) the time to render.
Figure E-3 Results for downloaded files for the home page after partitioning
Repeat the process for any other complex pages. Note that since the home page will have downloaded most of the JS files they will be cached by the browser and this time there will be a lot less features to partition.