07-3 (付費) 效能巔峰：TypedArrays 與記憶體分佈

1. ArrayBuffer：一塊原始記憶體

ArrayBuffer 代表一段固定長度的原始二進位數據緩衝區。 你不能直接操作它，必須透過「視圖 (View)」。

const buffer = new ArrayBuffer(16); // 建立一個 16 bytes 的空間

2. Typed Arrays (定型陣列)

根據你需要的資料型態，選擇不同的視圖：

• Int8Array: 8 位元整數
• Uint32Array: 32 位元無符號整數 (0 ~ 4,294,967,295)
• Float64Array: 64 位元浮點數 (高精準度)

const view = new Uint32Array(buffer);
view[0] = 42;

3. 實戰場景：讀取二進位檔案

當你使用 fetch 抓取一張圖片並想直接修改它的像素數據時：

async function processImage(url) {
  const response = await fetch(url);
  const buffer = await response.arrayBuffer();
  const pixelData = new Uint8ClampedArray(buffer);
  
  // 這裡可以對 pixelData 進行直接操作，效能極高
}

4. SharedArrayBuffer 與並行處理

在 2026 年，多核心運算非常重要。 SharedArrayBuffer 讓多個 Web Worker 可以同時存取同一塊記憶體而無需複製資料。 （注意：為了安全考量，必須正確設定 HTTP Header 才能開啟此功能）。