JQuery page load optimization

Question

I'm working with a web site that has a very long load time (~10 seconds full load). The page is making around 20 separate server calls for several hundred items each on page load, and using the JQuery DataTables plugin to display them. The page will half load, then wait for the response from the server on each call, and then bind the jquery to the results. Right now the data is NOT stored on the page source, the only evidence of it is in the response headers (I do not know where this kind of stuff is stored..)

One solution i have come up with is to perform all of the service calls on the server side before sending the page loads, and then binding the datatable jquery to the html tables. Since the data is being loaded no matter what, i would be eliminating the 20 server requests and simplifying the code.

My question is about performance; will adding the data to the html source make the page load/perform slower than storing the data wherever the browser sticks it?

$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: listCalendarName, 
    CAMLViewFields: camlFields,
    CAMLQuery: camlQuery,
    completefunc: function (xData, Status) {

        var data = $(xData.responseXML).SPFilterNode("z:row").SPXmlToJson({
            mapping: {
                ows_ID: { mappedName: "ID", objectType: "Counter" },
                ows_resource_title: { mappedName: "Title", objectType: "Text" }
                //removed extra field definitions
            },
            removeOws: true
        });

        self.Directory(data);
    }
});

This is an example of the type of call it is making. the response is in XML and it converts it to JSON.

Answer 1

Without knowing the specifics I will answer generally. if you provide details, I can point to better solutions.

1. You can use a browser dev tool (such as firebug or the inbuilt tool in chrome (use key F12) to verify where it the main load time.

2. If the load time is in javascripts (multiple) then combine and minify them into fewer files.

3. What format are you using to pass data? and how much data are you sending? Data Tables is a very versatile plugin and supports multiple formats. If you are sending a ton of data using JSON then it might slow you down as JSON repeats key values and blots the total data size. I had a page using datatables for 5K rows and with JSON the data was about 1.5 MB and without JSON using simple JS array it went down to 300KB ish.

4. If your using HTML 5, You can also look into local storage and send new data only when needed. You can look into library such as https://github.com/marcuswestin/store.js/

Let me know if it helps of if you need specific pointers.

Update: XML response is also bloated (lots of extra markup) I would suggest to look into two things.

a. See if you can send plain JavaScript array of arrays (search for "datatables Ajax sourced data (array of arrays)", I can't provide link due to lack of reputation points). This works well if all your data is well formed (same number of elements in each array) and

b. Try to defer html rendering via this option http://datatables.net/release-datatables/examples/ajax/defer_render.html