Microsoft Dynamics CRM 2013 Updated Form Performance

In the CRM 2013 release, significant improvements are made in the way forms are loaded in the browser. The new forms load more smoothly and perform better compared to previous releases. This blog post provides insight into the loading of forms for updated entities.

To make the user interaction with the updated entity forms smooth, the form loading process is split into multiple stages. These stages are:

  1. Form load start
  2. Entity metadata and layout retrieval
  3. Data Binding and showing view ready form
  4. Transitioning the form to edit ready
  5. Social pane and Inline subgrids initialization
  6. Execution of Javascript web resources

The following diagram depicts how these stages are sequenced:

 

Form load bootup

The form load bootup process starts with HTTP GET request issued to main.aspx URL. The CRM server responds back with HTML response containing entity instance data, configuration values and script/css tags for Javascript libraries and css references. As soon as html content gets loaded into browser memory (including the Javascripts referred in html), the javascript library global.ashx gets the control.

Entity metadata and layout retrieval

The first thing global.ashx JS library does is to retrieve layout and entity metadata from the browser cache. The layout is really an HTML template. The entity instance data retrieved during previous step provides data for the template.

Data Binding and showing view ready form

This step involves doing the template binding of entity layout and entity data. Output of template binding is complete HTML. This HTML gets shown to the user. At this point, we can see all the data belonging to the entity instance requested by the user. This is called ViewReady or ReadReady state.

Transitioning the form to edit ready

During previous stage, even though end user can see the data on the browser, the data can’t be modified for a small fraction of time. During this time, the controls representing the data are in a read-only state. To transition these controls into a state which allows them to be modified, a lot of things happen on the client side.

  1. First of all we need to download additional JavaScript libraries which have necessary logic for all the controls present on the form. These Javascripts are cached on the browser after first download
  2. Execute the downloaded javascript code in right sequence

Post above steps, the controls are ready to be interacted with but not yet fully initialized. At this point of time, the controls are in a delayed initialized state. This means that when user actually clicks on the relevant area on the browser, the remaining initialization code gets to run. The motto here is to avoid paying penalty for executing code which might not be needed in the end. For example, assume there are 50 attributes (each attribute maps to a control) on the updated form, the user is probably going to interact with only a couple of those fields in most of the scenario. For that, it doesn’t make sense to pay upfront cost of fully initializing all these controls. If we were to fully initialize all the controls upfront, all the initialization adds up significantly. This will result in form being ready for user interaction quite late. On the other hand, if the control is initialized only when the user clicks an attribute, the single control initialization cost is too small to be noticed by the user.

Another aspect of control initialization is the phased approach taken to initialize controls belonging to various Tabs on the CRM forms. Typically CRM form attributes are split into multiple Tabs. Controls get delay initialized on the first Tab and then initialization proceeds to the next Tab.

Once controls in the first Tab are initialized, we call this state as Active Tab ready state. This means that user can interact with all the controls present in that Tab.

Social pane and Inline subgrids initialization

The controls which pull data from other entities like Social Pane and inline subgrids, are yet to be initialized. In this stage, Javascript form load code issues Ajax requests to retrieve data for all these controls. Post data retrieval, these controls are filled with response data. At this point, the form is ready for full user interaction.

Execution of Javascript web resources

Once the forms are fully initialized, the control is passed over to web resources registered by the end user or shipped out-of-box.

For more information on forms, see the Customization Guide for Microsoft Dynamics CRM 2013 and Microsoft Dynamics CRM Online.