performance - what is the best way to optimize my json on an asp.net-mvc site

Question

i am currently using jqgrid on an asp.net mvc site and we have a pretty slow network (internal application) and it seems to be taking the grid a long time to load (the issue is both network as well as parsing, rendering)

I am trying to determine how to minimized what i send over to the client to make it as fast as possible.

Here is a simplified view of my controller action to load data into the grid:

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult GridData1(GridData args) {
 var paginatedData = applications.GridPaginate(args.page ? ? 1, args.rows ? ? 10,
  i => new {
   i.Id,
    Name = "<div class='showDescription' id= '" + i.id + "'>" + i.Name + "</div>",
    MyValue = GetImageUrl(_map, i.value, "star"),
    ExternalId = string.Format("<a href="{0}" target="_blank">{1}</a>",
     Url.Action("Link", "Order", new {
      id = i.id
     }), i.Id),
    i.Target,
    i.Owner,
    EndDate = i.EndDate,
    Updated = "<div class='showView' aitId= '" + i.AitId + "'>" + GetImage(i.EndDateColumn, "star") + "</div>",
  })

 return Json(paginatedData);
}

So i am building up a json data (i have about 200 records of the above) and sending it back to the GUI to put in the jqgrid.

The one thing i can thihk of is Repeated data. In some of the json fields i am appending HTML on top of the raw "data". This is the same HTML on every record. It seems like it would be more efficient if i could just send the data and "append" the HTML around it on the client side. Is this possible? Then i would just be sending the actual data over the wire and have the client side add on the rest of the HTML tags (the divs, etc) be put together.

Also, if there are any other suggestions on how i can minimize the size of my messages, that would be great. I guess at some point these solution will increase the client side load but it may be worth it to cut down on network traffic.

Answer 1

I agree with Craig Stuntz: usage of HTTP Compression of Dynamic Content can be very effective. But very useful can be also reducing of data which are sent.

First of all you should no time send HTML data back to jqGrid. jqGrid has custom formatter (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter and a small example from jqGrid: Editable column that always shows a select) which can be used to fill <TD> elements of jqGrid cells. Moreover html data inside of jqGrid data are very bad if you want to modify grid data. In this case the html data should be modified and send back to the server. So the best way is sending pure data from the server to jqGrid and use custom formatter to format data as a html fragment.

In general you can use custom formatter to "decode" or "decompress" the data. For example, if you have in a column only data like "Bla Bla Bla" and "Ha Ha Ha", you can send 0 instead of "Bla Bla Bla" and 1 instead of "Ha Ha Ha". Inside of the custom formatter for the column you convert 0 and 1 back to the "Bla Bla Bla" and "Ha Ha Ha" strings. If you have general repeated data this approach will not work, but you can use the next (jsonReader) way instead.

There are one more way of data compression: usage of jsonReader as a function (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#jsonreader_as_function and jquery with ASP.NET MVC - calling ajax enabled web service) and usage of jsonmap (see Mapping JSON data in JQGrid for example), which can be also used as a function. This technique is a little more complex, but if you add in your question an example of JSON data which you send currently and the example of jqGrid definition (especially colModel) I will write an example how you can use jsonReader and jsonmap to compress your data.

UPDATED: One place of your code seems to me very suspected:

Name = "<div class='showDescription' id= '" + i.id+ "'>" + i.Name + "</div>",

jqGrid add id attribute to the grid row (<tr> element), but you added manual the same id to the <div> element inside of cell (<td> element, which is child of the <tr> element). This can makes you much problems. A HTML not allowed to have a double ids.

Corresponds your main question I can write a lot of general recommendations like:

• it is better to send boolean as 0 or 1 instead of "true" and "false" to reduce the data.
• if you have id data inside your grid you can use key column option (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options) to send id value only one time inside your JSON data.
• transfer date values in the most compact form yy-m-d and convert it in the text form which you want on the client side with respect of date-formatter.
• and so on

but probably you want first of all to solve your main performance problem in your specific application. To be able to improve your specific application application you should post in your question more information about your solution:

• jqGrid definition inclusive the full colModel definition (not like in long delay between serverside JSON and jqGrid loadComplete on asp.net mvc site)
• a dump of data from paginatedData which you return as Json(paginatedData) or better your JSON data send to the client (you can copy the data from Fiddler http://www.fiddler2.com/fiddler2/ for example)
• version information of jqGrid, jQuery and jQuery UI which you use
• more information about your data model and database can be also helpful

Without this kind of information you can spend your bounty without real benefit for you.

UPDATED 2: A practical example of optimization of JSON data you can find in Jqgrid 3.7 does not show rows in internet explorer