Performance Improvement For AJAX

Introduction

In Web Forms, we use AJAX to invoke server side methods from the client-side (from JavaScript). AJAX internally uses XMLHttpRequest. I have tested a number of AJAX functions implemented in different ways. Also, I have monitored the performance and life cycle of AJAX calls. I have found some serious problems while using AJAX in Web Forms. And, I found a solution for that problem. In this article, I am going to share the problem and the solution.

Performance problems while using AJAX

For each AJAX call, we create an instance of the class which contains the AJAX method. Also, it will create instances for fields, properties, and other class level variables, if we use the new keyword in the class level.

Proof of concept

I have created a project which contains two Web Forms, WebForm1.aspx, WebForm2.aspx, and a class, Student.vb. Both code-behind pages have a getData() AJAX function and a public variable of type Student. Using the MXLogger class, I have logged each stages of the execution flow.

Note: Webform2.aspx’s GetData() AJAX function is Shared. In WebForm1, it is not Shared.

'Student.vb

Public Class Student
    
    Sub New()
        MXLogger.AddLog("From Student.Constructor")
    End Sub
    
    Dim _Name As String
   
    Public Property Name() As String
        Get
            Return _Name
        End Get
        Set(ByVal Value As String)
            _Name = Value
        End Set
    End Property

End Class


'WebForm1.aspx.vb

Public Class WebForm1
    
    Public Student As New Student

    Sub New()
        MXLogger.AddLog("From WebForm1.Constructor")
    End Sub

    <Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)> _
    Public Function getData() As String
        MXLogger.AddLog("From WebForm1.Ajax.getData()")
        Return "I m a Non Shared Function"
    End Function
End Class


'WebForm2.aspx.vb

Public Class WebForm2
   
    Public Student As New Student

    Sub New()
        MXLogger.AddLog("From WebForm2.Constructor")
    End Sub

    <Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)> _
    Public Shared Function getData() As String
        MXLogger.AddLog("From WebForm2.Ajax.getData()")
        Return "I m a Shared Function"
    End Function
End Class

Testing the application

• Test case 1:

  Run webform1.aspx and call the getData() AJAX function three times from the JavaScript.

• Test case 2:

  Run webform2.aspx and call the getData() AJAX function three times from the JavaScript.

For the above test cases, I got logs as below:

//Please Note: Some of these log lines
// I have added Manually for explanation purpose.
 
LOG for the Test Case 1:  ( Non Ajax Shared Function )

-------While Loading The Page--------
5/9/2006 10:37:29 AM>>From Student.Constructor
5/9/2006 10:37:29 AM>>From WebForm1.Constructor
5/9/2006 10:37:29 AM>>From WebForm1.Ajax.getData()
-------First Call For GetData()--------
5/9/2006 10:37:29 AM>>From Student.Constructor
5/9/2006 10:37:29 AM>>From WebForm1.Constructor
5/9/2006 10:37:29 AM>>From WebForm1.Ajax.getData()
-------Second Call For GetData()--------
5/9/2006 10:37:29 AM>>From Student.Constructor
5/9/2006 10:37:29 AM>>From WebForm1.Constructor
5/9/2006 10:37:29 AM>>From WebForm1.Ajax.getData()
-------Third Call For GetData()--------
5/9/2006 10:37:30 AM>>From Student.Constructor
5/9/2006 10:37:30 AM>>From WebForm1.Constructor
5/9/2006 10:37:30 AM>>From WebForm1.Ajax.getData()

LOG for the Test Case 2:  ( Shared Ajax Function )

-------While Loading The Page--------
5/9/2006 10:37:09 AM>>From Student.Constructor
5/9/2006 10:37:09 AM>>From WebForm2.Constructor
5/9/2006 10:37:09 AM>>From WebForm2.Ajax.getData()
-------First Call For GetData()--------
5/9/2006 10:38:11 AM>>From WebForm2.Ajax.getData()
-------Second Call For GetData()--------
5/9/2006 10:38:11 AM>>From WebForm2.Ajax.getData()
-------Third Call For GetData()--------
5/9/2006 10:38:11 AM>>From WebForm2.Ajax.getData()

In the above logs, we can see that for Test Case 1, we can see more logs which are from the constructors of Webform1 and Student.

Conclusion

My suggestion is, in all possible places, we should use the Shared method for AJAX, so that it will not create more instances of the Web Form as well as the class level fields. Thus, we can reduce the number of Finalize() calls from the GC.