[0001]
[0002]
[0003]
[0004]
[0005]
[0006]
[0007]
[0008]
[0009]
[0010]
[0011]
[0012]
[0013]
[0014]
[0015]
[0016]
[0017]
[0018]
[0019]
[0020]
[0021]
[0022]
[0023]
[0024]
[0025]
[0026]
[0027]
[0028]
[0029]
[0030]
[0031]
[0032]
[0033]
[0034]
[0035]
[0036]
[0037]
[0038]
[0039]
[0040]
[0041]
[0042]
[0043]
[0044]
[0045]
[0046]
[0047]
[0048]
[0049]
[0050]
[0051]
[0052]
[0053]
[0054]
[0055]
[0056]
[0057]
[0058]
[0059]
[0060]
[0061]
[0062]
[0063]
[0064]
[0065]
[0066]
[0067]
[0068]
[0069]
[0070]
[0071]
[0072]
[0073]
[0074]
[0075]
[0076]
[0077]
[0078]
[0079]
[0080]
[0081]
[0082]
[0083]
[0084]
[0085]
[0086]
[0087]
[0088]
[0089]
[0090]
[0091]
[0092]
[0093]
[0094]
[0095]
[0096]
[0097]
[0098]
[0099]
[0100]
[0101]
[0102]
[0103]
[0104]
[0105]
[0106]
[0107]
[0108]
[0109]
[0110]
[0111]
[0112]
[0113]
[0114]
[0115]
[0116]
[0117]
[0118]
[0119]
[0120]
[0121]
<!DOCTYPE html>
<head>
<title>Let's concurrently load some dots!</title>
<style type="text/css">
body { padding:1em; text-align:center;
background-color:#ffffff; color:#000000;
font-family:Arial,Helvetica,Sans-serif; }
noscript { font-size:200%; color:red; }
.scoreboard { font-size: 180%; text-align: center; padding:0.3em; white-space:nowrap; }
.description { font-size:115%; text-align:left; padding:0.5em 3em 0.5em 3em; }
.note { width:50em; text-align:left; padding: 1.5em 3em 0 3em; }
.heading { font-size:150%; font-wieght:bold; }
.dotties { padding:0 0 1em 0; }
.dotties input,select { font-size:110%; }
</style>
<script type="text/javascript" src="./dotty.js"></script>
<script type="text/javascript">
var clockdigs, dotcnt, dotdigs, selector, scheme, tstart;
function populateImages ()
{
dotcnt = 0;
tstart = new Date();
if (!clockdigs) clockdigs = document.getElementById('clockdigs');
if (!dotdigs) dotdigs = document.getElementById('dotdigs');
clockdigs.innerHTML = '0.000';
dotdigs.innerHTML = '0';
document.getElementById('http').innerHTML = HTTP1or2();
if (!scheme) scheme = document.getElementById('scheme');
if (location.protocol == 'http:')
scheme.innerHTML = 'standard HTTP';
else
scheme.innerHTML = 'secure HTTP (TLS/SSL)';
if (!selector) selector = document.getElementById('selector');
var number = selector.value;
var ds = (new Date()).toISOString().replace(/[^0-9]/g,'');
var html = '';
for (count = 1; count <= number; count++)
html += '<img src="dotty.png?' + ds + count + '" onload="clockit()">\n';
div = document.getElementById('imagediv');
div.innerHTML = html;
}
function clockit()
{
var now = new Date();
dotdigs.innerHTML = ++dotcnt;
clockdigs.innerHTML = (now - tstart) / 1000;
}
</script>
</head>
<body onload="populateImages(400)">
<noscript>REQUIRES JAVASCRIPT!</noscript>
<div class="heading">Let's <i>concurrently</i> load some dots!</div>
<div class="description">
<p> This exerciser is intended to allow comparison of page load environments, in
particular HTTP/1.<i>n</i> and HTTP/2, but also between standard HTTP and
secure HTTP (TLS/SSL) and even between server systems.
<p> 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.
<p> 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.
</div>
<div class="dotties">
<select id="selector">
<option value="5">5
<option value="10">10
<option value="20">20
<option value="50" selected>50
<option value="100">100
<option value="200">200
<option value="300">300
<option value="400">400
<option value="500">500
<option value="1000">1000
</select>
<input type="button" value=" Refresh Dots " onclick="populateImages()">
</div>
<div class="scoreboard">
<span id="clockdigs">0.0000</span> seconds for
<span id="dotdigs">0</span> dots using <span id="http"></span> over
<span id="scheme"></span>
</div>
<div id="imagediv">
</div>
<div class="note">
<p> <b>Implementation Note: </b> Currently HTTP/2 and HTTP/1.<i>n</i>
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.
<pre> if (http2:) map **/dotty.js */dotty2.js
if (query-string:%*) set **/dotty.png cache=query</pre>
</div>
</body>
</html>