1. 背景
Shared Memory曾經(jīng)是TC39的提案，目前已經(jīng)成為了最新ES 2017規(guī)范的一部分。
與Shared Memory相關(guān)的章節(jié)有：
6.2.7 Data Blocks
8.7 Agent
8.8 Agent Clusters
22.2 TypedArray Objects
24.1ArrayBuffer Objects
24.2 SharedArrayBuffer Objects
24.3 DataView Objects
24.4 The Atomics Object
27 Memory Model
2. 命令行啟動Chrome
Chrome 59.0.3071.115 中，默認(rèn)關(guān)閉了SharedArrayBuffer特性，我們需要用命令行啟動Chrome，
sudo "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --js-flags=--harmony-sharedarraybuffer --enable-blink-feature=SharedArrayBuffer
3. Web Workers
（1）全局安裝安裝httpserver命令行工具，
npm install -g httpserver
（2）在工作目錄下，啟動web server
cd ~/Test
httpserver
（3）新建三個文件，index.html，index.js和worker.js，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="index.js"></script>
</head>
<body>
</body>
</html>
// index.js
const worker = new Worker('./worker.js');
worker.postMessage(1);
worker.onmessage = e => {
console.log(`main receive message: ${e.data}`); //2
};
// worker.js
onmessage = e => {
console.log(`worker receive message: ${e.data}`); //1
postMessage(2);
};
（4）在瀏覽器中訪問index.html
http://localhost:8080/index.html
注：
（1）worker中不能再使用new Worker
（2）worker中使用全局變量onmessage接收消息，使用全局變量postMessage回傳消息。
（3）postMessage可以傳入多種類型的參數(shù)，不一定是字符串。
（4）onmessage使用e.data，而不是e，來接收postMessage傳入的對象。
4. SharedArrayBuffer
使用postMessage發(fā)送SharedArrayBuffer對象，
// index.js
const worker = new Worker('./worker.js');
const buffer = new SharedArrayBuffer(1024);
worker.postMessage(buffer);
// worker.js
onmessage = ({ data }) => {
console.log(data); // SharedArrayBuffer {}
};
5. 創(chuàng)建buffer的view
和ArrayBuffer一樣，我們需要創(chuàng)建view來訪問buffer。
例如：創(chuàng)建一個Int32Array view，
var buffer = new ArrayBuffer(8);
var view = new Int32Array(buffer);
postMessage可以直接發(fā)送一個view，
// index.js
const worker = new Worker('./worker.js');
const buffer = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 10);
var ia = new Int32Array(buffer);
worker.postMessage(ia);
// worker.js
onmessage = ({ data }) => {
console.log(data); //Int32Array(10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
};
6. Atomics
由于SharedArrayBuffer是共享的，一個寫操作會對所有共享該內(nèi)存的worker可見，
但是，一個寫操作需要多久才能同步到其他worker中，是不確定的。
ES規(guī)范中，提供了Atomics來保證讀寫操作的原子性。
寫操作：把100保存在ia索引為0的位置，
Atomics.store(ia, 0, 100);
讀操作：讀取ia索引為0位置的值，
while (Atomics.load(ia, 0) == 0){};
console.log(ia[0]);
這里使用了Atomics.load，類似自旋鎖，
如果ia的值一直沒有改變，就會無限循環(huán)等待下去，極大的浪費CPU時間。
Atomics還支持wake和wait兩種操作，類似于互斥鎖，
寫操作：
Atomics.wake在給定索引位置0處，喚起一個在wait queue中睡眠的worker
Atomics.store(ia, 0, 100);
Atomics.wake(ia, 0, 1);
讀操作：
Atomics.wake驗證ia索引位置0保存的值是否還是0，如果是的話就繼續(xù)睡眠，
Atomics.wait(ia, 0, 0);
console.log(ia[0]);
參考
Shared memory - a brief tutorial
Github: tc39/ecmascript_sharedmen
ECMAScript 2017 Language Specification
MDN: Web Workers API
MDN: SharedArrayBuffer
HTML Living Standard: web workers
