深入理解ES8的新特性SharedArrayBuffer

简介: 深入理解ES8的新特性SharedArrayBuffer

简介


ES8引入了SharedArrayBuffer和Atomics,通过共享内存来提升workers之间或者worker和主线程之间的消息传递速度。


本文将会详细的讲解SharedArrayBuffer和Atomics的实际应用。


Worker和Shared memory


在nodejs中,引入了worker_threads模块,可以创建Worker. 而在浏览器端,可以通过web workers来使用Worker()来创建新的worker。


这里我们主要关注一下浏览器端web worker的使用。


我们看一个常见的worker和主线程通信的例子,主线程:


var w = new Worker("myworker.js")
w.postMessage("hi");     // send "hi" to the worker
w.onmessage = function (ev) {
  console.log(ev.data);  // prints "ho"
}


myworker的代码:


onmessage = function (ev) {
  console.log(ev.data);  // prints "hi"
  postMessage("ho");     // sends "ho" back to the creator
}


我们通过postMessage来发送消息,通过onmessage来监听消息。


消息是拷贝之后,经过序列化之后进行传输的。在解析的时候又会进行反序列化,从而降低了消息传输的效率。


为了解决这个问题,引入了shared memory的概念。


我们可以通过SharedArrayBuffer来创建Shared memory。


考虑下上面的例子,我们可把消息用SharedArrayBuffer封装起来,从而达到内存共享的目的。


//发送消息
var sab = new SharedArrayBuffer(1024);  // 1KiB shared memory
w.postMessage(sab)
//接收消息
var sab;
onmessage = function (ev) {
   sab = ev.data;  // 1KiB shared memory, the same memory as in the parent
}


上面的这个例子中,消息并没有进行序列化或者转换,都使用的是共享内存。


ArrayBuffer和Typed Array


SharedArrayBuffer和ArrayBuffer一样是最底层的实现。为了方便程序员的使用,在SharedArrayBuffer和ArrayBuffer之上,提供了一些特定类型的Array。比如Int8Array,Int32Array等等。


这些Typed Array被称为views。


我们看一个实际的例子,如果我们想在主线程中创建10w个质数,然后在worker中获取这些质数该怎么做呢?


首先看下主线程:


var sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 100000); // 100000 primes
var ia = new Int32Array(sab);  // ia.length == 100000
var primes = new PrimeGenerator();
for ( let i=0 ; i < ia.length ; i++ )
   ia[i] = primes.next();
w.postMessage(ia);


主线程中,我们使用了Int32Array封装了SharedArrayBuffer,然后用PrimeGenerator来生成prime,存储到Int32Array中。


下面是worker的接收:


var ia;
onmessage = function (ev) {
  ia = ev.data;        // ia.length == 100000
  console.log(ia[37]); // prints 163, the 38th prime
}


并发的问题和Atomics


上面我们获取到了ia[37]的值。因为是共享的,所以任何能够访问到ia[37]的线程对该值的改变,都可能影响其他线程的读取操作。


比如我们给ia[37]重新赋值为123。虽然这个操作发生了,但是其他线程什么时候能够读取到这个数据是未知的,依赖于CPU的调度等等外部因素。


为了解决这个问题,ES8引入了Atomics,我们可以通过Atomics的store和load功能来修改和监控数据的变化:


console.log(ia[37]);  // Prints 163, the 38th prime
Atomics.store(ia, 37, 123);


我们通过store方法来向Array中写入新的数据。


然后通过load来监听数据的变化:


while (Atomics.load(ia, 37) == 163)
  ;
console.log(ia[37]);  // Prints 123


还记得java中的重排序吗?


在java中,虚拟机在不影响程序执行结果的情况下,会对java代码进行优化,甚至是重排序。最终导致在多线程并发环境中可能会出现问题。


在JS中也是一样,比如我们给ia分别赋值如下:


ia[42] = 314159;  // was 191
ia[37] = 123456;  // was 163


按照程序的书写顺序,是先给42赋值,然后给37赋值。


console.log(ia[37]);
console.log(ia[42]);

但是因为重排序的原因,可能37的值变成123456之后,42的值还是原来的191。


我们可以使用Atomics来解决这个问题,所有在Atomics.store之前的写操作,在Atomics.load发送变化之前都会发生。也就是说通过使用Atomics可以禁止重排序。


ia[42] = 314159;  // was 191
Atomics.store(ia, 37, 123456);  // was 163
while (Atomics.load(ia, 37) == 163)
  ;
console.log(ia[37]);  // Will print 123456
console.log(ia[42]);  // Will print 314159


我们通过监测37的变化,如果发生了变化,则我们可以保证之前的42的修改已经发生。

