filereader vs objecturl

Babel + JSX

var url = 'https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG'


fetch(url).then(res => res.blob()).then(blob => {

  // Simulates a file as if you where to upload it throght a file input and listen for on change
  var files = [new File([blob], 'ESC_large_ISS022_ISS022-E-11387-edit_01.JPG')]
  
  var img = new Image
  var t = performance.now()
  var fr = new FileReader
  
  img.onload = () => {
    // show it...
    // $('body').append(img)
	
    var ms = performance.now() - t
	document.body.innerHTML = `it took ${ms.toFixed(0)}ms to load the image with FileReader<br>`
  	
	
    // Now create a Object url instead of using base64 that takes time to
	// 1 encode blob to base64
	// 2 decode it back again from base64 to binary
	var t2 = performance.now()
	var img2 = new Image
	img2.onload = () => {
      // show it...
      // $('body').append(img)
	  var ms2 = performance.now() - t2
	  document.body.innerHTML += `it took ${ms2.toFixed(0)}ms to load the image with URL.createObjectURL<br><br>`
	  document.body.innerHTML += `URL.createObjectURL was ${(ms - ms2).toFixed(0)}ms faster` 
	}
    img2.src = URL.createObjectURL(files[0])
	
  }
  fr.onload = () => (img.src = fr.result)
  fr.readAsDataURL(files[0])
  
})