View State optimization in Salesforce

View state automatically handle all the details for the state management during the page postback. However, because the view state has to be transferred back and forth between browser and Force.com, there could be a chance of performance impact if the view state size is larger. Visualforce imposes a limit of 135 KB to your view state.

  1. Minimize number of forms on a page.

Assume a page contains two forms – form 1 and form 2. Whichever form the user submits and causes a postback, the view state for the page needs to get transferred. To support this, each form on your page will have its own copy of view state. If the associated view state is large, instead of having multiple forms on a page, have a single form and use to submit portions of the form. This practice will ensure that only a single copy of the view state is associated with that page. In the example below, two forms are used to update Account fields and the related Contact attributes.


<!-- Using two forms -->
<apex:page controller="MyController">
<apex:form>
<apex:commandButton action="{!saveAccount}" value="Update Account"/>
<!--Account attributes available for editing -->
</apex:form>

<apex:form>
<apex:commandButton action="{!saveContacts}" value="Update Contacts"/>
<!--Contact attributes available for editing -->
</apex:form>
</apex:page>

<!-- Combining into single form and leveraging <apex:actionRegion> -->
<apex:page controller="MyController">
<apex:form>
<apex:commandButton action="{!saveAccount}" value="Update Account"/>
<!--Account attributes available for editing -->

<apex:actionRegion>
<apex:commandButton action="{!saveContacts}" value="Update Contacts"/>
<!--Contact attributes available for editing -->
</apex:actionRegion>

</apex:form>
</apex:page>

2. Declare variable as transient to reduce view state.

Use the transient keyword in your Apex controllers for variables that aren’t essential for maintaining state and aren’t necessary during page refreshes.

An instance variable declared as transient is not saved and is not transmitted as part of the view state. If a certain field is needed only for the duration of the page request and does not need to be part of the view state, declare it as transient.


<apex:page controller="ExampleController">
The Current Time is : {!currentDateTime}

<apex:form>
<apex:commandLink value="refresh"/>
</apex:form>
</apex:page>


public class ExampleController {

transient DateTime currentDateTime;

public String getCurrentDateTime() {
if (currentDateTime == null) currentDateTime = System.now();
return '' + currentDateTime;
}
}

3. Use Custom Object or Custom Settings to store large set of read-only data.

Suppose your controller needs to call a Web service and parse a large response object. Storing it in view state may not even be an option given the size. Marking it as transient would incur the cost of an additional Web service call and parsing it again. In such instances, you could store the parsed response in a custom object and store just the record id to get to the parsed response. Custom settings provide another mechanism to cache data needed by your controller. Accessing custom settings is faster than access to custom objects since custom settings are part of your application’s cache and does not require a database query to retrieve the data.

4. Refine your SOQL query to retrieve only the data needed for the page.

If you notice that a large percentage of your view state comes from objects used in controllers or controller extensions, consider refining your SOQL calls to return only data that’s relevant to the Visualforce page.

5. Refactor your pages to make it view stateless.

Instead of using apex:commandLink or apex:commandButton components (which need to be inside a apex:formcomponent) to invoke an action, use an apex:outputLink or other non-action method instead and implement the action through an apex:page action attribute – where ever possible not always.


// On this page we use a commandLink to invoke a method. CommandLink should be inside a
// form and thus will have an associated view state
<apex:page controller="ExampleController" >
<b>Example with command link </b>
<apex:form >
<apex:commandLink value="Process Data" action="{!processData}"/>
</apex:form>
</apex:page>

//This page accomplishes the same without the need for a view state
<apex:page >
<b> Example - using outputLink </b>
<apex:outputLink value="{!$Page.MyPage2}">Process Data</apex:outputLink>
</apex:page>

// On MyPage2 you can also invoke a method with an action attribute
<apex:page controller="ExampleController" action="{!processData}">
</apex:page>

6. Using your own State Management 

Sometime, you may want to bypass the view state mechanism offered by Visualforce and do your own state management. In such cases, use a HTML FORM instead of apex:form. This technique is useful for dealing with Visualforce pages that may have to be served to mobile devices where the view state may be too large for the embedded browsers.

To Reduce View State – 

  • Use filters and pagination to reduce data requiring state.
  • Declare instance variables with a transient keyword when the variable is only useful for the current request. The view state includes all non-transient members in the controller and extension, as well as objects reachable from these non-transient members. Decide if some data can be read-only and use the <apex:outputText> component instead of <apex:inputField>.
  • Use JavaScript remoting. Unlike the <apex:actionFunction> component, JavaScript Remoting does not require a form component. This technique doesn’t reduce the overall view state of a page, but your page generally performs better without the need to transmit, serialize, and deserialize the view state.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s