TechEd - AJAX Performance Tips

The presenter for this topic was Jeff Prosise.

Probably the most popular control with the new ASP.NET AJAX functionality is the UpdatePanel, but unbeknownst to most developers, including myself until I attended this session, was that the UpdatePanel is not that great performance wise.  It is still better than a post back but since the UpdatePanel has to send back the entire ViewState there is not that much on performance gains.

Here are some tips when using the UpdatePanel:

• Set the UpdateMode property to conditional.  This will cause any controls that does not need to update to not ask to be updated.  Call the UpdatePanel.Update function when you need other UpdatePanels to update.
• Eliminate unnecessary rendering.  Only include the controls you want to update in the update panel.

The better approach altogether is to forego the UpdatePanel completely and use the Sys.WebForms.PageRequestManager instead.  This control is the client side version of the update panel and it allows more control of the asynchronous updates such as prioritizing overlapping updates, canceling updates before they occur, canceling updated as they occur, and highlighting update panels.  You can see what functionality it has here.  Although it is more work for the developer, there is no view state and no lifecycle page processing so there is far greater efficiency.

Here is a code example from the demo:

<asp:Button ID="CancelButton" Runat="server" Text="Cancel" OnClientClick="cancelUpdate(); return false" />

...

<script type="text/javascript">

function cancelUpdate()

{

var obj = Sys.WebForms.PageRequestManager.getInstance();

if (obj.get_isInAsyncPostBack())

   obj.abortPostBack();

}

</script>