I have stumbled across a very curious issue of poor performance when asp.net MVC control is called by jquery $.ajax function. The control performs a database action that takes 403ms, but the total $.ajax call is 3400ms according to Firebug, which is quite a bit of added overhead. I need to optimize the performance but I am not clear where does this overhead comes from.
Here is the code. In my Controller, I have
public JsonResult SetSearchResults(Criteria searchCriteria)
{
SearchResult myReportsResult = _repository.GetResults(searchCriteria);
//the statement above takes 403 ms
return Json(myReportsResult);
}
public SearchResult GetResults(SearchCriteria searchCriteria)
{
SearchResult result = SearchResult();
DataTable dbResults = _da.GetDBResults(searchCriteria);
List<IncidentReportHeader> irs = new List<IncidentReportHeader>();
for (int i = 0; i < dbResults.Rows.Count; i++)
{
IncidentReportHeader ir = new IncidentReportHeader();
//populate all the properties of the ir object here,
irs.Add(ir);
}
result.Reports = irs;
return result;
}
//models
public class SearchResult
{
private List<IncidentReportHeader> _res;
private int _numOfPages=0;
private int _recordsPerPage=0;
public List<IncidentReportHeader> Reports {
get { return _res; }
set
{
_res = value;
}
}
public SearchResult()
{
_res = new List<IncidentReportHeader>();
}
}
}
//db call
public DataTable GetDBResults(SearchCriteria searchCriteria)
{
//add all params to the db object needed for the stored procedure here
DataTable dt = _db.ExecuteStoredProc("myDB.PACKAGE_NAME.stored_proc", 2000, ref _spParams, ref _spResultVariables);
return dt;
}
in my JS
function SearchIncidentReports() {
//pack the searchCriteria object here
var searchCriteria = ...
var start = new Date().getTime();
$.ajax({
contentType: 'application/json, charset=utf-8',
type: "POST",
url: myController/SetSearchResults,
data: JSON.stringify({ searchCriteria: searchCriteria }),
cache: false,
dataType: "json",
success: function (response) {
var got_data = new Date().getTime();
var diff1 = got_data - start;
alert("data loaded in: " + diff1 + " ms");
// do whatever you need with the data here.
// diff1 = 3400ms which is what Firebug shows too
},
error: function (xhr, ajaxOptions, thrownError) {
var result = $.parseJSON(xhr.responseText);
alert(result.ErrorMessage);
}
});
return false;
}
Another note, when the database call is removed and I populate the object manually, the performance is super fast.
It seems that going from 403ms to 3400ms is plain wrong and clearly has unjustified overhead. Can you please point out what is being done wrong here? It's pretty bare bones and I can't really avoid going to the database.
I tried having the Control return the empty set (ActionResult) rather than JsonResult but it had the same issue.
Is this asp.net MVC issue?
Update
I also have an action that returns an Excel file and exactly the same database operation inside it. The file comes back in 410ms and not using $.ajax
function. It appears that $.ajax
is causing the delay somehow. All I need is to get the data from the database, and normally it's very fast.
I added the inside of the controller code because someone asked for it, but I will repeat that the inside (yes the total inside of the Controller call) takes 403 ms. Clearly, the issue is not on the server or database call. It seems to me that it is between client and server.
Notes:
- In Firebug the total time it took to POST using Action GetResults is 3.54s.
- When I navigate to Net->All in Firebug, where the breakdown of the request is listed I see that the largest time is spent waiting (3.5s).
It appears that 3.5s - 403ms time is spent when communicating between server and client, but where and why?