同样的,我们知道在java中++操作并不是一个原子性操作,在JS中也一样。


在多线程环境中,我们需要使用Atomics的add方法来替代++操作,从而保证原子性。


注意,Atomics只适用于Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array or Uint32Array。


上面例子中,我们使用while循环来等待一个值的变化,虽然很简单,但是并不是很有效。


while循环会占用CPU资源,造成不必要的浪费。


为了解决这个问题,Atomics引入了wait和wake操作。


我们看一个应用:


console.log(ia[37]);  // Prints 163
Atomics.store(ia, 37, 123456);
Atomics.wake(ia, 37, 1);


我们希望37的值变化之后通知监听在37上的一个数组。


Atomics.wait(ia, 37, 163);
console.log(ia[37]);  // Prints 123456


当ia37的值是163的时候,线程等待在ia37上。直到被唤醒。


这就是一个典型的wait和notify的操作。


使用Atomics来创建lock


我们来使用SharedArrayBuffer和Atomics创建lock。


我们需要使用的是Atomics的CAS操作:


compareExchange(typedArray: Int8Array | Uint8Array | Int16Array | Uint16Array | Int32Array | Uint32Array, index: number, expectedValue: number, replacementValue: number): number;


只有当typedArray[index]的值 = expectedValue 的时候,才会使用replacementValue来替换。 同时返回typedArray[index]的原值。


我们看下lock怎么实现:


const UNLOCKED = 0;
const LOCKED_NO_WAITERS = 1;
const LOCKED_POSSIBLE_WAITERS = 2;
    lock() {
        const iab = this.iab;
        const stateIdx = this.ibase;
        var c;
        if ((c = Atomics.compareExchange(iab, stateIdx,
        UNLOCKED, LOCKED_NO_WAITERS)) !== UNLOCKED) {
            do {
                if (c === LOCKED_POSSIBLE_WAITERS
                || Atomics.compareExchange(iab, stateIdx,
                LOCKED_NO_WAITERS, LOCKED_POSSIBLE_WAITERS) !== UNLOCKED) {
                    Atomics.wait(iab, stateIdx,
                        LOCKED_POSSIBLE_WAITERS, Number.POSITIVE_INFINITY);
                }
            } while ((c = Atomics.compareExchange(iab, stateIdx,
            UNLOCKED, LOCKED_POSSIBLE_WAITERS)) !== UNLOCKED);
        }
    }


UNLOCKED表示目前没有上锁,LOCKED_NO_WAITERS表示已经上锁了,LOCKED_POSSIBLE_WAITERS表示上锁了,并且还有其他的worker在等待这个锁。


iab表示要上锁的SharedArrayBuffer,stateIdx是Array的index。


再看下tryLock和unlock:


tryLock() {
        const iab = this.iab;
        const stateIdx = this.ibase;
        return Atomics.compareExchange(iab, stateIdx, UNLOCKED, LOCKED_NO_WAITERS) === UNLOCKED;
    }
    unlock() {
        const iab = this.iab;
        const stateIdx = this.ibase;
        var v0 = Atomics.sub(iab, stateIdx, 1);
        // Wake up a waiter if there are any
        if (v0 !== LOCKED_NO_WAITERS) {
            Atomics.store(iab, stateIdx, UNLOCKED);
            Atomics.wake(iab, stateIdx, 1);
        }
    }
相关文章
|
8月前
|
JavaScript 前端开发 开发者
ES6的常用新特性17条
ES6,也称为ECMAScript 2015,是JavaScript语言的一个重大更新,它引入了许多新的语法特性。以下是ES6的一些主要语法
|
2月前
|
前端开发
ES6 中常用的新特性
ES6 中常用的新特性
|
5月前
|
JavaScript 前端开发
ES6新特性(一)
ES6新特性(一)
|
存储 JavaScript 前端开发
ES6新特性
ES6新增特性详细内容
|
8月前
|
JavaScript 前端开发 开发者
es6的新特性
es6的新特性
61 7
|
JavaScript 前端开发 网络架构
关于ES6新特性的总结 1
关于ES6新特性的总结
61 0
|
8月前
|
前端开发
ES6 部分新特性使用
ES6 部分新特性使用
49 0
|
JavaScript 前端开发 开发者
ES6 新特性
这是每个前端开发者都应该掌握的技能。ES6是JavaScript的一个重要的版本升级,它带来了许多新特性和语法糖,让我们的代码更加简洁高效。无论你是新手还是有经验的开发者,掌握ES6都会让你的编码变得更加愉快和高效。那么,让我们开始吧!
|
前端开发
关于ES6新特性的总结 2
关于ES6新特性的总结
45 0
|
Java
es6中简单常用的新特性
es6中简单常用的新特性
61 0