From 734aab7ab9470083b630b87e43eef45f26b2a481 Mon Sep 17 00:00:00 2001 From: allo Date: Sun, 13 Mar 2022 17:09:06 +0800 Subject: convert to md and sync with english version --- .../global_objects/sharedarraybuffer/index.md | 213 +++++++++++---------- 1 file changed, 108 insertions(+), 105 deletions(-) (limited to 'files/zh-cn/web/javascript/reference/global_objects') diff --git a/files/zh-cn/web/javascript/reference/global_objects/sharedarraybuffer/index.md b/files/zh-cn/web/javascript/reference/global_objects/sharedarraybuffer/index.md index d5c1f3d3ff..15bcd2e932 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/sharedarraybuffer/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/sharedarraybuffer/index.md @@ -2,135 +2,138 @@ title: SharedArrayBuffer slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer tags: - - ArrayBuffer - - Service Worker + - Class + - JavaScript - Shared Memory - SharedArrayBuffer - TypedArrays - - Web Worker - - Worker - - 共享内存 - - 实验的 - - 构造函数 translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer --- -
{{JSRef}}
+{{JSRef}} -

SharedArrayBuffer 对象用来表示一个通用的，固定长度的原始二进制数据缓冲区，类似于 {{jsxref("ArrayBuffer")}} 对象，它们都可以用来在共享内存（shared memory）上创建视图。与 ArrayBuffer 不同的是，SharedArrayBuffer 不能被分离。

+**`SharedArrayBuffer`** 对象用来表示一个通用的、固定长度的原始二进制数据缓冲区，类似于 {{jsxref("ArrayBuffer")}} 对象，它们都可以用来在共享内存（shared memory）上创建视图。与 `ArrayBuffer` 不同的是，**`SharedArrayBuffer`** 不能被{{Glossary("Transferable Objects", "转移")}}。 -
-

备注：作为对Spectre的响应，所有主流浏览器均默认于2018年1月5日禁用SharedArrayBuffer。 Chrome在启用了网站隔离功能的平台上的v67中重新启用了该功能，以防止出现Spectre风格的漏洞。

-
+## 描述 -

{{EmbedInteractiveExample("pages/js/sharedarraybuffer-constructor.html")}}

+### 分配及共享内存 -

语法

+为了将一个 {{jsxref("SharedArrayBuffer")}} 对象从一个用户代理共享到另一个用户代理（另一个页面的主进程或者当前页面的一个 `worker`）从而实现共享内存，我们需要运用  [`postMessage`](/zh-CN/docs/Web/API/Worker/postMessage) 和[结构化克隆算法](/zh-CN/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)。 -
new SharedArrayBuffer(length)
-
+结构化克隆算法接收 `SharedArrayBuffers` 对象，或被映射到一个新的 `SharedArrayBuffers` 对象上的 `TypedArrays` 对象。在这两种情况下，这个新的 `SharedArrayBuffer` 对象会被传递到目标用户代理的接收函数上，从而在目标用户代理产生一个新的私有 `SharedArrayBuffer` 对象（正如 {{jsxref("ArrayBuffer")}} 一样）。但是，这两个 `SharedArrayBuffer` 对象指向的共享数据块其实是同一个，所以某一代理对数据块的修改在另一个代理中可见。 -

参数

+```js +var sab = new SharedArrayBuffer(1024); +worker.postMessage(sab); +``` -
-
length
-
所创建的数组缓冲区的大小，以字节(byte)为单位。
-
+### 通过原子操作更新及同步共享内存 -

返回值

+共享内存能被同时创建和更新于 `worker` 线程或主线程。依赖于系统（CPU、操作系统、浏览器），变化传递给所有上下文环境需要一段时间。因此需要通过{{jsxref("Atomics", "原子", "", 1)}}操作来进行同步。 -

一个大小指定的新 SharedArrayBuffer 对象。其内容被初始化为 0。

+### 接受 SharedArrayBuffer 对象的API -

描述

+- {{domxref("WebGLRenderingContext.bufferData()")}} +- {{domxref("WebGLRenderingContext.bufferSubData()")}} +- {{domxref("WebGL2RenderingContext.getBufferSubData()")}} -

分配及共享内存

+### 安全需求 -

为了将一个{{jsxref("SharedArrayBuffer")}} 对象从一个用户代理共享到另一个用户代理（另一个页面的主进程或者当前页面的一个 worker ）从而实现共享内存，我们需要运用 postMessage 和结构化克隆算法（ structured cloning ）。

