What is the difference between an ArrayBuffer and a Blob?

Question

I\'m reading http://www.html5rocks.com/en/tutorials/file/xhr2/ and trying to figure out the difference between an ArrayBuffer and a Blob.

Ar

Answer 1

Summary

Unless you need the ability to write/edit (using an ArrayBuffer), then Blob format is probably best.

Detail

I came to this question from a different html5rocks page., and I found @Bart van Heukelom's comments to be helpful, so I wanted to elevate them to an answer here.

I also found it helpful to find resources specific to ArrayBuffer and Blob objects. I added the emphasis to reiterate the helpful detail I was looking for. In summary: despite the emphasis on Blob being "raw data" it's very workable.

Some other points on ArrayBuffer vs Blob:

• Mutability
  • an ArrayBuffer can be changed (e.g. with a DataView)
  • a Blob is immutable
• Source / Availability in Memory
  • Quoting Bart van Heukelom:

  • An ArrayBuffer is in the memory, available for manipulation.
  • A Blob can be on disk, in cache memory, and other places not readily available

• Access Layer
  • ArrayBuffer will require some access layer like typed arrays
  • Blob can be passed directly into other functions like window.URL.createObjectURL, as seen in the example from OP's URL.
  • However, as Mörre points out you may still need File-related APIs like FileReader to work with a Blob.
• Convert
  • Can convert Blob to ArrayBuffer and vice versa, which addresses the OP's "Aren't both containers comprised of bits?"
  • ArrayBuffer can be generated from a Blob using the FileReader's readAsArrayBuffer method , or the async method const arrayBuffer = await blob.arrayBuffer() (thanks to @Darren G)
  • Blob can be generated from an ArrayBuffer as @user3405291 points out new Blob([new Uint8Array(data)]);, shown in this answer
• Use in Other Libraries
  • jsZip; (new JSZip()).loadAsync(...) accepts both ArrayBuffer and Blob: String/Array of bytes/ArrayBuffer/Uint8Array/Buffer/Blob/Promise

Here are the documentation details that helped me:

Here is ArrayBuffer

The ArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer. You cannot directly manipulate the contents of an ArrayBuffer; instead, you create one of the typed array objects or a DataView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.

Here is Blob

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

Answer 2

It's explained on the page.

ArrayBuffer

An ArrayBuffer is a generic fixed-length container for binary data. They are super handy if you need a generalized buffer of raw data, but the real power behind these guys is that you can create "views" of the underlying data using JavaScript typed arrays. In fact, multiple views can be created from a single ArrayBuffer source. For example, you could create an 8-bit integer array that shares the same ArrayBuffer as an existing 32-bit integer array from the same data. The underlying data remains the same, we just create different representations of it.

BLOB

If you want to work directly with a Blob and/or don't need to manipulate any of the file's bytes, use xhr.responseType='blob':