FileReader vs. window.URL.createObjectURL

by

There is difference.

  1. time
  • createObjectURL is synchronously executed (immediately)
  • FileReader.readAsDataURL is asynchronously executed (after some time)
  1. memory usage
  • createObjectURL returns url with hash, and store object in memory until document triggers unload event (e.g. document close) or execute revokeObjectURL
  • FileReader.readAsDataURL returns base64 that contains many characters, and use more memory than blob url, but removes from memory when you don’t use it (by garbage collector)
  1. support
  • createObjectURL from IE 10 and all modern browsers
  • FileReader.readAsDataURL from IE 10 and all modern browsers

For me, is better to use blob url’s (via createObjectURL), it is more efficient and faster, but if you use many object urls, you need to
release these urls by revokeObjectURL (to free memory).

For example, you can call URL.revokeObjectURL inside an Image onload handler and the Image object will keep the image data, without losing it, Nahuel Greco (c).

Leave a Comment

tech