由於高度封裝與抽象，JavaScript 的執行效率比不上 C 的語言。例如 JavaScript 的 Array 下標（subscript）是根據 hash key 而非實體記憶體位址 offset 取值，雖然方便，卻多了效能開銷。當 Canvas、WebGL、WebVR 開始走紅，效能越來越受重視，如何讓 JavaScript 達到如同 C 指標般操作 binary data 變得至關重要。

存在許久但最近才變為 ES6 標準「 Typed Array 」就是解放 JavaScript 操作 binary data 能力的好工具！一起來了解 Typed Array 吧！

（基於 ECMAScript 6+，Node.js 8.3）

Buffer v.s View

ES6 引入的 Typed Array 家族 ，可以分為兩大類： Buffer 與 View 。

所謂 Buffer 是一個指向儲存資料的記憶體區塊之物件，類似於 malloc 配置出來的空間，無法直接存取或修改 buffer 內部的資料，在 JavaScript 中 Buffer 的實作就是 ArrayBuffer 。

如果我們想存取某些 buffer 底下的內容，我們需要 View （視圖），透過宣告不同資料型別的 view，電腦就會了解如何操作這段 data chunk，該當作 float32 讀取呢？抑或以 unsigned integer 來操作。

ES6 規範了三個 Typed Array 相關物件，對應類別如下：

ArrayBuffer

ArrayBuffer 代表一段固定大小的記憶體區塊，也稱為 byte-array。主要的功能就是配置實體記憶體來儲存 raw binary data。一般很少直接操作 ArrayBuffer，實際上也只能將其 reference 傳給其他物件，讓其他物件來處理／使用資料。

建立一個 ArrayBuffer 有非常多種方法，可以直接配置，

1
2
3
4
5
6

// 直接配置 8 bytes，初始值為 0 的記憶體區塊
const buffer = new ArrayBuffer(8)

// 利用 `slice` 將某些 bytes 複製到另一個 ArrayBuffer
// 這裡複製 `buffer` 倒數四個 bytes 到 bufferCopied 中
const bufferCopied = buffer.slice(-4)

或是最常使用的，HTTP response 選擇接收 buffer，

1
2
3
4
5
6
7
8
9
10
11
12
13

// XMLHttpRequest 指定 resopnseType (XMLHttpRequest v2)
const xhr = new XMLHttpRequest()
xhr.open('GET', '/path/to/黑人問號.jpg', true)
xhr.responseType = 'arraybuffer' // 將 reponse 型別設定為 arraybuffer
xhr.onload = function(e) {
  console.log(this.response) // this.response 為 ArrayBuffer
}
xhr.send()

// Fetch API 也提供 Body#arrayBuffer 的方法轉換 Request／Response stream body
const response = await fetch('/path/to/柯P火影.gif')
const buffer = await response.arrayBuffer() // 取得 ArrayBuffer 實例
console.log(buffer.byteLength) // 查看當前這個 ArrayBuffer 有多少 bytes。

當然，也可以透過 File 與 FileReader API，讀取使用者上傳的資料。

1
2
3
4
5
6
7
8
9
10
11
12

const input = document.querySelector('input')
input.addEventListener('change', handleFiles, false);

function handleFiles (files) { // files -> FileList 物件，裡面有 File 實例
  if (files[0]) {
    const reader = new FileReader()
    reader.onload = function ({ target: { result } }) {
      console.log(result.byteLength) // result 是一個 ArrayBuffer
    }
    reader.readAsArrayBuffer = files[0] // File 是特殊的 Blob 型別
  }
}

TypedArray

TypedArray 並非任何一個型別，也非全域可取得的建構函數，而是一個抽象概念，對應到許多不同型別的 Array 罷了。老實說，TypedArray 這個的命名已說明一切，讓我來說文解字，先從 Typed 講起。

Types of TypedArray

所謂的 Typed，意指「 限定型別 」，Array 中的元素都是同一種型別。有哪些型別呢？TypedArray 是為了操作 binary 而生，當然只有最底層以 bytes 為基礎，幾乎沒有什麼抽象概念的型別。我們可根據需求，決定每個元素該從 raw data 讀取多少與如何讀取 bytes。

Array-like Methods

