E Using ADF JavaScript Partitioning for Performance

This appendix describes how to get optimal performance when using JavaScript with WebCenter Portal pages.

This appendix contains the following topics:

E.1 Using JavaScript Partitioning

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.

E.2 Using Partitioning for Performance

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:

  1. 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.

  2. 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 the adf-js-partitions.xml file.

  3. 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

    Description of Figure E-1 follows
    Description of ''Figure E-1 Initial results for downloaded files for the home page''

  4. 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.

  5. 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.

    Figure E-2 Finding the feature name

    Description of Figure E-2 follows
    Description of ''Figure E-2 Finding the feature name''

  6. 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 between AdfUIEditableValue 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.

  7. 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

    Description of Figure E-3 follows
    Description of ''Figure E-3 Results for downloaded files for the home page after partitioning''

  8. 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.