Preload Ajax Data as JSON

[Posted by George V. Reilly]

Preloading Ajax data as JSON has helped improve the load time and perceived performance of our family software application. Most of the pages in our Web client are dynamically generated in the browser from a complex set of JavaScript and CSS, so we're always looking out for ways to make them appear more quickly.

Our Combiner Control has been a big win: it coalesces a large number of small files together, reducing the latency of loading the page.

A few months ago, our Home Page would make eight Ajax calls as it loaded, to fetch data to populate different parts of the page, such as the family calendar and shopping list panes. That behavior fell out of the modular design, but the two-connection limit forced these calls to be serialized, magnifying the latency of the page. Panes were initially rendered blank, with an all-too noticeable pause before the data appeared.

My first change was to aggregate the eight calls into one ‘mondo’ call. That helped.

// pseudo code
function BuildHomePage()
{
    CreateCalendarPane();
    CreateShoppingPane();
    // other panes
    GetAjaxData( "/Ajax/GetMondoData.ashx", RenderMondoData );
}

// Callback function, executed several hundred milliseconds later
function RenderMondoData(ajaxData)
{
    CalendarPane.Fill( ajaxData.calendarData );
    ShoppingPane.Fill( ajaxData.shoppingData );
    // other panes
}

Later, I had the insight that I should send all that Ajax data down in the initial payload of the page. Now, the page can be rendered immediately: we've eliminated the latency of a roundtrip. Not only does this reduce the overall load time for the page, it significantly improves the perceived performance of the page, as panes are rendered sooner and with full data.

It's simple to make this work in ASP.NET:

<script runat="server">
static string HomePageDataJson()
{
    DateTime startDate = DateTime.Now;
    DateTime endDate = startDate.AddDays(9);
    return AjaxPro.JavaScriptSerializer.Serialize(
        new HomePageData( startDate, endDate ) );
}
</script>

<script type="text/javascript">
var homepagedata = <%= HomePageDataJson() %>;
var homepage = new HomePage( );
RenderMondoData( homepagedata );
</script>

The HomePageDataJson() function in the server script block creates the same object that the Ajax endpoint would have, then serializes it into a JSON string, using AjaxPro. This function could also be declared in a CodeBehind .cs page.

In the client script block, this JSON string is used to initialize a var with a JavaScript literal, which is then passed down into the JavaScript code.

In principle, this could make the client-side JavaScript a little simpler as it no longer needs to break the processing into asynchronous steps. In practice, we still need those handlers when the user navigates through the dataset.

This JSON preloading technique could easily be adapted to other Ajax libraries and other Web servers.

Comments

[Sangam Uprety]

What about consuming asp.net web service with jquery ajax? I guess this would be even better in terms of size and speed. Thanks.