Our SPA (plain HTML and Javascript) makes use of huge volume of javascript and other resources that are downloaded via XHR. Given the sheer number of components and browser simultaneous request limits, we’re thinking for ways to deliver our resources in a more efficient manner.
A method we’re considering is bundling several resources that logically form a coherent group into a single file; thus reducing down to only one XHR (per group). Furthermore to make it more responsive, we’d like to constantly inspect the partial responseText during the LOADING state, determining if a usable chunk (atomic resource) has already been downloaded, and make it available for deserialization/processing even before the XHR is DONE. (a stream-like experience)
We’re thinking surely somebody else would’ve considered roughly the same approach before, but haven’t really come across any library/framework or container file format that is suitable for our scenario. Anybody else know of something similar?
After studying a little about the Matroska .mkv specification, I ultimately came up with a simple custom file container format that is just enough to describe the various files contained within and their byte boundaries in the greater file.
A client-side Javascript component that uses XHR can progressively check the responseText on each progress event and attempt to extract out the segment that represents the next file in line. On availability of a file, an event (callback) will be triggered for the upper application to consume the file contents while the XHR is still midstream.