而 TypedArray 中的 Array，其實就是我們熟悉的 JavaScript Array，可視為「 在 ArrayBuffer 的資料之上，架一層可存取資料的 Array API 」。你想得到的 method map 、 filter 、 reduce 幾乎應有盡有，而 push 、 shift 、 unshift 、 splice 這類會改變 Array 長度的 Mutator methods 沒有實作，畢竟 TypedArray 就只是 buffer 的 reference， pop 後原始資料依然存在。

Consturct a TypedArray

建構 TypedArray 非常簡單，選擇好 data type 之後， new 一個就完成了！

1

const u16 = new Uint16Array(4)

1

const u8 = new Uint8Array(u16) // length of u8 is 4

這樣會建立一個新的型別 array，但記憶體區塊不變。我們的例子中，u8 因為溢位的緣故（overflow），自動過濾偶數 bytes（或奇數，視 endianness 而定），僅顯示餘下 4 個 bytes 的資料，記憶體位址變得不連續。

從 ArrayBuffer 建立

不過，也可以透過 TypedArray#buffer 取得並共享當前的 buffer，該 array 的記憶體區間就會是連續的。

1
2

// 因為 buffer 總共有 4 * 2 = 8 bytes，所以 u8_continuous 長度為 8
const u8_continuous = new Uint8Array(u16.buffer)

當然，ArrayBuffer 可直接配置一塊記憶體區塊，並使用它建構 TypedArray，甚至透過 length 和 byteOffset 指定該 buffer 不同的區間來建構。

1
2
3
4
5

const buffer = new ArrayBuffer(16)
const i32 = new Int32Array(buffer) // 32 * 2 bytes

// 從 4 bytes offset 的位址開始，切一個長度為 7 bytes 的 array。
const i8 = new Iint8Array(buffer, 4, 7)

Overflow

如同 C 語言，不同類型的 TypedArray 可以容納的 bytes 範圍是固定的，超過此一範圍，就會出現 「溢位（Overflow）」 ，例如 Uint8Array 中僅能放入 1 byte = 8 bits 的資料，如果放入 0x100 （256，9 bits），就會溢位。

那溢位後，資料會怎麼呈現呢？

每個語言實作不盡相同，TypedArray 的溢位處理規則和多數語言相同： 捨棄溢出的 high bits。 我們來看簡單的例子。

1
2

Uint8Array.of(0xff, 0x100)
// Unit8Array [255, 0]

第一個例子中，我們選用 Uint8Array，一個元素最多儲存 8 bits 的資料，第二個元素是 256，需要第 9 bit 來儲存，因此溢位。

1
2
3
4
5
6
7
8
9

// 255，至少需要 8 bits 儲存
0b11111111

// 256，至少需要 9 bits 儲存
0b100000000
//└── 這個 1 溢位，將被捨棄，僅保留最低有效的 8 bits，計算結果為 `0`
// 捨棄的方式同於 bitwise or `& 0xFF`
0x100 & 0xFF
// 0

Note：underflow 的處理方式與 overflow 相同。

What is Uint8ClampedArray

Clamp 的本意是鉗子，在計算機科學中，通常意味將資料值限制在特定範圍間。而 Uint8ClampedArray 中，就是將元素值限制在 0 - 255。換句話說，就是處理溢位的規則與 Uint8Array 不同。 當 overflow 時，該值會等於最大值 255；當 underflow 時，該值會等於 0 。

1
2
3
4

Uint8Array.of(0xff, 0x100, -100)
// Unit8Array [255, 0, 156]
Uint8ClampedArray.of(0xff, 0x100, -100)
// Uint8ClampedArray [255, 255, 0]

1
2

// 必須自行限制大小，防止 ooverflow／underflow。
u8[i] = Math.max(0, Math.min(255, u8[i] * gamma)) // u8 是一個 Uint8Array

1

pixels[i] *= gamma // pixels 是一個 Uint8ClampedArray

Composite Data Structure

當需處理類似 C struct 的複合資料結構，如下所示

1
2
3
4
5

struct employee {
  unsigned int id;               // 4 * 1 bytes
  unsigned char department[4];   // 1 * 4 bytes
  float salary;         // 4 * 1 bytes
};

1
2
3
4
5
6
7

