# Encoding XHR image data

## JavaScript performance comparison

Revision 16 of this test case created by P120ph37

## Preparation code

``````<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';
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', 'http://jonathanleighton.com/images/me.jpg', true);
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

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
btoa + Uint8Array loop
``````// async testgetArraybuffer(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); });``````
pending…
btoa + String loop
``````// async testgetString(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); });``````
pending…
arrayBufferDataUri
``````// async testgetArraybuffer(deferred, function(buffer) {

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

testImageURL(deferred, url); });``````
pending…
btoa + String loop (batched 4)
``````// async testgetString(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); });``````
pending…
btoa + Uint8Array
``````// async testgetArraybuffer(deferred, function(buffer) {

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

testImageURL(deferred, url); });``````
pending…
btoa + Uint8Array loop (batched 8)
``````// async testgetArraybuffer(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); });``````
pending…
btoa + Uint8Array + apply
``````// async testgetArraybuffer(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); });``````
pending…
btoa + String loop + apply
``````// async testgetString(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); });``````
pending…
btoa + Uint8Array loop (batched 3)
``````// async testgetArraybuffer(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); });``````
pending…
btoa + arraybuffer
``````// async testgetArraybuffer(deferred, function(buffer) {

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

testImageURL(deferred, url); });``````
pending…
btoa + String
``````getString(deferred, function(string) {

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

testImageURL(deferred, url); });``````
pending…

## Revisions

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