Let's concurrently load some dots!

This exerciser is intended to allow comparison of page load environments, in particular HTTP/1.n and HTTP/2, but also between standard HTTP and secure HTTP (TLS/SSL) and even between server systems.

An HTML element containing multiple images is built using JavaScript. Once built, the element is inserted into the page so that the browser suddenly has multiple images to load and render. Each image is uniquely identified to ensure it is loaded from the server and not from browser cache. Elapsed seconds are displayed above the images and following the final image load indicates the total time taken for the images loaded and page render.

The image chosen is deliberately small (347 bytes) so that the request-response processing predominates in the measurement rather than content transfer time. The number of images loaded may be selected before refresh.

0.0000 seconds for 0 dots using over

Implementation Note:  Currently HTTP/2 and HTTP/1.n cannot simply be differentiated by JavaScript executing in the browser. This exerciser does this using a WASD mapping rule to load an appropriate JavaScript snippet. Additionally, WASD caching of the image file is enabled despite the query string present. 

  if (http2:) map **/dotty.js */dotty2.js
  if (query-string:%*) set **/dotty.png cache=query