Encoding XHR image data (v30)

Revision 30 of this benchmark created on

Preparation HTML

<script>
  var url = '/favicon.ico', good = 'AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAC6axz/umwc/7psHP+6ahn/umkY/7tsHP+0ZBL/xp53/+HPvP+6f0P/uGcV/7prHP+6axz/umsc/7prHP+6axz/u24f/7xuH/+7bR3/t3Mu/7Z0MP+7bB3/u20d/7VvJ//QrIf/59nL/7NmGf+8bh7/u24f/7xuH/+8bh//vG4f/71xJP++cST/uWkY/8qgdv/fzLj/r14M/7trGv+/bhz/uHUw/+7n3/+6eTf/vm8g/75xJP++cST/vXEk/75xJP/AdSn/wHUp/79xIv/BiE//8+3o/9Oykv/Hl2f/uW4j/7RoGv/n2s3/wo1Y/7hmE/+/dCj/wHUp/8B1Kf/AdSn/wnku/8J5Lv/DeCz/u3g0//Lr5P/WuJn/7N/S/8+ui//AkmP/8uri/+TSv//PrYn/vHo2/8N4LP/CeS7/wnku/8V9NP/FfTT/xn00/7x0LP/o2sz/w5Ff/8eYaf/x6uL/vYtZ/+LMtv/w5t3/xptv/716Nv/GfTP/xX00/8V9NP/HgTr/yII6/8iCOv/BeC7/17qc/+3j2f/r4NT/17mb/75yJf/Di1L/7ufg/8uhd//Fkl7/xX42/8iCO//HgTr/yoZA/8qGQf/LhkH/yYQ+/7t8PP++hk3/woZI/8SAOv/Mh0H/xoA5/8qaa//bwKX/y6J5/8aBOv/LhkH/yoZB/82LR//Ni0f/zolE/8WNVP/hzrz/5NG9/8ycbP/LhkH/zopF/82HQf/Lgzv/yII6/8qFQP/Oi0j/zYtH/82LR//Qj07/0I9N/9GPTP/Jj1X/zJxr/9e1kv/v59//xodH/8uUW//QpXn/zJxq/8qKSf/RkE3/0I9N/9CPTf/Qj03/0pRU/9OUVP/SlFT/05NS/9KOSf/Nmmf/8Ojh/8aKTv/UspD/3MWt/+zj2f/cwaX/zYxK/9OUVP/TlFT/0pRU/9WYWf/VmFn/1Zha/9aYWv/WllT/0aBv/+/n4P/NlFr/x49V/9Ctif/z6+P/4cu0/8+PT//WmFr/1Zha/9WYWv/XnF//15xf/9icX//Vml7/z5de/9Gme//y7Ob/yZBV/+HIr//38u7/zaiE/8mTXP/Ym17/2Jxf/9ecX//XnF//2p9j/9qfZP/bn2P/z5pk/+DQwP/q3dD/59jJ/86VW//XsYr/6t7T/+HPvf/Rq4T/2Jte/9qfZP/Zn2T/2p9k/9yiaP/comj/3KNo/9mgZ//TnWf/0KmA/9/Nuv/TnWf/2p5h/9OeaP/Uo3H/1qBo/9yjaP/bomj/26Jo/9uiaP/dpGv/3aRr/9yka//dpWv/3qNm/9Wpff/gzbr/1aBq/96la//epGr/3qRp/96la//dpWv/3aRr/92ka//dpGv/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==';
  function arrayBufferDataUri(raw) {
   var base64 = '';
   var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  
   var bytes = new Uint8Array(raw);
   var byteLength = bytes.byteLength;
   var byteRemainder = byteLength % 3;
   var mainLength = byteLength - byteRemainder;
  
   var a, b, c, d;
   var chunk;
  
   // Main loop deals with bytes in chunks of 3
   for (var i = 0; i < mainLength; i = i + 3) {
    // Combine the three bytes into a single integer
    chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
  
    // Use bitmasks to extract 6-bit segments from the triplet
    a = (chunk & 16515072) >> 18 // 16515072 = (2^6 - 1) << 18;
    b = (chunk & 258048) >> 12 // 258048   = (2^6 - 1) << 12;
    c = (chunk & 4032) >> 6 // 4032     = (2^6 - 1) << 6;
    d = chunk & 63 // 63       = 2^6 - 1;
    // Convert the raw binary segments to the appropriate ASCII encoding
    base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
   }
  
   // Deal with the remaining bytes and padding
   if (byteRemainder == 1) {
    chunk = bytes[mainLength];
  
    a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2;
    // Set the 4 least significant bits to zero
    b = (chunk & 3) << 4 // 3   = 2^2 - 1;
    base64 += encodings[a] + encodings[b] + '==';
   } else if (byteRemainder == 2) {
    chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
  
    a = (chunk & 16128) >> 8 // 16128 = (2^6 - 1) << 8;
    b = (chunk & 1008) >> 4 // 1008  = (2^6 - 1) << 4;
    // Set the 2 least significant bits to zero
    c = (chunk & 15) << 2 // 15    = 2^4 - 1;
    base64 += encodings[a] + encodings[b] + encodings[c] + '=';
   }
  
   return base64;
  }
  
  // Get the image into the cache as we are not testing the network speed
  var req = new XMLHttpRequest();
  if (req.overrideMimeType) {req.overrideMimeType('text/plain; charset=x-user-defined'); }
  req.open('GET', url, false);
  req.send(null);

  // launches the xhr request for the image as an arraybuffer
  function getArraybuffer(f) {
    var req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.responseType = 'arraybuffer';
    req.addEventListener('load', function() { f(req.response); });
    req.send();
  }

  // launches the xhr request for the image as a binary string
  function getString(f) {
    var req = new XMLHttpRequest();
    if (req.overrideMimeType) { req.overrideMimeType('text/plain; charset=x-user-defined'); }
    req.open('GET', url, true);
    req.addEventListener('load', function() { f(req.responseText); });
    req.send();
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
btoa + Uint8Array loop
// async test
getArraybuffer(function(buffer) {
 var bytes = new Uint8Array(buffer);
 var len = bytes.byteLength;
 var binary = '';
 for (var i = 0; i < len; i++) {
  binary += String.fromCharCode(bytes[i]);
 }
 if (btoa(binary) !== good) {
   deferred.benchmark.error = new Error('Incorrect result');
   deferred.benchmark.aborted = true;
 }
 deferred.resolve();
});
ready
btoa + String loop
// async test
getString(function(string) {
 var len = string.length;
 var binary = '';
 for (var i = 0; i < len; i+=1) {
  binary += String.fromCharCode(string.charCodeAt(i) & 0xff);
 }
 if (btoa(binary) !== good) {
   deferred.benchmark.error = new Error('Incorrect result');
   deferred.benchmark.aborted = true;
 }
 deferred.resolve();
});
ready
arrayBufferDataUri
// async test
getArraybuffer(function(buffer) {
 if (arrayBufferDataUri(buffer) !== good) {
   deferred.benchmark.error = new Error('Incorrect result');
   deferred.benchmark.aborted = true;
 }
 deferred.resolve();
});
ready
btoa + String loop (batched 4)
// async test
getString(function(string) {
 var len = string.length;
 var binary = '';
 for (var i = 0; i < len; i+=4) {
  binary += String.fromCharCode(string.charCodeAt(i+0) & 0xff, string.charCodeAt(i+1) & 0xff, string.charCodeAt(i+2) & 0xff, string.charCodeAt(i+3) & 0xff);
 }
 for (i-=4; i < len; i+=1) {
  binary += String.fromCharCode(string.charCodeAt(i) & 0xff);
 }
 if (btoa(binary) !== good) {
   deferred.benchmark.error = new Error('Incorrect result');
   deferred.benchmark.aborted = true;
 }
 deferred.resolve();
});
ready
btoa + Uint8Array loop (batched 8)
// async test
getArraybuffer(function(buffer) {
 var bytes = new Uint8Array(buffer);
 var len = bytes.byteLength;
 var binary = '';
 for (var i = 0; i < len; i+=8) {
  binary += String.fromCharCode(bytes[i], bytes[i+1], bytes[i+2], bytes[i+3], bytes[i+4], bytes[i+5], bytes[i+6], bytes[i+7]);
 }
 for (i -= 8; i < len; i++) {
  binary += String.fromCharCode(bytes[i])
 }
 if (btoa(binary) !== good) {
   deferred.benchmark.error = new Error('Incorrect result');
   deferred.benchmark.aborted = true;
 }
 deferred.resolve();
});
ready
btoa + Uint8Array + apply
// async test
getArraybuffer(function(buffer) {
 var bytes = new Uint8Array(buffer);
 var binary = String.fromCharCode.apply(null, bytes);
 if (btoa(binary) !== good) {
   deferred.benchmark.error = new Error('Incorrect result');
   deferred.benchmark.aborted = true;
 }
 deferred.resolve();
});
ready
btoa + Uint8Array loop (batched 3)
// async test
getArraybuffer(function(buffer) {
 var bytes = new Uint8Array(buffer);
 var len = bytes.byteLength;
 var base64 = '';
 for (var i = 0; i < len; i+=3) {
  base64 += btoa(String.fromCharCode(bytes[i], bytes[i+1], bytes[i+2]));
 }
 i -= 3;
 if(len - i == 1)
  base64 += btoa(String.fromCharCode(bytes[i]));
 if(len - i == 2)
  base64 += btoa(String.fromCharCode(bytes[i], bytes[i + 1]));
 if (base64 !== good) {
   deferred.benchmark.error = new Error('Incorrect result');
   deferred.benchmark.aborted = true;
 }
 deferred.resolve();
});
ready
btoa + String loop + apply
// async test
getString(function(string) {
 var len = string.length;
 var bytes = new Array(len);
 for (var i = 0; i < len; i+=1) {
  bytes[i] = string.charCodeAt(i) & 0xff;
 }
 var binary = String.fromCharCode.apply(null, bytes);
 if (btoa(binary) !== good) {
   deferred.benchmark.error = new Error('Incorrect result');
   deferred.benchmark.aborted = true;
 }
 deferred.resolve();
});
ready
IE Only XHR
// async test
var r = new ActiveXObject('Msxml2.XmlHttp.6.0');
r.onreadystatechange = function() {
   var data, j;
   if (r.readyState === 4 && r.status === 200) {
      data = new VBArray(r.responseBody).toArray();
      r.abort();
      j = data.length;
      while (j--) { data[j] = String.fromCharCode(data[j]); }
       if (btoa(data.join('')) !== good) {
         deferred.benchmark.error = new Error('Incorrect result');
         deferred.benchmark.aborted = true;
       }
       deferred.resolve();
   }
};
r.open('GET', url, true);
r.send();
ready
btoa + String
// async test
getString(function(string) {
 if (btoa(unescape(encodeURIComponent(string))) !== good) {
   deferred.benchmark.error = new Error('Incorrect result');
   deferred.benchmark.aborted = true;
 }
 deferred.resolve();
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.