112

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

Aren't both containers comprised of bits? Hence, couldn't both containers be viewed in many ways (as 32-bit chunks, 16-bit chunks, etc.)?

Mike
  • 14,010
  • 29
  • 101
  • 161
dangerChihuahua007
  • 20,299
  • 35
  • 117
  • 206

3 Answers3

125

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 helpful resources specific to ArrayBuffer and Blob objects. In summary: despite the emphasis on Blob being immutable/"raw data" Blob objects are easy to work with.

Resources that compare / contrast ArrayBuffer vs Blob:

  • Mutability
    • an ArrayBuffer can be changed (e.g. with a DataView)
    • a Blob is immutable
  • Source / Availability in Memory
    • 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
  • Convert / Generate
  • Use in Other Libraries
    • jsZip; (new JSZip()).loadAsync(...) accepts both ArrayBuffer and Blob: String/Array of bytes/ArrayBuffer/Uint8Array/Buffer/Blob/Promise
  • How does protocol handle ArrayBuffer vs Blob
    • Websocket (aka WS / WSS)
      • Use the webSocket's binaryType property (could have values "arraybuffer" or "blob") to "control the type of binary data being received over the WebSocket connection."
    • XmlHttpRequest (aka XHR)
      • Use the xhr's responseType property to "to change the expected response type from the server" (valid values include "arraybuffer", "blob", and others like "document", "json", and "text")

      • the response property will contain the entity body according to responseType, as an ArrayBuffer, Blob, Document, JSON, or string.

Other helpful documentation:

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.

A Blob object represents a file-like object of immutable, raw data. Blob 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.

Nate Anderson
  • 18,334
  • 18
  • 100
  • 135
  • 3
    As I just found out when I got a binary response from a websocket you get a Blob there - and the disadvantage of the Blob seems to be that **you cannot even read it**. It's just a handle. I needed to get a few bytes from that blob. You need to create a `FileReader`, see ["Example for extracting data from a Blob" here](https://developer.mozilla.org/en/docs/Web/API/Blob) - which adds yet another asynchronous function before you can access anything from your Blob. – Mörre Jul 20 '17 at 19:25
  • Thanks, @Mörre , I incorporated your comment. I guess that's consistent with the documentation: `A Blob object represents a file-like object`, but I explicitly added that Blobs may need some kind of "access layer" (before the edit, I implied Blobs didn't need any "access layer") – Nate Anderson Jul 20 '17 at 19:43
  • 1
    `arrayBuffer` can be converted to `Blob` as mentioned in [this answer](https://stackoverflow.com/a/44148694/3405291 "ArrayBuffer to blob conversion ") like this: `new Blob([new Uint8Array(data)]);` I tested it, and it works for PNG images. – Megidd Apr 14 '18 at 12:13
  • 1
    @Mörre You can slice a blob to return a new blob containing just the bytes you want and then read that. If you want real performance then workers support synchronous file reading and you can transfer ownership of (instead of cloning) ArrayBuffers between workers and window processes almost instantly – miknik Aug 18 '18 at 17:59
  • 1
    A Blob can also be converted to ArrayBuffer with the async method blob.arraybuffer() e.g. `const buffer = await blobFile.arrayBuffer()` https://developer.mozilla.org/en-US/docs/Web/API/Blob/arrayBuffer – Darren G May 12 '20 at 00:04
  • 2
    "Blob can become" no, as you said before, it's immutable, so it cannot become anything. You can generate an ArrayBuffer from a Blob, or a Blob from an ArrayBuffer, but in both case, you duplicate the data, nothing becomes something else. – Kaiido Jun 28 '20 at 09:45
  • Thanks @Kaiido, I will change the language to "generate an ArrayBuffer from a Blob" – Nate Anderson Jul 01 '20 at 14:10
  • 1
    @Mörre FWIW when creating the websocket you can specify if you want it to output binary data as Blobs or as ArrayBuffers, [see here](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/binaryType) – egerardus Feb 25 '21 at 18:00
26

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':

Halcyon
  • 57,230
  • 10
  • 89
  • 128
  • 1
    Hmm, but couldn't you view both in different ways as well since they are both containers of bits essentially? – dangerChihuahua007 Aug 05 '12 at 23:55
  • Sure .. but I'm guessing an ArrayBuffer has readily available functions for it? a BLOB can be anything, an ArrayBuffer is well defined structure. – Halcyon Aug 06 '12 at 00:00
  • Ah, ok, so an ArrayBuffer just exposes an interface for doing that. – dangerChihuahua007 Aug 06 '12 at 02:01
  • 17
    Still not clear, to be honest. What do you mean by can "a BLOB can be anything?". Ain't it just a sequence of bytes, just like ArrayBuffer? – shabunc Oct 02 '13 at 09:11
  • 28
    An ArrayBuffer is in the memory, available for manipulation. A Blob can be on disk, in cache memory, and other places not readily available. But the data from a Blob can be copied into an ArrayBuffer. – Bart van Heukelom Oct 17 '14 at 09:19
  • I can't find any information on performance implications of converting between these. If you have a Blob that is known to be in memory, does converting to an ArrayBuffer (using `Response()` or the new `Blob.arrayBuffer()` or other means) copy the data, or return a reference to it? And similarly the other direction: if you have an ArrayBuffer and want a Blob of it, does that copy the data or not? – GaryO Feb 26 '20 at 15:37
  • 1
    @BartvanHeukelom, citation needed. – Pacerier Aug 19 '20 at 22:12
  • 1
    explanation of "Blob": if you want to work directly with a Blob, then ... this is called a recursive explanation – nonopolarity May 02 '21 at 17:03
2

If you are dealing with something that is more similar to an immutable file that may be retrieved, stored, or served as a file over HTTP, a Blob has a useful feature: blob.type (Web API docs, Nodejs docs). This returns a MIME type (such as image/png) that you can you use for your Content-Type HTTP header when serving the blob.

cprcrack
  • 17,118
  • 7
  • 88
  • 91