JavaScript 进阶实战课
石川
JavaScript Patterns and Anti-Patterns 等开源项目创建者,O'Reilly 技术评审
15066 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 47 讲
开篇词 (1讲)
JavaScript 进阶实战课
15
15
1.0x
00:00/00:00
登录|注册

28|性能:如何理解JavaScript中的并行、并发?(下)

你好,我是石川。
在上一讲中,我们初步介绍了并发和并行的概念,对比了不同语言对多线程开发的支持。我们也通过 postMessage,学习了用信息传递的方式在主线程和 Worker 线程间实现交互。但是,我们也发现了 JavaScript 对比其它语言,在多线程方面还有不足,似乎信息传递本身不能让数据在不同的线程中真正做到共享,而只是互传拷贝的信息
所以今天,我们再来看看如何能在信息互传的基础上,让数据真正地在多线程间共享和修改。不过更重要的是,这种修改是不是真的有必要呢。

SAB+Atomics 模式

前面,我们说过对象的数据结构在线程间是不能共享的。如果通过 postMessage 来做信息传递的话,需要数据先被深拷贝。那有没有什么办法能让不同的线程同时访问一个数据源呢?答案是有,要做到数据的共享,也就是内存共享,我们就需要用到 SAB(SharedArrayBuffer)Atomics。下面,我们先从 SAB 开始了解。

共享的 ArrayBuffer

SAB 是一个共享的 ArrayBuffer 内存块。在说到 SAB 前,我们先看看 ArrayBuffer 是什么,这还要从内存说起。我们可以把内存想象成一个储藏室中的货架,为了找到存放的物品,有从 1-9 这样的地址。而里面存储的物品是用字节表示的,字节通常是内存中最小的值单元,里面可以有不同数量的比特(bit),比如一个字节(byte)里可以有 8、32 或 64 比特。我们可以看到 bit 和 byte 它俩的英文写法和读音有些相似,所以这里要注意不要把字节和比特混淆
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

JavaScript中的并行和并发是一个重要的话题,本文介绍了如何在JavaScript中实现多线程并发和并行操作。文章首先介绍了SharedArrayBuffer和Atomics这两个新的特性,它们可以让不同的线程同时访问一个数据源,并且保证数据的原子性操作。SharedArrayBuffer是一个共享的ArrayBuffer内存块,而Atomics提供了一些内置的方法来进行原子性的操作。文章还解释了在单个操作中的竞争条件,以及如何通过Atomics提供的运算方法来避免这一类问题。通过这些新特性,JavaScript可以更好地支持多线程开发,实现并行和并发操作,为开发者提供了更多的控制,来根据使用场景更细粒度地管理内存的分配,提高程序的性能。 文章还介绍了在JavaScript中通过futex来实现互斥锁的作用,以及指令顺序造成的竞争条件,并提出了解决方法。此外,文章还提到了在使用SharedArrayBuffer时需要注意数据的序列化,以及介绍了Actor Model模式作为SAB+Atomics的一个替代方案。Actor Model模式通过线程间的信息传递来避免共享内存的问题,更符合JavaScript的设计。 总的来说,本文通过介绍SharedArrayBuffer和Atomics等新特性,以及讨论竞争条件和解决方案,为读者提供了在JavaScript中实现多线程并发和并行操作的方法。同时,文章还指出了Actor Model模式作为一种更易于在JavaScript中使用的替代方案,为读者提供了更多选择。文章内容丰富,对于想要了解JavaScript多线程开发的读者来说,具有很高的参考价值。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《JavaScript 进阶实战课》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(2)

  • 最新
  • 精选
  • 郭慧娟
    waitAsync 和 热路径 这里不太了解,有没有什么资料可以推荐一下

    作者回复: 可以参考MDN上面的描述看看:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/waitAsync

    2022-12-04归属地:海南
    1
  • 郭慧娟
    https://static001.geekbang.org/resource/image/f8/6c/f81f3b9e0d9347ffc9d1a23e0758ae6c.jpeg?wh=1920x1080 这个图片感觉表意不太明白 参考链接 https://juejin.cn/post/7016962394479919118 https://github.com/mdn/dom-examples/tree/main/web-workers/simple-web-worker https://developer.chrome.com/blog/enabling-shared-array-buffer/

    作者回复: SharedArrayBuffer 和 ArrayBuffer 的相同点是它们都是基于postMessage和结构化克隆算法的;区别是,SharedArrayBuffer 在传递和接收两端的对象指向的是同一块内存。

    2022-12-04归属地:海南
    1
收起评论
显示
设置
留言
2
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部