ADF JavaScript Partitioning for Performance

Introduction

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 page with right css style classes attached. ADF is smart enough to download only the javaScripts belonging to the components rendered on the page. If individual JS files are downloaded, however, then there will be 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, thus 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 please refer to the latest documentation

 Main Article

The general rules to get optimal JS performance is:

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.
Since JS files will be cached by the browser pages accessed after the home page will need lot less file downloads. Hence it’s important to put more attention on home page downloads.

before-partition

With the above rules in mind, here’s the process to tune the JS partitions for optimal performance:

 

Create new file called adf-js-partitions.xml file in WEB-INF and copy the xml from the documentation URL above.

Remove all the features from the core partition that start with Adf*

 Note: Remember to redeploy the application and clear browser cache everytime you need to test the adf-js-partitions.xml file.

 Now test the home page and note the JS files downloaded. We prefer using firebug.

before-partition2

In order to create partitions look at the individual JS files downloaded by your page. The files starting with ‘Adf’ don’t have partitions defined, while files eg dnd-11.1.1.7 are partitions. Remove (or comment) all those partitions as well.

To know the feature name open the JS file in firebug. The createComponentClass usually gives the feature name.

find-feature-name

 

Create a new partition (say custom-webcenter). Using the technique above add all the downloaded features to the new partition.

Here’s an example for how our partition looks like. Yours will be different depending on the content of home page.

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

 

There is a dependency between AdfUIEditableValue and AdfRichOutputLabel, hence AdfRichOutputLabel should be in core partition even when output label is not used on page. Else it with throw a hard to debug error: <FeatureUtils> <_resolveFeatures> Ignoring feature-dependency on feature “AdfDvtCommon”.  No such feature exists.

Remember to remove the features which you added to custom from the existing partitions.

Re-run the application to see the difference in number of downloads and (more important) time to render.

after-partition

 

Now repeat the process for next complex page. Remember that since home page has downloaded most of the JS files they will be cached by browser and this time there will be lot less features to partition together.

This technique combined with OHS practices of compression and caching will make pages download much faster.

Attached is a PartitionTesterApp containing adf-js-partition.xml file

Add Your Comment