Encoding XHR image data (v12)

Revision 12 of this benchmark created on

Preparation HTML

<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 req = new XMLHttpRequest()
  req.overrideMimeType('text/plain; charset=x-user-defined')
  req.open('GET', 'http://jonathanleighton.com/images/me.jpg', false)
  req.send(null)
  
  image = document.getElementById('image')
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
ArrayBuffer + window.btoa
var req = new XMLHttpRequest()
req.overrideMimeType('text/plain; charset=x-user-defined')
req.open('GET', 'http://jonathanleighton.com/images/me.jpg', false)
req.responseType = 'arraybuffer'
req.send(null)

var binary = ''
var buffer = req.mozResponseArrayBuffer || req.response
var bytes = new Uint8Array(buffer)
var bytesLen = bytes.byteLength;

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

image.src = "data:image/jpeg;base64," + window.btoa(binary)
ready
charCodeAt
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)

var responseText = req.responseText;
var responseTextLen = responseText.length;

var binary = ''
for (var i = 0; i < responseTextLen; i+=1) {
 binary += String.fromCharCode(responseText.charCodeAt(i) & 0xff)
}

image.src = "data:image/jpeg;base64," + window.btoa(binary)
ready
ArrayBuffer direct to base64
var req = new XMLHttpRequest()
req.overrideMimeType('text/plain; charset=x-user-defined')
req.open('GET', 'http://jonathanleighton.com/images/me.jpg', false)
req.responseType = 'arraybuffer'
req.send(null)

image.src = arrayBufferDataUri(req.mozResponseArrayBuffer || req.response)
ready
charCodeAt (batched 4)
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)

var responseText = req.responseText;
var responseTextLen = responseText.length;

var binary = ''
for (var i = 0; i < responseTextLen; i+=4) {
 binary += String.fromCharCode(responseText.charCodeAt(i+0) & 0xff, responseText.charCodeAt(i+1) & 0xff, responseText.charCodeAt(i+2) & 0xff, responseText.charCodeAt(i+3) & 0xff)
}
for (i-=4; i < responseTextLen; i+=1) {
 binary += String.fromCharCode(responseText.charCodeAt(i) & 0xff)
}

image.src = "data:image/jpeg;base64," + window.btoa(binary)
 
ready
ArrayBuffer (batched 8) + window.btoa
var req = new XMLHttpRequest()
req.overrideMimeType('text/plain; charset=x-user-defined')
req.open('GET', 'http://jonathanleighton.com/images/me.jpg', false)
req.responseType = 'arraybuffer'
req.send(null)

var binary = ''
var buffer = req.mozResponseArrayBuffer || req.response
var bytes = new Uint8Array(buffer)
var bytesLen = bytes.byteLength;

for (var i = 0; i < bytesLen; 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 -= 4; i < bytesLen; i++) {
 binary += String.fromCharCode(bytes[i])
}

image.src = "data:image/jpeg;base64," + window.btoa(binary)
ready

Revisions

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