const buffer = new ArrayBuffer(12)
const idView = new Uint32Array(buffer, 0, 1)
const deptView = new Uint8Array(buffer, 4, 4)
const salaryView = new Float32Array(buffer, 8)
idView[0] = 123
deptView.forEach((_, i) => { deptView[i] = i * i })
salaryView[0] = 10000

DataView

顧名思義， DataView 是一種建構在 buffer 之上的 view。與一般 TypedArray 不同的是，建構 DataView 時並不會固定的資料型別，取而代之的是存取 data 時，必須明確的指定從哪個 byte offset 取哪一種 data type 出來。

1
2
3
4
5
6
7
8

const dv = new DataView(buffer)
// 從 byte offset 0 的位址開始取 Uint32 的資料
// 取得 ID -> 123
dv.getUint32(0, true)

// 從 byte offset 8 的位址開始寫入 Float32 的資料
dv.setFloat32(8, 200000, true)
dv.getFloat32(8, true) // 加薪囉！！

DataView 另一個重要特性就是不會 buffer overflow ，所謂的 buffer overflow 是「 當寫入一筆資料到指定 buffer 中，若寫入的資料大小超過該 buffer 的 boundary，溢出值就會覆寫下個 byte 」。這種不安全的性質，也讓 buffer overflow 成為許多駭客的攻擊手法，有潛在的安全性問題。而透過 DataView setter 賦予一個超過型別最大值的數字，並不會覆蓋臨近記憶體位址的資料，而是內部先檢查邊界，處理 overflow 之後，再寫入該記憶體區間，彌補了 buffer overflow 的漏洞。

Precautions

Typed Arrays 幾乎可以做到如同 C 語言般細膩的記憶體操作。不過越是自由的 API，就代表要學習更多知識，注意更多細節，以下是操作 TypedArray 該銘記在心的事情：

Endianness (Byte order)

在計算機科學領域下，Data 是一個物理概念，指儲存在電腦記憶體上的一個 bits／bytes 序列。Data 本身並沒有任何意義，想使用它，必須自行解讀出抽象的意義，例如將 Data 讀取為字串或數字。

1
2
3
4

--- 資料讀取順序 -->
| Offset | 0    | 1    | 2    | 3    |
| ------ | ---- | ---- | ---- | ---- |
| Data   | 0x11 | 0x22 | 0x33 | 0x44 |

如果資料是自己家內部系統使用，其實溝通好就 OK，用 Mixed-endian 也不會有人管你。但如果是外界得來的任意資料，我們可以透過「 BOM（byte order mark） 」來判斷資料屬於哪種 endianness。BOM 是一個 Unicode magic number，通常放置在 text stream 的最前端。不過，並不是每個資料都會加上這個 header，而且有時候我們不需要 BOM 資訊，使用資料前還必須先 strip bom ，說實話挺麻煩的。

Data Structure Alignment

要接觸底層的記憶體，免不了瞭解 CPU 如何從記憶體中讀取資料，記憶體底層到底如何配置。

1
2
3
4
5

struct AlignDemo {
  char c;     // 1 byte
  int i;      // 4 bytes
  short s;      // 2 bytes
};

1
2
3
4
5
6

c = char 所佔的 byte
s = short 所佔的 byte
i = int 所佔的 byte

| 0x000           | 0x020           |
| [c] [i] [i] [i] | [i] [s] [s] [ ] |

1
2
3
4
5
6
7
8

struct AlignDemo {
  char c;
  char padding_0[3]; // 填充用成員
  int i;
  short s;
  char padding_1[2];
};

1
2
3
4

p = padding 所佔的 byte

| 0x000           | 0x020           | 0x040           |
| [c] [p] [p] [p] | [i] [i] [i] [i] | [s] [s] [p] [p] |

1
2
3
4
5
6

struct AlignDemo {
  int i;
  char c;
  short s;
  char padding[0]
};

1
2

| 0x000           | 0x020           |
| [i] [i] [i] [i] | [c] [s] [s] [p] |

回到 JavaScript，當你在創建不同的 view 時，JavaScript engine 其實會進行簡單的 natural alignment 檢查。

1
2
3
4
5

