You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 4-binary/03-blob/article.md
+13-10Lines changed: 13 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,14 +2,12 @@
2
2
3
3
`ArrayBuffer` and views are a part of ECMA standard, a part of JavaScript.
4
4
5
-
In the browser, there are additional higher-level objects, described in [File API](https://www.w3.org/TR/FileAPI/).
5
+
In the browser, there are additional higher-level objects, described in [File API](https://www.w3.org/TR/FileAPI/), in particular `Blob`.
6
6
7
7
`Blob` consists of an optional string `type` (a MIME-type usually), plus `blobParts` -- a sequence of other `Blob` objects, strings and `BufferSources`.
8
8
9
9

10
10
11
-
Thanks to `type`, we can download/upload blobs, and it naturally becomes `Content-Type` in network requests.
12
-
13
11
The constructor syntax is:
14
12
15
13
```js
@@ -59,7 +57,10 @@ This behavior is similar to JavaScript strings: we can't change a character in a
59
57
60
58
A Blob can be easily used as an URL for `<a>`, `<img>` or other tags, to show its contents.
61
59
62
-
Let's start with a simple example. By clicking on a link you download a dynamically-generated blob with `hello world` contents as a file:
60
+
Thanks to `type`, we can allso download/upload blobs, and it naturally becomes `Content-Type` in network requests.
61
+
62
+
Let's start with a simple example. By\
63
+
clicking on a link you download a dynamically-generated blob with `hello world` contents as a file:
63
64
64
65
```html run
65
66
<!-- download attribute forces the browser to download instead of navigating -->
The browser for each url generated by `URL.createObjectURL` stores an the url -> blob mapping internally. So such urls are short, but allow to access the blob.
101
102
102
-
A generated url is only valid while the current document is open. And it allows to reference the blob in `<img>`, `<a>`, any other object that expects an url.
103
+
A generated url (and hence the link with it) is only valid within the current document, while it's open. And it allows to reference the blob in `<img>`, `<a>`, basically any other object that expects an url.
103
104
104
105
There's a side-effect though. While there's an mapping for a blob, the blob itself resides in the memory. The browser can't free it.
105
106
106
-
The mapping is automatically cleared on document unload, so blobs are freed then. But if an app is long-living, then that doesn't happen soon. So if we create an URL, that blob will hang in memory, even if not needed any more.
107
+
The mapping is automatically cleared on document unload, so blobs are freed then. But if an app is long-living, then that doesn't happen soon.
108
+
109
+
**So if we create an URL, that blob will hang in memory, even if not needed any more.**
107
110
108
-
**`URL.revokeObjectURL(url)` removes the reference from the internal mapping, thus allowing the blob to be deleted (if there are no other references), and the memory to be freed.**
111
+
`URL.revokeObjectURL(url)` removes the reference from the internal mapping, thus allowing the blob to be deleted (if there are no other references), and the memory to be freed.
109
112
110
113
In the last example, we intend the blob to be used only once, for instant downloading, so we call `URL.revokeObjectURL(link.href)` immediately.
0 commit comments