Encoding XHR image data

JavaScript performance comparison

Revision 6 of this test case created by John-David Dalton

Preparation code

<img id="image">
<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 req1 = new XMLHttpRequest;
  req1.overrideMimeType('text/plain; charset=x-user-defined');
  req1.open('GET', 'http://jonathanleighton.com/images/me.jpg', false);
  req1.send(null);
  
  var req2 = new XMLHttpRequest;
  req2.overrideMimeType('text/plain; charset=x-user-defined');
  req2.open('GET', 'http://jonathanleighton.com/images/me.jpg', false);
  req2.responseType = 'arraybuffer';
  req2.send(null);
  
  Benchmark.prototype.setup = function() {
   var req1 = window.req1,
       req2 = window.req2,
       image = document.getElementById('image');
  };
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
charCodeAt
 
var binary = '';
for (var i = 0, text = req1.responseText, l = text.length; i < l; i++) {
 binary += String.fromCharCode(text.charCodeAt(i) & 0xff);
}

image.src = "data:image/jpeg;base64," + window.btoa(binary);
 pending…
ArrayBuffer + window.btoa
 
var binary = '';
var buffer = req2.mozResponseArrayBuffer || req2.response;
var bytes = new Uint8Array(buffer);

for (var i = 0, l = bytes.byteLength; i < l; i++) {
 binary += String.fromCharCode(bytes[i]);
}

image.src = "data:image/jpeg;base64," + window.btoa(binary);
 pending…
ArrayBuffer direct to base64
 
image.src = arrayBufferDataUri(req2.mozResponseArrayBuffer || req2.response);
 pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

1 comment

Chris Cinelli commented : ∞

The if branch "else if (byteRemainder == 2) {" has a bug on variable "a"

This is one quick solution:

else if (byteRemainder == 2) { chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) ; // 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 base64 += encodings[a] + encodings[b] + encodings[c] + '='; }

Add a comment