SPDY and lazy image loading via JavaScript

Question

I'd like to load a bunch of images via JavaScript and insert them into my page. When the web server supports SPDY, does each image generate a new request or are all the image request bundled into one SPDY request? Are there some methods that do this (for example creating img tags in the DOM) and others that don't? Are there differences in browser behavior?

Answer 1

If the images you want to load from JavaScript are static (i.e. not generated on the fly, or chosen on the fly by the server), then a SPDY server that supports SPDY Push can serve these images along with the primary resource (usually the HTML page that loads the JavaScript).

Jetty is one of the few servers that supports SPDY Push in a transparent way for applications. You can look up the documentation about Jetty's SPDY support here, and a blog about details of the SPDY Push configuration here (official documentation is coming).

Here you can find a video that shows the difference that SPDY Push makes.

If you're not using a server that is SPDY Push enabled, then every each image will generate a new request to the server (unless they are otherwise cached by the browser from previous requests).

Chrome already supports SPDY Push, Firefox will support it soon.