title: JQuery page load optimization
body: <p>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..)</p>
  
  <p>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. </p>
  
  <p>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? </p>
  
  <pre><code>$().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);
      }
  });
  </code></pre>
  
  <p>This is an example of the type of call it is making. the response is in XML and it converts it to JSON. </p>