const buffer = new ArrayBuffer(6)
new Uint16Array(buffer, 1)
// RangeError: start offset of Uint16Array should be a multiple of 2
new Uint32Array(buffer, 0)
// RangeError: byte length of Uint32Array should be a multiple of 4

所以囉，當我們在設計複合資料時，想想對應的 C struct alignment，多考量記憶體底層，才不會讓操作 binary data 產生效能低落的反效果。

Others

最後，讓我們來認識除了 Typed Array 家族以外，JavaScript 的生態圈其他與記憶體息息相關的成員吧！

Node.js Buffer

早在 ES6 引入 TypedArray 之前，Node.js 為了處理 binary data，就實作 Buffer class ，也針對 V8 引擎做最佳化。Buffer 在 Node.js 的環境中是 Global object，其功能可視為 ArrayBuffer + TypedArray + DataView 的複合體，甚至可以配置 non-zero-filled 的 unsafe buffer，好危險啊。

在使用上，Buffer 可從 ArrayBuffer 建構，也可從自身建構 TypedArray。事實上，Node.js v3+ 之後，Buffer 就繼承自 Uint8Array 了，不過有些 memory share／copy 的實作與 spec 有出入，在與 TypedArray
ArrayBuffer 轉換時， 需注意這些小細節 。

Web API Blob

Blob 是一個不可變（immutable）的 raw binary sequence，只有兩個 attribute 和一個 method。

Blob 的 spec 寫在 W3C File API draft 中，為 File class 的父類別。主要目的是提供可代表與儲存 JavaScript native 以外的格式，例如以 blob 儲存 死肥宅.jpg 。Blob 除了可以從 object 建構，也可傳入 TypedArray 或 DOMString 建構。此外，File API，Fetch API、XMLHttpRequest v2 也都可以將 Request／Response 的 body 轉換成 Blob，非常泛用途呢！

而 Blob 最強大的地方就是配合 URL.createObjectURL 生成一個 Blob URL。如同你我認知中的 URL，任何運用 URL 之處，都可以傳入 Blob URL，比起 Image 、 ImageData 、 MediaSource ，URL 接受與使用度肯定更為廣闊，這讓資料處理，物件傳遞的耦合性變得更低。

當我們建立 Blob URL 後，若可預期的未來內不需要用到該 URL，就使用 URL.revokeObjectURL 取消註冊，否則該 URL 指向的 Blob 會持續留存，佔用你的儲存空間，直到瀏覽器執行 unload document cleanup 的步驟（如關閉分頁），才會將所有 Blob URL 清除。所以說，如需管理 Blob URL，還是老老實實把這些 URL 記錄起來吧！

Wrap-up

藉由這些直接操作 binary data 的 API，現代的 JavaScript 環境的效能提升到另一個層次，若再配合 Web worker Service worker 等多線程技術，加上線程共享的 ShareArrayBuffer 與 Atomic API，高效能的 web app 指日可待。如果再加上逐漸普及， 即將成為 Webpack 一等公民 的 WebAssembly ，JavaScript／Web 的世界更是不可限量啊！或許，使用 Rust 寫網頁的世代即將來臨 XD。

前端工程師們，活到老，學到掛吧！

Reference

• MDN: ArrayBuffer
• MDN: TypedArray
• W3C: File API - Blob
• Wiki: Data structure alignment
• Wiki: Endianness
• Wiki: Integer overflow
• HTML5 Rocks: Typed Arrays
• Node.js: Buffer
• OPass：關於記憶體對齊(Alignment)
• 阮一峰：ECMAScript 6 入门

關於作者：
@weihanglo 掛著 iOS 工程師之名，行開發 Web App 之實。

喜歡我們的文章嗎？歡迎分享按讚給予我們支持和鼓勵！

TechBridge 技術日報

TechBridge Weekly 技術週刊編輯團隊

TechBridge Weekly 技術週刊團隊是一群對用技術改變世界懷抱熱情的團隊。本技術共筆部落格初期專注於Web前後端、行動網路、機器人/物聯網、資料科學與產品設計等技術分享。This is TechBridge Weekly Team Tech Blog, which focus on web, mobile, robotics, IoT, Data Science technology sharing.

關於我們 / 技術日報 / 技術週刊 / 粉絲專頁 / 訂閱RSS

Share this post

Twitter Facebook Google+