Skip to content

Commit b7d7007

Browse files
committed
minor
1 parent 40074e0 commit b7d7007

File tree

1 file changed

+13
-10
lines changed

1 file changed

+13
-10
lines changed

4-binary/03-blob/article.md

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,12 @@
22

33
`ArrayBuffer` and views are a part of ECMA standard, a part of JavaScript.
44

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`.
66

77
`Blob` consists of an optional string `type` (a MIME-type usually), plus `blobParts` -- a sequence of other `Blob` objects, strings and `BufferSources`.
88

99
![](blob.png)
1010

11-
Thanks to `type`, we can download/upload blobs, and it naturally becomes `Content-Type` in network requests.
12-
1311
The constructor syntax is:
1412

1513
```js
@@ -59,7 +57,10 @@ This behavior is similar to JavaScript strings: we can't change a character in a
5957

6058
A Blob can be easily used as an URL for `<a>`, `<img>` or other tags, to show its contents.
6159

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

6465
```html run
6566
<!-- download attribute forces the browser to download instead of navigating -->
@@ -74,7 +75,7 @@ link.href = URL.createObjectURL(blob);
7475

7576
We can also create a link dynamically in JavaScript and simulate a click by `link.click()`, then download starts automatically.
7677

77-
Here's the similar "on the fly" blob creation and download code, but without HTML:
78+
Here's the similar code that causes user to download the dynamicallly created Blob, without any HTML:
7879

7980
```js run
8081
let link = document.createElement('a');
@@ -89,23 +90,25 @@ link.click();
8990
URL.revokeObjectURL(link.href);
9091
```
9192

92-
**`URL.createObjectURL` takes a blob and creates an unique URL for it, in the form `blob:<origin>/<uuid>`.**
93+
`URL.createObjectURL` takes a blob and creates an unique URL for it, in the form `blob:<origin>/<uuid>`.
9394

94-
That's what the generated url looks like:
95+
That's what the value of `link.href` looks like:
9596

9697
```
9798
blob:https://javascript.info/1e67e00e-860d-40a5-89ae-6ab0cbee6273
9899
```
99100

100101
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.
101102

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.
103104

104105
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.
105106

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.**
107110

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.
109112

110113
In the last example, we intend the blob to be used only once, for instant downloading, so we call `URL.revokeObjectURL(link.href)` immediately.
111114

0 commit comments

Comments
 (0)