+为应对[幽灵漏洞](https://zh.wikipedia.org/wiki/幽灵漏洞)，所有主流浏览器均默认[于2018年1月5日禁用SharedArrayBuffer](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/)。在 2020 年，一种新的、安全的方法已经标准化，以重新启用 `SharedArrayBuffer`。通过一些安全措施，[`postMessage()`](/zh-CN/docs/Web/API/Window/postMessage) 将不再抛出有关 `SharedArrayBuffer` 对象的异常，跨线程共享内存也变得可用： -

结构化克隆算法接收被映射到一个新的 SharedArrayBuffers 对象上的 SharedArrayBuffers 对象与 TypedArrays 对象。在这两种映射下，这个新的 SharedArrayBuffer 对象会被传递到目标用户代理的接收函数上，导致在目标用户代理产生了一个新的私有 SharedArrayBuffer 对象（正如 {{jsxref("ArrayBuffer")}} 一样）。然而，这两个 SharedArrayBuffer 对象指向的共享数据块其实是同一个，并且在某一代理中的一个块的副作用将最终导致另一个代理具有可见性。

+作为基准需求，你的文档需处于[安全上下文](/zh-CN/docs/Web/Security/Secure_Contexts)中。 -
let sab = new SharedArrayBuffer(1024);
-worker.postMessage(sab);
-
+对于顶级文档，需要设置两个 HTTP 消息头以跨域隔离你的站点： + +- [`Cross-Origin-Opener-Policy`](/zh-CN/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) 设置为 `same-origin`（保护源站免受攻击） +- [`Cross-Origin-Embedder-Policy`](/zh-CN/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy) 设置为 `require-corp`（保护源站免受侵害） -

通过原子操作更新及同步来共享内存

+```plain +Cross-Origin-Opener-Policy: same-origin +Cross-Origin-Embedder-Policy: require-corp +``` -

共享内存能被同时创建和更新于工作者线程或主线程。依赖于系统（CPU，操作系统，浏览器），变化传递给所有上下文环境需要一段时间。需要通过 {{jsxref("Atomics", "atomic", "", 1)}} 操作来进行同步。

+为检查跨域隔离是否生效，你可以检查 [`crossOriginIsolated`](/zh-CN/docs/Web/API/crossOriginIsolated) 属性在窗口和 `worker` 上下文中是否可用： -

接受 SharedArrayBuffer 对象的API

+```js +if (crossOriginIsolated) { + // Post SharedArrayBuffer +} else { + // Do something else +} +``` - +参阅 [Planned changes to shared memory](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/Planned_changes)，以了解共享内存在浏览器中的变更计划（例如，Firefox 79）。 -

需要 new 运算符来构造

+### 始终使用 new 运算符来构造 SharedArrayBuffer -

SharedArrayBuffer 需要 {{jsxref("Operators/new", "new")}} 运算符来构造一个构造函数. 作为函数来调用一个 SharedArrayBuffer 构造函数时，如果不用 new 运算符，将会抛出一个 {{jsxref("TypeError")}} 异常。

+`SharedArrayBuffer` 必须使用 {{jsxref("Operators/new", "new")}} 运算符来构造。作为函数来调用 `SharedArrayBuffer()` 构造函数（如果不用 `new` 运算符），将会抛出 {{jsxref("TypeError")}} 异常。 -
var sab = SharedArrayBuffer(1024);
+```js example-bad
+var sab = SharedArrayBuffer(1024);
 // TypeError: calling a builtin SharedArrayBuffer constructor
-// 必须用 new 来构造
- -
var sab = new SharedArrayBuffer(1024);
- -

属性

- -
-
SharedArrayBuffer.length
-
SharedArrayBuffer 构造函数的 length 属性值为1。 
-
{{jsxref("SharedArrayBuffer.prototype")}}
-
允许所有 SharedArrayBuffer 对象的附加属性。
-
- -

SharedArrayBuffer 原型对象

- -

所有 SharedArrayBuffer 实例继承自 {{jsxref("SharedArrayBuffer.prototype")}}。

- -

属性

- -

{{page('zh-CN/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype','Properties')}}

- -

方法

- -

{{page('zh-CN/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype','Methods')}}

- -

规范

- - - - - - - - - - - - - - - - - - - -
规范状态备注
{{SpecName('ESDraft', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}{{Spec2('ESDraft')}}Initial definition in ES2017.
{{SpecName('ES8', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}{{Spec2('ES8')}}
- -

浏览器兼容性

- -

{{Compat("javascript.builtins.SharedArrayBuffer")}}

- -

相关链接

- - +// without new is forbidden +``` + +```js example-good +var sab = new SharedArrayBuffer(1024); +``` + +## 构造函数 + +- [`SharedArrayBuffer()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/SharedArrayBuffer) + - : 创建一个 `SharedArrayBuffer` 对象。 + +## 实例属性 + +- {{jsxref("SharedArrayBuffer.prototype.byteLength")}} + - : 数组的大小（以字节为单位）。这是在构造数组时建立的，不能更改（**只读**）。 + +## 实例方法 + +- {{jsxref("SharedArrayBuffer.slice", "SharedArrayBuffer.prototype.slice(begin, end)")}} + - : 返回一个新的 `SharedArrayBuffer`，其为源数组从 `begin` 字节到 `end` 字节（不含 `end` 字节）的拷贝。若 `begin` 或 `end` 为负数，则表示从数组末尾开始的索引。 + +## 示例 + +### 创建一个新的 SharedArrayBuffer + +```js +var sab = new SharedArrayBuffer(1024); +``` + +### 截取 SharedArrayBuffer + +```js +sab.slice(); // SharedArrayBuffer { byteLength: 1024 } +sab.slice(2); // SharedArrayBuffer { byteLength: 1022 } +sab.slice(-2); // SharedArrayBuffer { byteLength: 2 } +sab.slice(0, 1); // SharedArrayBuffer { byteLength: 1 } +``` + +### 在 WebGL buffer 中使用 + +```js +const canvas = document.querySelector('canvas'); +const gl = canvas.getContext('webgl'); +const buffer = gl.createBuffer(); +gl.bindBuffer(gl.ARRAY_BUFFER, buffer); +gl.bufferData(gl.ARRAY_BUFFER, sab, gl.STATIC_DRAW); +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{jsxref("Atomics")}} +- {{jsxref("ArrayBuffer")}} +- [JavaScript typed arrays](/zh-CN/docs/Web/JavaScript/Typed_arrays) +- [Web Workers](/zh-CN/docs/Web/API/Web_Workers_API) +- [parlib-simple](https://github.com/lars-t-hansen/parlib-simple)——一个提供同步和工作分配抽象的简单库。 +- [Shared Memory – a brief tutorial](https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md) +- [A Taste of JavaScript's New Parallel Primitives – Mozilla Hacks](https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/) -- cgit v1.2.3-54-g00ecf