Encoding XHR image data (v21)

Revision 21 of this benchmark created on

Preparation HTML

<script>

  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 "data:image/jpeg;base64," + base64;
  }
  
  // Get the image into the cache as we are not testing the network speed
  var req = new XMLHttpRequest();
  req.overrideMimeType('text/plain; charset=x-user-defined');
  req.open('GET', 'http://jonathanleighton.com/images/me.jpg', false);
  req.send(null);


  // launches the xhr request for the image as an arraybuffer
  function getArraybuffer(d, f) {
    var req = new XMLHttpRequest();
    req.open('GET', 'http://jonathanleighton.com/images/me.jpg', true);
    req.responseType = 'arraybuffer';
    req.addEventListener('load', function() {
      try {
        f(req.response);
      } catch(ex) {
        d.benchmark.error = ex;
        d.benchmark.aborted = true;
        d.resolve();
      };
    });
    req.send();
  }

  // launches the xhr request for the image as a binary string
  function getString(d, f) {
    var req = new XMLHttpRequest();
    req.overrideMimeType('text/plain; charset=x-user-defined');
    req.open('GET', 'https://secure.gravatar.com/avatar/00ac28bdce61e7db41be57fb3b7f3525?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png', true);
    req.addEventListener('load', function() {
      try {
        f(req.responseText);
      } catch(ex) {
        d.benchmark.error = ex;
        d.benchmark.aborted = true;
        d.resolve();
      };
    });
    req.send();
  }

  // calls deferred.resolve on success or sets error
  function testImageURL(d, u) {
   var image = new Image();
   image.onerror = function() {
    d.benchmark.error = new Error('Bad image URL');
    d.benchmark.aborted = true;
    d.resolve();
   };
   image.onload = function() {
    d.resolve();
   };
   image.src = u;
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
btoa + Uint8Array loop
// async test
getArraybuffer(deferred, 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]);
 }
 var url = 'data:image/jpeg;base64,' + btoa(binary);

testImageURL(deferred, url); });
ready
btoa + String loop
// async test
getString(deferred, function(string) {

 var len = string.length;
 var binary = '';
 for (var i = 0; i < len; i+=1) {
  binary += String.fromCharCode(string.charCodeAt(i) & 0xff);
 }
 var url = 'data:image/jpeg;base64,' + btoa(binary);

testImageURL(deferred, url); });
ready
arrayBufferDataUri
// async test
getArraybuffer(deferred, function(buffer) {

 // see Preparation code for addayBufferDataUri definition
 var url = arrayBufferDataUri(buffer);

testImageURL(deferred, url); });
ready
btoa + String loop (batched 4)
// async test
getString(deferred, 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);
 }
 var url = 'data:image/jpeg;base64,' + btoa(binary);

testImageURL(deferred, url); });
ready
btoa + Uint8Array loop (batched 8)
// async test
getArraybuffer(deferred, 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])
 }
 var url = 'data:image/jpeg;base64,' + btoa(binary);

testImageURL(deferred, url); });
ready
btoa + Uint8Array + apply
// async test
getArraybuffer(deferred, function(buffer) {

 var bytes = new Uint8Array(buffer);
 var binary = String.fromCharCode.apply(null, bytes);
 var url = 'data:image/jpeg;base64,' + btoa(binary);

testImageURL(deferred, url); });
ready
btoa + Uint8Array loop (batched 3)
// async test
getArraybuffer(deferred, 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]));
 var url = 'data:image/jpeg;base64,' + base64;

testImageURL(deferred, url); });
ready
btoa + String loop + apply
// async test
getString(deferred, 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);
 var url = 'data:image/jpeg;base64,' + btoa(binary);

testImageURL(deferred, url); });
ready
btoa + Uint8Array
// async test
getArraybuffer(deferred, function(buffer) {

 // if only...
 var bytes = new Uint8Array(buffer);
 var url = 'data:image/jpeg;base64,' + btoa(bytes);

testImageURL(deferred, url); });
ready
btoa + arraybuffer
// async test
getArraybuffer(deferred, function(buffer) {

 // if only...
 var url = 'data:image/jpeg;base64,' + btoa(buffer);

testImageURL(deferred, url); });
ready
btoa + String
getString(deferred, function(string) {

 // if only...
 var url = 'data:image/jpeg;base64,' + btoa(string);

testImageURL(deferred, url); });
ready

Revisions

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