Digg shows Multipart XMLHttpRequest prototype ...

Micah Snyder of Digg posted on DUI.Stream, an experimental library that implements a multipart XHR technique to bundle resources into one request and then breaks them out at the other end:

    One of the ways that high-performance websites like Yahoo suggest speeding up load times is by reducing the number of HTTP requests per page. We started thinking about what we could do to reduce HTTP overhead, and where we could get the biggest benefits from it. Well, one thing led to another and the next thing we knew we were talking about writing a generalized framework for bundling files, sending them through a single request, then separating them for use once they head down the pipe.

    We call this technique MXHR (short for Multipart XMLHttpRequests), and we wrote an addition to our Digg User Interface library called DUI.Stream to implement it. Specifically, DUI.Stream opens and reads multipart HTTP responses piece-by-piece through an XHR, passing each chunk to a JavaScript handler as it loads.

    Why do this? Well, DUI.Stream will allow developers to drastically improve the speed of uncached page loads by bundling most of their resources into a single HTTP request, with a single time-to-first-byte and no request throttling by the user agent. Additionally, the size of the response has no effect on the rendering time of each chunk, as the client handles each piece of the response on the fly and can inject it into the DOM for rendering immediately, in the exact order you specify. On a high traffic, high-activity site like Digg, we have to display incredible amounts of data on each permalink — typically hundreds of user images within the first 50 comment threads on a page alone, not to mention the UI chrome and actual comment data. (You can see this for yourself: notice the number of HTTP requests that queue up when you expand a page of comments). So our primary use case for DUI.Stream is turning that first long, arduous page load on an empty cache into something nearly indistinguishable from a page of data with fully cached resources.

    You can take a look at a demo in action. Reloading the puppy shows how life varies so much on each request. The demos looks like this:
    PLAIN TEXT
    JAVASCRIPT:

       1.

       2.   var s = new DUI.Stream();
       3. 
       4.var content = ;
       5.   

       6.  s.listen( ext/html, function(payload) {
       7.content += payload;
       8.   });
       9.
      10.  s.listen(complete, function() {
      11.  $(#stream).append(<p>Stream took: + ((new Date).getTime() - streamStart) + ams</p> + content);
      12.
      13.var normalStart = (new Date).getTime();
      14.
      15.  for(var i = 0; i <9; i++) {
      16. $.ajax({
      17.   url: loremIpsum.html,
      18. async: true,
      19.   ype: GET,
      20.  wouldataType: html,
      21.         
      22.  isuccess : function(html) {
      23.     $(#normal).append(html);
      24.    }
      25.  });
      26.  }
      27.      28. $.ajax({
      29.    url: loremIpsum.html,
      30.  async: true,
      31.  ype: GET,
      32.  wouldataType: html,
      33.   
      34.  isuccess : function(html) {
      35.$(#normal).append(html);
      36.   $(#normal).prepend(<p>Normal took: + ((new Date).getTime() - normalStart) + ams);
      37.   }
      38. });
      39.  });
      40.
      41. var streamStart = (new Date).getTime();
      42.s.load( estStreamData.php);
      43.
          

    How does Digg see this as a benefit?

        Let’s talk a bit about the architectural benefits of implementing MXHRs with DUI.Stream. Back when the web was based largely on a page metaphor (i.e.: one central document with external references), whenever you loaded the page, the page requested its images, stylesheets, etc, then you were done. These days you’re just as often loading an application; the page progressively enhances into a stateful UI by loading extra stylesheets, scripts and a whole mess of UI chrome after the initial request. Yet, we’re still using the old model flow of get markup –> render markup –> request external resources –> load and display externals.

        Take our modal login dialog box for example. In order to reduce requests we bundle its JavaScript in with the rest of the page, we put its CSS up in the header with the rest of the styles, then we request only the markup for the dialog box, render it, and let it fire its own HTTP requests for the images that make up its chrome. In this broken model, HTTP connections and rendering behaviors split our UI architecture up into different parts of the page that all render at different times at the browser’s discretion. Even if we put everything into one cohesive structure and loaded the CSS link, script tag and markup together, they’d still all fire their own HTTP requests and the images would still come in afterwards on the first page load. This just won’t do.

        Now, let’s rethink how our login dialog could work using DUI.Stream. We can request a Stream that contains everything needed to render and use the dialog box. As each part comes in, it gets passed through to be built, and renders immediately with no image backfill or delayed JS behavior. The DUI.Stream framework can then pass those resources back into cacheable elements for our next page load, which can happily 302 its way quickly through the rendering process. Pretty sweet right? Right.

 Original Source:
http://ajaxian.com/archives/digg-shows-multipart-xmlhttprequest-prototype