ArrayBuffer
對象、 TypedArray
視圖和 DataView
視圖是 JavaScript 操作二進(jìn)制數(shù)據(jù)的一個(gè)接口。這些對象早就存在,屬于獨(dú)立的規(guī)格(2011 年 2 月發(fā)布),ES6 將它們納入了 ECMAScript 規(guī)格,并且增加了新的方法。它們都是以數(shù)組的語法處理二進(jìn)制數(shù)據(jù),所以統(tǒng)稱為二進(jìn)制數(shù)組。
這個(gè)接口的原始設(shè)計(jì)目的,與 WebGL 項(xiàng)目有關(guān)。所謂 WebGL,就是指瀏覽器與顯卡之間的通信接口,為了滿足 JavaScript 與顯卡之間大量的、實(shí)時(shí)的數(shù)據(jù)交換,它們之間的數(shù)據(jù)通信必須是二進(jìn)制的,而不能是傳統(tǒng)的文本格式。文本格式傳遞一個(gè) 32 位整數(shù),兩端的 JavaScript 腳本與顯卡都要進(jìn)行格式轉(zhuǎn)化,將非常耗時(shí)。這時(shí)要是存在一種機(jī)制,可以像 C 語言那樣,直接操作字節(jié),將 4 個(gè)字節(jié)的 32 位整數(shù),以二進(jìn)制形式原封不動地送入顯卡,腳本的性能就會大幅提升。
二進(jìn)制數(shù)組就是在這種背景下誕生的。它很像 C 語言的數(shù)組,允許開發(fā)者以數(shù)組下標(biāo)的形式,直接操作內(nèi)存,大大增強(qiáng)了 JavaScript 處理二進(jìn)制數(shù)據(jù)的能力,使得開發(fā)者有可能通過 JavaScript 與操作系統(tǒng)的原生接口進(jìn)行二進(jìn)制通信。
二進(jìn)制數(shù)組由三類對象組成。
(1) ArrayBuffer 對象:代表內(nèi)存之中的一段二進(jìn)制數(shù)據(jù),可以通過“視圖”進(jìn)行操作?!耙晥D”部署了數(shù)組接口,這意味著,可以用數(shù)組的方法操作內(nèi)存。
(2) TypedArray 視圖:共包括 9 種類型的視圖,比如 Uint8Array (無符號 8 位整數(shù))數(shù)組視圖, Int16Array (16 位整數(shù))數(shù)組視圖, Float32Array (32 位浮點(diǎn)數(shù))數(shù)組視圖等等。
(3) DataView 視圖:可以自定義復(fù)合格式的視圖,比如第一個(gè)字節(jié)是 Uint8(無符號 8 位整數(shù))、第二、三個(gè)字節(jié)是 Int16(16 位整數(shù))、第四個(gè)字節(jié)開始是 Float32(32 位浮點(diǎn)數(shù))等等,此外還可以自定義字節(jié)序。
簡單說, ArrayBuffer 對象代表原始的二進(jìn)制數(shù)據(jù), TypedArray 視圖用來讀寫簡單類型的二進(jìn)制數(shù)據(jù), DataView 視圖用來讀寫復(fù)雜類型的二進(jìn)制數(shù)據(jù)。
TypedArray 視圖支持的數(shù)據(jù)類型一共有 9 種( DataView 視圖支持除 Uint8C 以外的其他 8 種)。
數(shù)據(jù)類型 | 字節(jié)長度 | 含義 | 對應(yīng)的 C 語言類型 |
---|---|---|---|
Int8 | 1 | 8 位帶符號整數(shù) | signed char |
Uint8 | 1 | 8 位不帶符號整數(shù) | unsigned char |
Uint8C | 1 | 8 位不帶符號整數(shù)(自動過濾溢出) | unsigned char |
Int16 | 2 | 16 位帶符號整數(shù) | short |
Uint16 | 2 | 16 位不帶符號整數(shù) | unsigned short |
Int32 | 4 | 32 位帶符號整數(shù) | int |
Uint32 | 4 | 32 位不帶符號的整數(shù) | unsigned int |
Float32 | 4 | 32 位浮點(diǎn)數(shù) | float |
Float64 | 8 | 64 位浮點(diǎn)數(shù) | double |
注意,二進(jìn)制數(shù)組并不是真正的數(shù)組,而是類似數(shù)組的對象。
很多瀏覽器操作的 API,用到了二進(jìn)制數(shù)組操作二進(jìn)制數(shù)據(jù),下面是其中的幾個(gè)。
ArrayBuffer
對象代表儲存二進(jìn)制數(shù)據(jù)的一段內(nèi)存,它不能直接讀寫,只能通過視圖( TypedArray
視圖和DataView
視圖)來讀寫,視圖的作用是以指定格式解讀二進(jìn)制數(shù)據(jù)。
ArrayBuffer
也是一個(gè)構(gòu)造函數(shù),可以分配一段可以存放數(shù)據(jù)的連續(xù)內(nèi)存區(qū)域。
const buf = new ArrayBuffer(32);
上面代碼生成了一段 32 字節(jié)的內(nèi)存區(qū)域,每個(gè)字節(jié)的值默認(rèn)都是 0??梢钥吹?,ArrayBuffer
構(gòu)造函數(shù)的參數(shù)是所需要的內(nèi)存大小(單位字節(jié))。
為了讀寫這段內(nèi)容,需要為它指定視圖。 DataView
視圖的創(chuàng)建,需要提供ArrayBuffer
對象實(shí)例作為參數(shù)。
const buf = new ArrayBuffer(32);
const dataView = new DataView(buf);
dataView.getUint8(0) // 0
上面代碼對一段 32 字節(jié)的內(nèi)存,建立 DataView 視圖,然后以不帶符號的 8 位整數(shù)格式,從頭讀取 8 位二進(jìn)制數(shù)據(jù),結(jié)果得到 0,因?yàn)樵純?nèi)存的 ArrayBuffer 對象,默認(rèn)所有位都是 0。
另一種 TypedArray 視圖,與 DataView 視圖的一個(gè)區(qū)別是,它不是一個(gè)構(gòu)造函數(shù),而是一組構(gòu)造函數(shù),代表不同的數(shù)據(jù)格式。
const buffer = new ArrayBuffer(12);
const x1 = new Int32Array(buffer);
x1[0] = 1;
const x2 = new Uint8Array(buffer);
x2[0] = 2;
x1[0] // 2
上面代碼對同一段內(nèi)存,分別建立兩種視圖:32 位帶符號整數(shù)( Int32Array 構(gòu)造函數(shù))和 8 位不帶符號整數(shù)( Uint8Array 構(gòu)造函數(shù))。由于兩個(gè)視圖對應(yīng)的是同一段內(nèi)存,一個(gè)視圖修改底層內(nèi)存,會影響到另一個(gè)視圖。
TypedArray 視圖的構(gòu)造函數(shù),除了接受 ArrayBuffer 實(shí)例作為參數(shù),還可以接受普通數(shù)組作為參數(shù),直接分配內(nèi)存生成底層的 ArrayBuffer 實(shí)例,并同時(shí)完成對這段內(nèi)存的賦值。
const typedArray = new Uint8Array([0,1,2]);
typedArray.length // 3
typedArray[0] = 5;
typedArray // [5, 1, 2]
上面代碼使用 TypedArray 視圖的 Uint8Array 構(gòu)造函數(shù),新建一個(gè)不帶符號的 8 位整數(shù)視圖。可以看到, Uint8Array 直接使用普通數(shù)組作為參數(shù),對底層內(nèi)存的賦值同時(shí)完成。
ArrayBuffer
實(shí)例的byteLength
屬性,返回所分配的內(nèi)存區(qū)域的字節(jié)長度。
const buffer = new ArrayBuffer(32);
buffer.byteLength
// 32
如果要分配的內(nèi)存區(qū)域很大,有可能分配失?。ㄒ?yàn)闆]有那么多的連續(xù)空余內(nèi)存),所以有必要檢查是否分配成功。
if (buffer.byteLength === n) {
// 成功
} else {
// 失敗
}
ArrayBuffer
實(shí)例有一個(gè)slice
方法,允許將內(nèi)存區(qū)域的一部分,拷貝生成一個(gè)新的 ArrayBuffer
對象。
const buffer = new ArrayBuffer(8);
const newBuffer = buffer.slice(0, 3);
上面代碼拷貝 buffer 對象的前 3 個(gè)字節(jié)(從 0 開始,到第 3 個(gè)字節(jié)前面結(jié)束),生成一個(gè)新的 ArrayBuffer 對象。 slice 方法其實(shí)包含兩步,第一步是先分配一段新內(nèi)存,第二步是將原來那個(gè) ArrayBuffer 對象拷貝過去。
slice 方法接受兩個(gè)參數(shù),第一個(gè)參數(shù)表示拷貝開始的字節(jié)序號(含該字節(jié)),第二個(gè)參數(shù)表示拷貝截止的字節(jié)序號(不含該字節(jié))。如果省略第二個(gè)參數(shù),則默認(rèn)到原 ArrayBuffer 對象的結(jié)尾。
除了 slice 方法, ArrayBuffer 對象不提供任何直接讀寫內(nèi)存的方法,只允許在其上方建立視圖,然后通過視圖讀寫。
ArrayBuffer
有一個(gè)靜態(tài)方法isView
,返回一個(gè)布爾值,表示參數(shù)是否為 ArrayBuffer
的視圖實(shí)例。這個(gè)方法大致相當(dāng)于判斷參數(shù),是否為 TypedArray
實(shí)例或 DataView
實(shí)例。
const buffer = new ArrayBuffer(8);
ArrayBuffer.isView(buffer) // false
const v = new Int32Array(buffer);
ArrayBuffer.isView(v) // true
ArrayBuffer
對象作為內(nèi)存區(qū)域,可以存放多種類型的數(shù)據(jù)。同一段內(nèi)存,不同數(shù)據(jù)有不同的解讀方式,這就叫做“視圖”(view)。ArrayBuffer
有兩種視圖,一種是TypedArray
視圖,另一種是 DataView
視圖。前者的數(shù)組成員都是同一個(gè)數(shù)據(jù)類型,后者的數(shù)組成員可以是不同的數(shù)據(jù)類型。
目前, TypedArray
視圖一共包括 9 種類型,每一種視圖都是一種構(gòu)造函數(shù)。
這 9 個(gè)構(gòu)造函數(shù)生成的數(shù)組,統(tǒng)稱為 TypedArray 視圖。它們很像普通數(shù)組,都有 length 屬性,都能用方括號運(yùn)算符( [] )獲取單個(gè)元素,所有數(shù)組的方法,在它們上面都能使用。普通數(shù)組與 TypedArray 數(shù)組的差異主要在以下方面。
TypedArray 數(shù)組提供 9 種構(gòu)造函數(shù),用來生成相應(yīng)類型的數(shù)組實(shí)例。
構(gòu)造函數(shù)有多種用法。
(1)TypedArray(buffer, byteOffset=0, length?)
同一個(gè)ArrayBuffer
對象之上,可以根據(jù)不同的數(shù)據(jù)類型,建立多個(gè)視圖。
// 創(chuàng)建一個(gè)8字節(jié)的ArrayBuffer
const b = new ArrayBuffer(8);
// 創(chuàng)建一個(gè)指向b的Int32視圖,開始于字節(jié)0,直到緩沖區(qū)的末尾
const v1 = new Int32Array(b);
// 創(chuàng)建一個(gè)指向b的Uint8視圖,開始于字節(jié)2,直到緩沖區(qū)的末尾
const v2 = new Uint8Array(b, 2);
// 創(chuàng)建一個(gè)指向b的Int16視圖,開始于字節(jié)2,長度為2
const v3 = new Int16Array(b, 2, 2);
上面代碼在一段長度為 8 個(gè)字節(jié)的內(nèi)存( b )之上,生成了三個(gè)視圖: v1 、 v2 和 v3 。
視圖的構(gòu)造函數(shù)可以接受三個(gè)參數(shù):
因此, v1 、 v2 和 v3 是重疊的: v1[0] 是一個(gè) 32 位整數(shù),指向字節(jié) 0 ~字節(jié) 3; v2[0] 是一個(gè) 8 位無符號整數(shù),指向字節(jié) 2; v3[0] 是一個(gè) 16 位整數(shù),指向字節(jié) 2 ~字節(jié) 3。只要任何一個(gè)視圖對內(nèi)存有所修改,就會在另外兩個(gè)視圖上反應(yīng)出來。
注意, byteOffset 必須與所要建立的數(shù)據(jù)類型一致,否則會報(bào)錯(cuò)。
const buffer = new ArrayBuffer(8);
const i16 = new Int16Array(buffer, 1);
// Uncaught RangeError: start offset of Int16Array should be a multiple of 2
上面代碼中,新生成一個(gè) 8 個(gè)字節(jié)的 ArrayBuffer 對象,然后在這個(gè)對象的第一個(gè)字節(jié),建立帶符號的 16 位整數(shù)視圖,結(jié)果報(bào)錯(cuò)。因?yàn)椋瑤Х柕?16 位整數(shù)需要兩個(gè)字節(jié),所以 byteOffset 參數(shù)必須能夠被 2 整除。
如果想從任意字節(jié)開始解讀 ArrayBuffer 對象,必須使用 DataView 視圖,因?yàn)?TypedArray 視圖只提供 9 種固定的解讀格式。
(2)TypedArray(length)
視圖還可以不通過 ArrayBuffer 對象,直接分配內(nèi)存而生成。
const f64a = new Float64Array(8);
f64a[0] = 10;
f64a[1] = 20;
f64a[2] = f64a[0] + f64a[1];
上面代碼生成一個(gè) 8 個(gè)成員的 Float64Array 數(shù)組(共 64 字節(jié)),然后依次對每個(gè)成員賦值。這時(shí),視圖構(gòu)造函數(shù)的參數(shù)就是成員的個(gè)數(shù)??梢钥吹剑晥D數(shù)組的賦值操作與普通數(shù)組的操作毫無兩樣。
(3)TypedArray(typedArray)
TypedArray 數(shù)組的構(gòu)造函數(shù),可以接受另一個(gè) TypedArray 實(shí)例作為參數(shù)。
const typedArray = new Int8Array(new Uint8Array(4));
上面代碼中, Int8Array 構(gòu)造函數(shù)接受一個(gè) Uint8Array 實(shí)例作為參數(shù)。
注意,此時(shí)生成的新數(shù)組,只是復(fù)制了參數(shù)數(shù)組的值,對應(yīng)的底層內(nèi)存是不一樣的。新數(shù)組會開辟一段新的內(nèi)存儲存數(shù)據(jù),不會在原數(shù)組的內(nèi)存之上建立視圖。
const x = new Int8Array([1, 1]);
const y = new Int8Array(x);
x[0] // 1
y[0] // 1
x[0] = 2;
y[0] // 1
上面代碼中,數(shù)組 y 是以數(shù)組 x 為模板而生成的,當(dāng) x 變動的時(shí)候, y 并沒有變動。
如果想基于同一段內(nèi)存,構(gòu)造不同的視圖,可以采用下面的寫法。
const x = new Int8Array([1, 1]);
const y = new Int8Array(x.buffer);
x[0] // 1
y[0] // 1
x[0] = 2;
y[0] // 2
(4)TypedArray(arrayLikeObject)
構(gòu)造函數(shù)的參數(shù)也可以是一個(gè)普通數(shù)組,然后直接生成 TypedArray 實(shí)例。
const typedArray = new Uint8Array([1, 2, 3, 4]);
注意,這時(shí) TypedArray 視圖會重新開辟內(nèi)存,不會在原數(shù)組的內(nèi)存上建立視圖。
上面代碼從一個(gè)普通的數(shù)組,生成一個(gè) 8 位無符號整數(shù)的 TypedArray 實(shí)例。
TypedArray 數(shù)組也可以轉(zhuǎn)換回普通數(shù)組。
const normalArray = [...typedArray];
// or
const normalArray = Array.from(typedArray);
// or
const normalArray = Array.prototype.slice.call(typedArray);
普通數(shù)組的操作方法和屬性,對 TypedArray 數(shù)組完全適用。
上面所有方法的用法,請參閱數(shù)組方法的介紹,這里不再重復(fù)了。
注意,TypedArray
數(shù)組沒有 concat
方法。如果想要合并多個(gè) TypedArray 數(shù)組,可以用下面這個(gè)函數(shù)。
function concatenate(resultConstructor, ...arrays) {
let totalLength = 0;
for (let arr of arrays) {
totalLength += arr.length;
}
let result = new resultConstructor(totalLength);
let offset = 0;
for (let arr of arrays) {
result.set(arr, offset);
offset += arr.length;
}
return result;
}
concatenate(Uint8Array, Uint8Array.of(1, 2), Uint8Array.of(3, 4))
// Uint8Array [1, 2, 3, 4]
另外,TypedArray 數(shù)組與普通數(shù)組一樣,部署了 Iterator 接口,所以可以被遍歷。
let ui8 = Uint8Array.of(0, 1, 2);
for (let byte of ui8) {
console.log(byte);
}
// 0
// 1
// 2
字節(jié)序指的是數(shù)值在內(nèi)存中的表示方式。
const buffer = new ArrayBuffer(16);
const int32View = new Int32Array(buffer);
for (let i = 0; i < int32View.length; i++) {
int32View[i] = i * 2;
}
上面代碼生成一個(gè) 16 字節(jié)的ArrayBuffer
對象,然后在它的基礎(chǔ)上,建立了一個(gè) 32 位整數(shù)的視圖。由于每個(gè) 32 位整數(shù)占據(jù) 4 個(gè)字節(jié),所以一共可以寫入 4 個(gè)整數(shù),依次為 0,2,4,6。
如果在這段數(shù)據(jù)上接著建立一個(gè) 16 位整數(shù)的視圖,則可以讀出完全不一樣的結(jié)果。
const int16View = new Int16Array(buffer);
for (let i = 0; i < int16View.length; i++) {
console.log("Entry " + i + ": " + int16View[i]);
}
// Entry 0: 0
// Entry 1: 0
// Entry 2: 2
// Entry 3: 0
// Entry 4: 4
// Entry 5: 0
// Entry 6: 6
// Entry 7: 0
由于每個(gè) 16 位整數(shù)占據(jù) 2 個(gè)字節(jié),所以整個(gè) ArrayBuffer 對象現(xiàn)在分成 8 段。然后,由于 x86 體系的計(jì)算機(jī)都采用小端字節(jié)序(little endian),相對重要的字節(jié)排在后面的內(nèi)存地址,相對不重要字節(jié)排在前面的內(nèi)存地址,所以就得到了上面的結(jié)果。
比如,一個(gè)占據(jù)四個(gè)字節(jié)的 16 進(jìn)制數(shù) 0x12345678 ,決定其大小的最重要的字節(jié)是“12”,最不重要的是“78”。小端字節(jié)序?qū)⒆畈恢匾淖止?jié)排在前面,儲存順序就是 78563412 ;大端字節(jié)序則完全相反,將最重要的字節(jié)排在前面,儲存順序就是 12345678 。目前,所有個(gè)人電腦幾乎都是小端字節(jié)序,所以 TypedArray 數(shù)組內(nèi)部也采用小端字節(jié)序讀寫數(shù)據(jù),或者更準(zhǔn)確的說,按照本機(jī)操作系統(tǒng)設(shè)定的字節(jié)序讀寫數(shù)據(jù)。
這并不意味大端字節(jié)序不重要,事實(shí)上,很多網(wǎng)絡(luò)設(shè)備和特定的操作系統(tǒng)采用的是大端字節(jié)序。這就帶來一個(gè)嚴(yán)重的問題:如果一段數(shù)據(jù)是大端字節(jié)序,TypedArray 數(shù)組將無法正確解析,因?yàn)樗荒芴幚硇《俗止?jié)序!為了解決這個(gè)問題,JavaScript 引入 DataView 對象,可以設(shè)定字節(jié)序,下文會詳細(xì)介紹。
下面是另一個(gè)例子。
// 假定某段buffer包含如下字節(jié) [0x02, 0x01, 0x03, 0x07]
const buffer = new ArrayBuffer(4);
const v1 = new Uint8Array(buffer);
v1[0] = 2;
v1[1] = 1;
v1[2] = 3;
v1[3] = 7;
const uInt16View = new Uint16Array(buffer);
// 計(jì)算機(jī)采用小端字節(jié)序
// 所以頭兩個(gè)字節(jié)等于258
if (uInt16View[0] === 258) {
console.log('OK'); // "OK"
}
// 賦值運(yùn)算
uInt16View[0] = 255; // 字節(jié)變?yōu)閇0xFF, 0x00, 0x03, 0x07]
uInt16View[0] = 0xff05; // 字節(jié)變?yōu)閇0x05, 0xFF, 0x03, 0x07]
uInt16View[1] = 0x0210; // 字節(jié)變?yōu)閇0x05, 0xFF, 0x10, 0x02]
下面的函數(shù)可以用來判斷,當(dāng)前視圖是小端字節(jié)序,還是大端字節(jié)序。
const BIG_ENDIAN = Symbol('BIG_ENDIAN');
const LITTLE_ENDIAN = Symbol('LITTLE_ENDIAN');
function getPlatformEndianness() {
let arr32 = Uint32Array.of(0x12345678);
let arr8 = new Uint8Array(arr32.buffer);
switch ((arr8[0]*0x1000000) + (arr8[1]*0x10000) + (arr8[2]*0x100) + (arr8[3])) {
case 0x12345678:
return BIG_ENDIAN;
case 0x78563412:
return LITTLE_ENDIAN;
default:
throw new Error('Unknown endianness');
}
}
總之,與普通數(shù)組相比,TypedArray 數(shù)組的最大優(yōu)點(diǎn)就是可以直接操作內(nèi)存,不需要數(shù)據(jù)類型轉(zhuǎn)換,所以速度快得多。
每一種視圖的構(gòu)造函數(shù),都有一個(gè) BYTES_PER_ELEMENT
屬性,表示這種數(shù)據(jù)類型占據(jù)的字節(jié)數(shù)。
Int8Array.BYTES_PER_ELEMENT // 1
Uint8Array.BYTES_PER_ELEMENT // 1
Uint8ClampedArray.BYTES_PER_ELEMENT // 1
Int16Array.BYTES_PER_ELEMENT // 2
Uint16Array.BYTES_PER_ELEMENT // 2
Int32Array.BYTES_PER_ELEMENT // 4
Uint32Array.BYTES_PER_ELEMENT // 4
Float32Array.BYTES_PER_ELEMENT // 4
Float64Array.BYTES_PER_ELEMENT // 8
這個(gè)屬性在 TypedArray
實(shí)例上也能獲取,即有 TypedArray.prototype.BYTES_PER_ELEMENT
。
ArrayBuffer
和字符串的相互轉(zhuǎn)換,使用原生 TextEncoder
和 TextDecoder
方法。為了便于說明用法,下面的代碼都按照 TypeScript 的用法,給出了類型簽名。
/**
* Convert ArrayBuffer/TypedArray to String via TextDecoder
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder
*/
function ab2str(
input: ArrayBuffer | Uint8Array | Int8Array | Uint16Array | Int16Array | Uint32Array | Int32Array,
outputEncoding: string = 'utf8',
): string {
const decoder = new TextDecoder(outputEncoding)
return decoder.decode(input)
}
/**
* Convert String to ArrayBuffer via TextEncoder
*
* @see https://developer.mozilla.org/zh-CN/docs/Web/API/TextEncoder
*/
function str2ab(input: string): ArrayBuffer {
const view = str2Uint8Array(input)
return view.buffer
}
/** Convert String to Uint8Array */
function str2Uint8Array(input: string): Uint8Array {
const encoder = new TextEncoder()
const view = encoder.encode(input)
return view
}
上面代碼中, ab2str() 的第二個(gè)參數(shù) outputEncoding 給出了輸出編碼的編碼,一般保持默認(rèn)值( utf-8 ),其他可選值參見官方文檔或 Node.js 文檔。
不同的視圖類型,所能容納的數(shù)值范圍是確定的。超出這個(gè)范圍,就會出現(xiàn)溢出。比如,8 位視圖只能容納一個(gè) 8 位的二進(jìn)制值,如果放入一個(gè) 9 位的值,就會溢出。
TypedArray 數(shù)組的溢出處理規(guī)則,簡單來說,就是拋棄溢出的位,然后按照視圖類型進(jìn)行解釋。
const uint8 = new Uint8Array(1);
uint8[0] = 256;
uint8[0] // 0
uint8[0] = -1;
uint8[0] // 255
上面代碼中, uint8 是一個(gè) 8 位視圖,而 256 的二進(jìn)制形式是一個(gè) 9 位的值 100000000 ,這時(shí)就會發(fā)生溢出。根據(jù)規(guī)則,只會保留后 8 位,即 00000000 。 uint8 視圖的解釋規(guī)則是無符號的 8 位整數(shù),所以 00000000 就是 0 。
負(fù)數(shù)在計(jì)算機(jī)內(nèi)部采用“2 的補(bǔ)碼”表示,也就是說,將對應(yīng)的正數(shù)值進(jìn)行否運(yùn)算,然后加 1 。比如, -1 對應(yīng)的正值是 1 ,進(jìn)行否運(yùn)算以后,得到 11111110 ,再加上 1 就是補(bǔ)碼形式 11111111 。 uint8 按照無符號的 8 位整數(shù)解釋 11111111 ,返回結(jié)果就是 255 。
一個(gè)簡單轉(zhuǎn)換規(guī)則,可以這樣表示。
上面的“余值”就是模運(yùn)算的結(jié)果,即 JavaScript 里面的 % 運(yùn)算符的結(jié)果。
12 % 4 // 0
12 % 5 // 2
上面代碼中,12 除以 4 是沒有余值的,而除以 5 會得到余值 2。
請看下面的例子。
const int8 = new Int8Array(1);
int8[0] = 128;
int8[0] // -128
int8[0] = -129;
int8[0] // 127
上面例子中, int8 是一個(gè)帶符號的 8 位整數(shù)視圖,它的最大值是 127,最小值是-128。輸入值為 128 時(shí),相當(dāng)于正向溢出 1 ,根據(jù)“最小值加上余值(128 除以 127 的余值是 1),再減去 1”的規(guī)則,就會返回 -128 ;輸入值為 -129 時(shí),相當(dāng)于負(fù)向溢出 1 ,根據(jù)“最大值減去余值的絕對值(-129 除以-128 的余值的絕對值是 1),再加上 1”的規(guī)則,就會返回 127 。
Uint8ClampedArray 視圖的溢出規(guī)則,與上面的規(guī)則不同。它規(guī)定,凡是發(fā)生正向溢出,該值一律等于當(dāng)前數(shù)據(jù)類型的最大值,即 255;如果發(fā)生負(fù)向溢出,該值一律等于當(dāng)前數(shù)據(jù)類型的最小值,即 0。
const uint8c = new Uint8ClampedArray(1);
uint8c[0] = 256;
uint8c[0] // 255
uint8c[0] = -1;
uint8c[0] // 0
上面例子中, uint8C 是一個(gè) Uint8ClampedArray 視圖,正向溢出時(shí)都返回 255,負(fù)向溢出都返回 0。
TypedArray
實(shí)例的buffer
屬性,返回整段內(nèi)存區(qū)域?qū)?yīng)的 ArrayBuffer
對象。該屬性為只讀屬性。
const a = new Float32Array(64);
const b = new Uint8Array(a.buffer);
上面代碼的 a 視圖對象和 b 視圖對象,對應(yīng)同一個(gè) ArrayBuffer 對象,即同一段內(nèi)存。
byteLength
屬性返回TypedArray
數(shù)組占據(jù)的內(nèi)存長度,單位為字節(jié)。byteOffset
屬性返回 TypedArray
數(shù)組從底層ArrayBuffer
對象的哪個(gè)字節(jié)開始。這兩個(gè)屬性都是只讀屬性。
const b = new ArrayBuffer(8);
const v1 = new Int32Array(b);
const v2 = new Uint8Array(b, 2);
const v3 = new Int16Array(b, 2, 2);
v1.byteLength // 8
v2.byteLength // 6
v3.byteLength // 4
v1.byteOffset // 0
v2.byteOffset // 2
v3.byteOffset // 2
length
屬性表示 TypedArray 數(shù)組含有多少個(gè)成員。注意將 length
屬性和byteLength
屬性區(qū)分,前者是成員長度,后者是字節(jié)長度。
const a = new Int16Array(8);
a.length // 8
a.byteLength // 16
TypedArray 數(shù)組的 set
方法用于復(fù)制數(shù)組(普通數(shù)組或 TypedArray 數(shù)組),也就是將一段內(nèi)容完全復(fù)制到另一段內(nèi)存。
const a = new Uint8Array(8);
const b = new Uint8Array(8);
b.set(a);
上面代碼復(fù)制 a 數(shù)組的內(nèi)容到 b 數(shù)組,它是整段內(nèi)存的復(fù)制,比一個(gè)個(gè)拷貝成員的那種復(fù)制快得多。
set 方法還可以接受第二個(gè)參數(shù),表示從 b 對象的哪一個(gè)成員開始復(fù)制 a 對象。
const a = new Uint16Array(8);
const b = new Uint16Array(10);
b.set(a, 2)
上面代碼的 b 數(shù)組比 a 數(shù)組多兩個(gè)成員,所以從 b[2] 開始復(fù)制。
subarray
方法是對于TypedArray
數(shù)組的一部分,再建立一個(gè)新的視圖。
const a = new Uint16Array(8);
const b = a.subarray(2,3);
a.byteLength // 16
b.byteLength // 2
subarray 方法的第一個(gè)參數(shù)是起始的成員序號,第二個(gè)參數(shù)是結(jié)束的成員序號(不含該成員),如果省略則包含剩余的全部成員。所以,上面代碼的 a.subarray(2,3) ,意味著 b 只包含 a[2] 一個(gè)成員,字節(jié)長度為 2。
TypeArray 實(shí)例的slice
方法,可以返回一個(gè)指定位置的新的TypedArray
實(shí)例。
let ui8 = Uint8Array.of(0, 1, 2);
ui8.slice(-1)
// Uint8Array [ 2 ]
上面代碼中, ui8 是 8 位無符號整數(shù)數(shù)組視圖的一個(gè)實(shí)例。它的 slice 方法可以從當(dāng)前視圖之中,返回一個(gè)新的視圖實(shí)例。
slice 方法的參數(shù),表示原數(shù)組的具體位置,開始生成新數(shù)組。負(fù)值表示逆向的位置,即-1 為倒數(shù)第一個(gè)位置,-2 表示倒數(shù)第二個(gè)位置,以此類推。
TypedArray
數(shù)組的所有構(gòu)造函數(shù),都有一個(gè)靜態(tài)方法of
,用于將參數(shù)轉(zhuǎn)為一個(gè) TypedArray
實(shí)例。
Float32Array.of(0.151, -8, 3.7)
// Float32Array [ 0.151, -8, 3.7 ]
下面三種方法都會生成同樣一個(gè) TypedArray 數(shù)組。
// 方法一
let tarr = new Uint8Array([1,2,3]);
// 方法二
let tarr = Uint8Array.of(1,2,3);
// 方法三
let tarr = new Uint8Array(3);
tarr[0] = 1;
tarr[1] = 2;
tarr[2] = 3;
靜態(tài)方法 from
接受一個(gè)可遍歷的數(shù)據(jù)結(jié)構(gòu)(比如數(shù)組)作為參數(shù),返回一個(gè)基于這個(gè)結(jié)構(gòu)的 TypedArray
實(shí)例。
Uint16Array.from([0, 1, 2])
// Uint16Array [ 0, 1, 2 ]
這個(gè)方法還可以將一種 TypedArray 實(shí)例,轉(zhuǎn)為另一種。
const ui16 = Uint16Array.from(Uint8Array.of(0, 1, 2));
ui16 instanceof Uint16Array // true
from 方法還可以接受一個(gè)函數(shù),作為第二個(gè)參數(shù),用來對每個(gè)元素進(jìn)行遍歷,功能類似 map 方法。
Int8Array.of(127, 126, 125).map(x => 2 * x)
// Int8Array [ -2, -4, -6 ]
Int16Array.from(Int8Array.of(127, 126, 125), x => 2 * x)
// Int16Array [ 254, 252, 250 ]
上面的例子中, from 方法沒有發(fā)生溢出,這說明遍歷不是針對原來的 8 位整數(shù)數(shù)組。也就是說, from 會將第一個(gè)參數(shù)指定的 TypedArray 數(shù)組,拷貝到另一段內(nèi)存之中,處理之后再將結(jié)果轉(zhuǎn)成指定的數(shù)組格式。
由于視圖的構(gòu)造函數(shù)可以指定起始位置和長度,所以在同一段內(nèi)存之中,可以依次存放不同類型的數(shù)據(jù),這叫做“復(fù)合視圖”。
const buffer = new ArrayBuffer(24);
const idView = new Uint32Array(buffer, 0, 1);
const usernameView = new Uint8Array(buffer, 4, 16);
const amountDueView = new Float32Array(buffer, 20, 1);
上面代碼將一個(gè) 24 字節(jié)長度的 ArrayBuffer 對象,分成三個(gè)部分:
這種數(shù)據(jù)結(jié)構(gòu)可以用如下的 C 語言描述:
struct someStruct {
unsigned long id;
char username[16];
float amountDue;
};
如果一段數(shù)據(jù)包括多種類型(比如服務(wù)器傳來的 HTTP 數(shù)據(jù)),這時(shí)除了建立ArrayBuffer
對象的復(fù)合視圖以外,還可以通過 DataView
視圖進(jìn)行操作。
DataView
視圖提供更多操作選項(xiàng),而且支持設(shè)定字節(jié)序。本來,在設(shè)計(jì)目的上, ArrayBuffer
對象的各種 TypedArray
視圖,是用來向網(wǎng)卡、聲卡之類的本機(jī)設(shè)備傳送數(shù)據(jù),所以使用本機(jī)的字節(jié)序就可以了;而 DataView
視圖的設(shè)計(jì)目的,是用來處理網(wǎng)絡(luò)設(shè)備傳來的數(shù)據(jù),所以大端字節(jié)序或小端字節(jié)序是可以自行設(shè)定的。
DataView
視圖本身也是構(gòu)造函數(shù),接受一個(gè) ArrayBuffer
對象作為參數(shù),生成視圖。
new DataView(ArrayBuffer buffer [, 字節(jié)起始位置 [, 長度]]);
下面是一個(gè)例子。
const buffer = new ArrayBuffer(24);
const dv = new DataView(buffer);
DataView 實(shí)例有以下屬性,含義與 TypedArray 實(shí)例的同名方法相同。
DataView 實(shí)例提供 8 個(gè)方法讀取內(nèi)存。
這一系列 get 方法的參數(shù)都是一個(gè)字節(jié)序號(不能是負(fù)數(shù),否則會報(bào)錯(cuò)),表示從哪個(gè)字節(jié)開始讀取。
const buffer = new ArrayBuffer(24);
const dv = new DataView(buffer);
// 從第1個(gè)字節(jié)讀取一個(gè)8位無符號整數(shù)
const v1 = dv.getUint8(0);
// 從第2個(gè)字節(jié)讀取一個(gè)16位無符號整數(shù)
const v2 = dv.getUint16(1);
// 從第4個(gè)字節(jié)讀取一個(gè)16位無符號整數(shù)
const v3 = dv.getUint16(3);
上面代碼讀取了 ArrayBuffer 對象的前 5 個(gè)字節(jié),其中有一個(gè) 8 位整數(shù)和兩個(gè)十六位整數(shù)。
如果一次讀取兩個(gè)或兩個(gè)以上字節(jié),就必須明確數(shù)據(jù)的存儲方式,到底是小端字節(jié)序還是大端字節(jié)序。默認(rèn)情況下, DataView 的 get 方法使用大端字節(jié)序解讀數(shù)據(jù),如果需要使用小端字節(jié)序解讀,必須在 get 方法的第二個(gè)參數(shù)指定 true 。
// 小端字節(jié)序
const v1 = dv.getUint16(1, true);
// 大端字節(jié)序
const v2 = dv.getUint16(3, false);
// 大端字節(jié)序
const v3 = dv.getUint16(3);
DataView 視圖提供 8 個(gè)方法寫入內(nèi)存。
這一系列 set 方法,接受兩個(gè)參數(shù),第一個(gè)參數(shù)是字節(jié)序號,表示從哪個(gè)字節(jié)開始寫入,第二個(gè)參數(shù)為寫入的數(shù)據(jù)。對于那些寫入兩個(gè)或兩個(gè)以上字節(jié)的方法,需要指定第三個(gè)參數(shù), false 或者 undefined 表示使用大端字節(jié)序?qū)懭耄?true 表示使用小端字節(jié)序?qū)懭搿?/p>
// 在第1個(gè)字節(jié),以大端字節(jié)序?qū)懭胫禐?5的32位整數(shù)
dv.setInt32(0, 25, false);
// 在第5個(gè)字節(jié),以大端字節(jié)序?qū)懭胫禐?5的32位整數(shù)
dv.setInt32(4, 25);
// 在第9個(gè)字節(jié),以小端字節(jié)序?qū)懭胫禐?.5的32位浮點(diǎn)數(shù)
dv.setFloat32(8, 2.5, true);
如果不確定正在使用的計(jì)算機(jī)的字節(jié)序,可以采用下面的判斷方式。
const littleEndian = (function() {
const buffer = new ArrayBuffer(2);
new DataView(buffer).setInt16(0, 256, true);
return new Int16Array(buffer)[0] === 256;
})();
如果返回 true ,就是小端字節(jié)序;如果返回 false ,就是大端字節(jié)序。
大量的Web API
用到了ArrayBuffer
對象和它的視圖對象。
傳統(tǒng)上,服務(wù)器通過 AJAX 操作只能返回文本數(shù)據(jù),即responseType
屬性默認(rèn)為 text
。 XMLHttpRequest
第二版XHR2
允許服務(wù)器返回二進(jìn)制數(shù)據(jù),這時(shí)分成兩種情況。如果明確知道返回的二進(jìn)制數(shù)據(jù)類型,可以把返回類型( responseType )
設(shè)為arraybuffer
;如果不知道,就設(shè)為blob
。
let xhr = new XMLHttpRequest();
xhr.open('GET', someUrl);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
let arrayBuffer = xhr.response;
// ···
};
xhr.send();
如果知道傳回來的是 32 位整數(shù),可以像下面這樣處理。
xhr.onreadystatechange = function () {
if (req.readyState === 4 ) {
const arrayResponse = xhr.response;
const dataView = new DataView(arrayResponse);
const ints = new Uint32Array(dataView.byteLength / 4);
xhrDiv.style.backgroundColor = "#00FF00";
xhrDiv.innerText = "Array is " + ints.length + "uints long";
}
}
網(wǎng)頁Canvas
元素輸出的二進(jìn)制像素?cái)?shù)據(jù),就是 TypedArray
數(shù)組。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const uint8ClampedArray = imageData.data;
需要注意的是,上面代碼的uint8ClampedArray
雖然是一個(gè)TypedArray
數(shù)組,但是它的視圖類型是一種針對Canvas
元素的專有類型 Uint8ClampedArray
。這個(gè)視圖類型的特點(diǎn),就是專門針對顏色,把每個(gè)字節(jié)解讀為無符號的 8 位整數(shù),即只能取值 0 ~ 255,而且發(fā)生運(yùn)算的時(shí)候自動過濾高位溢出。這為圖像處理帶來了巨大的方便。
舉例來說,如果把像素的顏色值設(shè)為Uint8Array
類型,那么乘以一個(gè) gamma 值的時(shí)候,就必須這樣計(jì)算:
u8[i] = Math.min(255, Math.max(0, u8[i] * gamma));
因?yàn)?Uint8Array 類型對于大于 255 的運(yùn)算結(jié)果(比如 0xFF+1 ),會自動變?yōu)?0x00 ,所以圖像處理必須要像上面這樣算。這樣做很麻煩,而且影響性能。如果將顏色值設(shè)為 Uint8ClampedArray 類型,計(jì)算就簡化許多。
pixels[i] *= gamma;
Uint8ClampedArray 類型確保將小于 0 的值設(shè)為 0,將大于 255 的值設(shè)為 255。注意,IE 10 不支持該類型。
WebSocket
可以通過 ArrayBuffer
,發(fā)送或接收二進(jìn)制數(shù)據(jù)。
let socket = new WebSocket('ws://127.0.0.1:8081');
socket.binaryType = 'arraybuffer';
// Wait until socket is open
socket.addEventListener('open', function (event) {
// Send binary data
const typedArray = new Uint8Array(4);
socket.send(typedArray.buffer);
});
// Receive binary data
socket.addEventListener('message', function (event) {
const arrayBuffer = event.data;
// ···
});
Fetch API 取回的數(shù)據(jù),就是ArrayBuffer
對象。
fetch(url)
.then(function(response){
return response.arrayBuffer()
})
.then(function(arrayBuffer){
// ...
});
如果知道一個(gè)文件的二進(jìn)制數(shù)據(jù)類型,也可以將這個(gè)文件讀取為ArrayBuffer
對象。
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function () {
const arrayBuffer = reader.result;
// ···
};
下面以處理 bmp 文件為例。假定 file 變量是一個(gè)指向 bmp 文件的文件對象,首先讀取文件。
const reader = new FileReader();
reader.addEventListener("load", processimage, false);
reader.readAsArrayBuffer(file);
然后,定義處理圖像的回調(diào)函數(shù):先在二進(jìn)制數(shù)據(jù)之上建立一個(gè) DataView 視圖,再建立一個(gè) bitmap 對象,用于存放處理后的數(shù)據(jù),最后將圖像展示在 Canvas 元素之中。
function processimage(e) {
const buffer = e.target.result;
const datav = new DataView(buffer);
const bitmap = {};
// 具體的處理步驟
}
具體處理圖像數(shù)據(jù)時(shí),先處理 bmp 的文件頭。具體每個(gè)文件頭的格式和定義,請參閱有關(guān)資料。
bitmap.fileheader = {};
bitmap.fileheader.bfType = datav.getUint16(0, true);
bitmap.fileheader.bfSize = datav.getUint32(2, true);
bitmap.fileheader.bfReserved1 = datav.getUint16(6, true);
bitmap.fileheader.bfReserved2 = datav.getUint16(8, true);
bitmap.fileheader.bfOffBits = datav.getUint32(10, true);
接著處理圖像元信息部分。
bitmap.infoheader = {};
bitmap.infoheader.biSize = datav.getUint32(14, true);
bitmap.infoheader.biWidth = datav.getUint32(18, true);
bitmap.infoheader.biHeight = datav.getUint32(22, true);
bitmap.infoheader.biPlanes = datav.getUint16(26, true);
bitmap.infoheader.biBitCount = datav.getUint16(28, true);
bitmap.infoheader.biCompression = datav.getUint32(30, true);
bitmap.infoheader.biSizeImage = datav.getUint32(34, true);
bitmap.infoheader.biXPelsPerMeter = datav.getUint32(38, true);
bitmap.infoheader.biYPelsPerMeter = datav.getUint32(42, true);
bitmap.infoheader.biClrUsed = datav.getUint32(46, true);
bitmap.infoheader.biClrImportant = datav.getUint32(50, true);
最后處理圖像本身的像素信息。
const start = bitmap.fileheader.bfOffBits;
bitmap.pixels = new Uint8Array(buffer, start);
至此,圖像文件的數(shù)據(jù)全部處理完成。下一步,可以根據(jù)需要,進(jìn)行圖像變形,或者轉(zhuǎn)換格式,或者展示在 Canvas 網(wǎng)頁元素之中。
JavaScript 是單線程
的,Web worker 引入了多線程:主線程用來與用戶互動,Worker 線程用來承擔(dān)計(jì)算任務(wù)。每個(gè)線程的數(shù)據(jù)都是隔離的,通過 postMessage()
通信。下面是一個(gè)例子。
// 主線程
const w = new Worker('myworker.js');
上面代碼中,主線程新建了一個(gè) Worker 線程。該線程與主線程之間會有一個(gè)通信渠道,主線程通過 w.postMessage 向 Worker 線程發(fā)消息,同時(shí)通過 message 事件監(jiān)聽 Worker 線程的回應(yīng)。
// 主線程
w.postMessage('hi');
w.onmessage = function (ev) {
console.log(ev.data);
}
上面代碼中,主線程先發(fā)一個(gè)消息 hi ,然后在監(jiān)聽到 Worker 線程的回應(yīng)后,就將其打印出來。
Worker 線程也是通過監(jiān)聽 message 事件,來獲取主線程發(fā)來的消息,并作出反應(yīng)。
// Worker 線程
onmessage = function (ev) {
console.log(ev.data);
postMessage('ho');
}
線程之間的數(shù)據(jù)交換可以是各種格式,不僅僅是字符串,也可以是二進(jìn)制數(shù)據(jù)。這種交換采用的是復(fù)制機(jī)制,即一個(gè)進(jìn)程將需要分享的數(shù)據(jù)復(fù)制一份,通過 postMessage 方法交給另一個(gè)進(jìn)程。如果數(shù)據(jù)量比較大,這種通信的效率顯然比較低。很容易想到,這時(shí)可以留出一塊內(nèi)存區(qū)域,由主線程與 Worker 線程共享,兩方都可以讀寫,那么就會大大提高效率,協(xié)作起來也會比較簡單(不像 postMessage 那么麻煩)。
ES2017 引入 SharedArrayBuffer ,允許 Worker 線程與主線程共享同一塊內(nèi)存。 SharedArrayBuffer 的 API 與 ArrayBuffer 一模一樣,唯一的區(qū)別是后者無法共享數(shù)據(jù)。
// 主線程
// 新建 1KB 共享內(nèi)存
const sharedBuffer = new SharedArrayBuffer(1024);
// 主線程將共享內(nèi)存的地址發(fā)送出去
w.postMessage(sharedBuffer);
// 在共享內(nèi)存上建立視圖,供寫入數(shù)據(jù)
const sharedArray = new Int32Array(sharedBuffer);
上面代碼中, postMessage 方法的參數(shù)是 SharedArrayBuffer 對象。
Worker 線程從事件的 data 屬性上面取到數(shù)據(jù)。
// Worker 線程
onmessage = function (ev) {
// 主線程共享的數(shù)據(jù),就是 1KB 的共享內(nèi)存
const sharedBuffer = ev.data;
// 在共享內(nèi)存上建立視圖,方便讀寫
const sharedArray = new Int32Array(sharedBuffer);
// ...
};
共享內(nèi)存也可以在 Worker 線程創(chuàng)建,發(fā)給主線程。
SharedArrayBuffer 與 ArrayBuffer 一樣,本身是無法讀寫的,必須在上面建立視圖,然后通過視圖讀寫。
// 分配 10 萬個(gè) 32 位整數(shù)占據(jù)的內(nèi)存空間
const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 100000);
// 建立 32 位整數(shù)視圖
const ia = new Int32Array(sab); // ia.length == 100000
// 新建一個(gè)質(zhì)數(shù)生成器
const primes = new PrimeGenerator();
// 將 10 萬個(gè)質(zhì)數(shù),寫入這段內(nèi)存空間
for ( let i=0 ; i < ia.length ; i++ )
ia[i] = primes.next();
// 向 Worker 線程發(fā)送這段共享內(nèi)存
w.postMessage(ia);
Worker 線程收到數(shù)據(jù)后的處理如下。
// Worker 線程
let ia;
onmessage = function (ev) {
ia = ev.data;
console.log(ia.length); // 100000
console.log(ia[37]); // 輸出 163,因?yàn)檫@是第38個(gè)質(zhì)數(shù)
};
多線程共享內(nèi)存,最大的問題就是如何防止兩個(gè)線程同時(shí)修改某個(gè)地址,或者說,當(dāng)一個(gè)線程修改共享內(nèi)存以后,必須有一個(gè)機(jī)制讓其他線程同步。SharedArrayBuffer API 提供Atomics
對象,保證所有共享內(nèi)存的操作都是“原子性”的,并且可以在所有線程內(nèi)同步。
什么叫“原子性操作”呢?現(xiàn)代編程語言中,一條普通的命令被編譯器處理以后,會變成多條機(jī)器指令。如果是單線程運(yùn)行,這是沒有問題的;多線程環(huán)境并且共享內(nèi)存時(shí),就會出問題,因?yàn)檫@一組機(jī)器指令的運(yùn)行期間,可能會插入其他線程的指令,從而導(dǎo)致運(yùn)行結(jié)果出錯(cuò)。請看下面的例子。
// 主線程
ia[42] = 314159; // 原先的值 191
ia[37] = 123456; // 原先的值 163
// Worker 線程
console.log(ia[37]);
console.log(ia[42]);
// 可能的結(jié)果
// 123456
// 191
上面代碼中,主線程的原始順序是先對 42 號位置賦值,再對 37 號位置賦值。但是,編譯器和 CPU 為了優(yōu)化,可能會改變這兩個(gè)操作的執(zhí)行順序(因?yàn)樗鼈冎g互不依賴),先對 37 號位置賦值,再對 42 號位置賦值。而執(zhí)行到一半的時(shí)候,Worker 線程可能就會來讀取數(shù)據(jù),導(dǎo)致打印出 123456 和 191 。
下面是另一個(gè)例子。
// 主線程
const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 100000);
const ia = new Int32Array(sab);
for (let i = 0; i < ia.length; i++) {
ia[i] = primes.next(); // 將質(zhì)數(shù)放入 ia
}
// worker 線程
ia[112]++; // 錯(cuò)誤
Atomics.add(ia, 112, 1); // 正確
上面代碼中,Worker 線程直接改寫共享內(nèi)存 ia[112]++ 是不正確的。因?yàn)檫@行語句會被編譯成多條機(jī)器指令,這些指令之間無法保證不會插入其他進(jìn)程的指令。請?jiān)O(shè)想如果兩個(gè)線程同時(shí) ia[112]++ ,很可能它們得到的結(jié)果都是不正確的。
Atomics 對象就是為了解決這個(gè)問題而提出,它可以保證一個(gè)操作所對應(yīng)的多條機(jī)器指令,一定是作為一個(gè)整體運(yùn)行的,中間不會被打斷。也就是說,它所涉及的操作都可以看作是原子性的單操作,這可以避免線程競爭,提高多線程共享內(nèi)存時(shí)的操作安全。所以, ia[112]++ 要改寫成 Atomics.add(ia, 112, 1) 。
Atomics 對象提供多種方法。
(1)Atomics.store(),Atomics.load()
store() 方法用來向共享內(nèi)存寫入數(shù)據(jù), load() 方法用來從共享內(nèi)存讀出數(shù)據(jù)。比起直接的讀寫操作,它們的好處是保證了讀寫操作的原子性。
此外,它們還用來解決一個(gè)問題:多個(gè)線程使用共享內(nèi)存的某個(gè)位置作為開關(guān)(flag),一旦該位置的值變了,就執(zhí)行特定操作。這時(shí),必須保證該位置的賦值操作,一定是在它前面的所有可能會改寫內(nèi)存的操作結(jié)束后執(zhí)行;而該位置的取值操作,一定是在它后面所有可能會讀取該位置的操作開始之前執(zhí)行。 store 方法和 load 方法就能做到這一點(diǎn),編譯器不會為了優(yōu)化,而打亂機(jī)器指令的執(zhí)行順序。
Atomics.load(array, index)
Atomics.store(array, index, value)
store 方法接受三個(gè)參數(shù):SharedBuffer 的視圖、位置索引和值,返回 sharedArray[index] 的值。 load 方法只接受兩個(gè)參數(shù):SharedBuffer 的視圖和位置索引,也是返回 sharedArray[index] 的值。
// 主線程 main.js
ia[42] = 314159; // 原先的值 191
Atomics.store(ia, 37, 123456); // 原先的值是 163
// Worker 線程 worker.js
while (Atomics.load(ia, 37) == 163);
console.log(ia[37]); // 123456
console.log(ia[42]); // 314159
上面代碼中,主線程的 Atomics.store 向 42 號位置的賦值,一定是早于 37 位置的賦值。只要 37 號位置等于 163,Worker 線程就不會終止循環(huán),而對 37 號位置和 42 號位置的取值,一定是在 Atomics.load 操作之后。
下面是另一個(gè)例子。
// 主線程
const worker = new Worker('worker.js');
const length = 10;
const size = Int32Array.BYTES_PER_ELEMENT * length;
// 新建一段共享內(nèi)存
const sharedBuffer = new SharedArrayBuffer(size);
const sharedArray = new Int32Array(sharedBuffer);
for (let i = 0; i < 10; i++) {
// 向共享內(nèi)存寫入 10 個(gè)整數(shù)
Atomics.store(sharedArray, i, 0);
}
worker.postMessage(sharedBuffer);
上面代碼中,主線程用 Atomics.store() 方法寫入數(shù)據(jù)。下面是 Worker 線程用 Atomics.load() 方法讀取數(shù)據(jù)。
// worker.js
self.addEventListener('message', (event) => {
const sharedArray = new Int32Array(event.data);
for (let i = 0; i < 10; i++) {
const arrayValue = Atomics.load(sharedArray, i);
console.log( The item at array index ${i} is ${arrayValue} );
}
}, false);
(2)Atomics.exchange()
Worker 線程如果要寫入數(shù)據(jù),可以使用上面的 Atomics.store() 方法,也可以使用 Atomics.exchange() 方法。它們的區(qū)別是, Atomics.store() 返回寫入的值,而 Atomics.exchange() 返回被替換的值。
// Worker 線程
self.addEventListener('message', (event) => {
const sharedArray = new Int32Array(event.data);
for (let i = 0; i < 10; i++) {
if (i % 2 === 0) {
const storedValue = Atomics.store(sharedArray, i, 1);
console.log( The item at array index ${i} is now ${storedValue} );
} else {
const exchangedValue = Atomics.exchange(sharedArray, i, 2);
console.log( The item at array index ${i} was ${exchangedValue}, now 2 );
}
}
}, false);
上面代碼將共享內(nèi)存的偶數(shù)位置的值改成 1 ,奇數(shù)位置的值改成 2 。
(3)Atomics.wait(),Atomics.wake()
使用 while 循環(huán)等待主線程的通知,不是很高效,如果用在主線程,就會造成卡頓, Atomics 對象提供了 wait() 和 wake() 兩個(gè)方法用于等待通知。這兩個(gè)方法相當(dāng)于鎖內(nèi)存,即在一個(gè)線程進(jìn)行操作時(shí),讓其他線程休眠(建立鎖),等到操作結(jié)束,再喚醒那些休眠的線程(解除鎖)。
// Worker 線程
self.addEventListener('message', (event) => {
const sharedArray = new Int32Array(event.data);
const arrayIndex = 0;
const expectedStoredValue = 50;
Atomics.wait(sharedArray, arrayIndex, expectedStoredValue);
console.log(Atomics.load(sharedArray, arrayIndex));
}, false);
上面代碼中, Atomics.wait() 方法等同于告訴 Worker 線程,只要滿足給定條件( sharedArray 的 0 號位置等于 50 ),就在這一行 Worker 線程進(jìn)入休眠。
主線程一旦更改了指定位置的值,就可以喚醒 Worker 線程。
// 主線程
const newArrayValue = 100;
Atomics.store(sharedArray, 0, newArrayValue);
const arrayIndex = 0;
const queuePos = 1;
Atomics.wake(sharedArray, arrayIndex, queuePos);
上面代碼中, sharedArray 的 0 號位置改為 100 ,然后就執(zhí)行 Atomics.wake() 方法,喚醒在 sharedArray 的 0 號位置休眠隊(duì)列里的一個(gè)線程。
Atomics.wait() 方法的使用格式如下。
Atomics.wait(sharedArray, index, value, timeout)
它的四個(gè)參數(shù)含義如下。
Atomics.wait() 的返回值是一個(gè)字符串,共有三種可能的值。如果 sharedArray[index] 不等于 value ,就返回字符串 not-equal ,否則就進(jìn)入休眠。如果 Atomics.wake() 方法喚醒,就返回字符串 ok ;如果因?yàn)槌瑫r(shí)喚醒,就返回字符串 timed-out 。
Atomics.wake() 方法的使用格式如下。
Atomics.wake(sharedArray, index, count)
它的三個(gè)參數(shù)含義如下。
Atomics.wake() 方法一旦喚醒休眠的 Worker 線程,就會讓它繼續(xù)往下運(yùn)行。
請看一個(gè)例子。
// 主線程
console.log(ia[37]); // 163
Atomics.store(ia, 37, 123456);
Atomics.wake(ia, 37, 1);
// Worker 線程
Atomics.wait(ia, 37, 163);
console.log(ia[37]); // 123456
上面代碼中,視圖數(shù)組 ia 的第 37 號位置,原來的值是 163 。Worker 線程使用 Atomics.wait() 方法,指定只要 ia[37] 等于 163 ,就進(jìn)入休眠狀態(tài)。主線程使用 Atomics.store() 方法,將 123456 寫入 ia[37] ,然后使用 Atomics.wake() 方法喚醒 Worker 線程。
另外,基于 wait 和 wake 這兩個(gè)方法的鎖內(nèi)存實(shí)現(xiàn),可以看 Lars T Hansen 的 js-lock-and-condition 這個(gè)庫。
注意,瀏覽器的主線程不宜設(shè)置休眠,這會導(dǎo)致用戶失去響應(yīng)。而且,主線程實(shí)際上會拒絕進(jìn)入休眠。
(4)運(yùn)算方法
共享內(nèi)存上面的某些運(yùn)算是不能被打斷的,即不能在運(yùn)算過程中,讓其他線程改寫內(nèi)存上面的值。Atomics 對象提供了一些運(yùn)算方法,防止數(shù)據(jù)被改寫。
Atomics.add(sharedArray, index, value)
Atomics.add 用于將 value 加到 sharedArray[index] ,返回 sharedArray[index] 舊的值。
Atomics.sub(sharedArray, index, value)
Atomics.sub 用于將 value 從 sharedArray[index] 減去,返回 sharedArray[index] 舊的值。
Atomics.and(sharedArray, index, value)
Atomics.and 用于將 value 與 sharedArray[index] 進(jìn)行位運(yùn)算 and ,放入 sharedArray[index] ,并返回舊的值。
Atomics.or(sharedArray, index, value)
Atomics.or 用于將 value 與 sharedArray[index] 進(jìn)行位運(yùn)算 or ,放入 sharedArray[index] ,并返回舊的值。
Atomics.xor(sharedArray, index, value)
Atomic.xor 用于將 vaule 與 sharedArray[index] 進(jìn)行位運(yùn)算 xor ,放入 sharedArray[index] ,并返回舊的值。
(5)其他方法
Atomics 對象還有以下方法。
Atomics.compareExchange 的一個(gè)用途是,從 SharedArrayBuffer 讀取一個(gè)值,然后對該值進(jìn)行某個(gè)操作,操作結(jié)束以后,檢查一下 SharedArrayBuffer 里面原來那個(gè)值是否發(fā)生變化(即被其他線程改寫過)。如果沒有改寫過,就將它寫回原來的位置,否則讀取新的值,再重頭進(jìn)行一次操作。
更多建議: