Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[zh-cn] sync translated content #23795

Merged
merged 3 commits into from
Sep 27, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion files/zh-cn/_redirects.txt
Original file line number Diff line number Diff line change
Expand Up @@ -1909,7 +1909,7 @@
/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB /zh-CN/docs/Web/API/Window/indexedDB
/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext /zh-CN/docs/Web/API/Window/isSecureContext
/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/origin /zh-CN/docs/Web/API/Window/origin
/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask /zh-CN/docs/Web/API/queueMicrotask
/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask /zh-CN/docs/Web/API/Window/queueMicrotask
/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /zh-CN/docs/Web/API/setInterval
/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout /zh-CN/docs/Web/API/setTimeout
/zh-CN/docs/Web/API/WindowTimers/clearTimeout /zh-CN/docs/Web/API/clearTimeout
Expand Down Expand Up @@ -2034,9 +2034,11 @@
/zh-CN/docs/Web/API/notification/onshow /zh-CN/docs/Web/API/Notification/show_event
/zh-CN/docs/Web/API/origin /zh-CN/docs/Web/API/Window/origin
/zh-CN/docs/Web/API/performance_property /zh-CN/docs/Web/API/Window/performance
/zh-CN/docs/Web/API/queueMicrotask /zh-CN/docs/Web/API/Window/queueMicrotask
/zh-CN/docs/Web/API/range.getBoundingClientRect /zh-CN/docs/Web/API/Range/getBoundingClientRect
/zh-CN/docs/Web/API/range.startOffset /zh-CN/docs/Web/API/Range/startOffset
/zh-CN/docs/Web/API/range.surroundContents /zh-CN/docs/Web/API/Range/surroundContents
/zh-CN/docs/Web/API/structuredClone /zh-CN/docs/Web/API/Window/structuredClone
/zh-CN/docs/Web/API/window.requestAnimationFrame /zh-CN/docs/Web/API/Window/requestAnimationFrame
/zh-CN/docs/Web/API/剪贴板_API /zh-CN/docs/Web/API/Clipboard_API
/zh-CN/docs/Web/API/开发式平台 /zh-CN/docs/Web/API/Push_API
Expand Down
8 changes: 4 additions & 4 deletions files/zh-cn/_wikihistory.json
Original file line number Diff line number Diff line change
Expand Up @@ -15561,6 +15561,10 @@
"modified": "2019-03-24T00:15:16.672Z",
"contributors": ["guoyi", "jjc", "teoli", "khalid32", "ziyunfei"]
},
"Web/API/Window/queueMicrotask": {
"modified": "2020-10-15T22:23:11.878Z",
"contributors": ["RainSlide"]
},
"Web/API/Window/rejectionhandled_event": {
"modified": "2020-10-15T22:26:00.037Z",
"contributors": ["mengli404"]
Expand Down Expand Up @@ -16280,10 +16284,6 @@
"Hawkeyes_Wind"
]
},
"Web/API/queueMicrotask": {
"modified": "2020-10-15T22:23:11.878Z",
"contributors": ["RainSlide"]
},
"Web/API/setInterval": {
"modified": "2020-11-25T18:16:55.949Z",
"contributors": [
Expand Down
10 changes: 6 additions & 4 deletions files/zh-cn/glossary/deep_copy/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ let ingredients_list_deepcopy = JSON.parse(JSON.stringify(ingredients_list));
由于深拷贝与其源对象不共享引用,因此对深拷贝所做的任何更改都不会影响源对象。

```js
// 改变 ingredients_list_deepcopy 中 'list' 属性的值。
// 改变 ingredients_list_deepcopy 中list属性的值。
ingredients_list_deepcopy[1].list = ["rice flour", "water"];
// ingredients_list 的“list”属性不会发生变化。
console.log(ingredients_list[1].list);
Expand All @@ -49,9 +49,11 @@ console.log(ingredients_list[1].list);

然而,虽然上面代码中的对象足够简单,可以[序列化](/zh-CN/docs/Glossary/Serialization),但许多 JavaScript 对象根本不能序列化——例如,[函数](/zh-CN/docs/Web/JavaScript/Guide/Functions)(带有闭包)、[Symbol](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol)、在 [HTML DOM API](/zh-CN/docs/Web/API/HTML_DOM_API) 中表示 HTML 元素的对象、递归数据以及许多其他对象。在这种情况下,调用 `JSON.stringify()` 来序列化对象将会失败。所以没有办法对这些对象进行深拷贝。

你也可以使用 Web API [`structuredClone()`](/zh-CN/docs/Web/API/structuredClone) 来创建深拷贝。`structuredClone()` 的优点是允许源代码中的[可转移对象](/zh-CN/docs/Web/API/Web_Workers_API/Transferable_objects)*转移*到新的副本,而不仅仅是克隆。它还能处理更多的数据类型,如 `Error`。但是请注意,`structuredClone()` 不是 JavaScript 语言本身的特性——相反,它是浏览器和任何其他实现了 [`window`](/zh-CN/docs/Web/API/Window) 这样全局对象的 JavaScript 运行时的一个特性。调用 `structuredClone()` 来克隆一个不可序列化的对象,与调用 `JSON.stringify()` 来序列化一个不可序列化的对象一样,会失败。
你也可以使用 Web API {{DOMxRef("Window.structuredClone", "structuredClone()")}} 来创建深拷贝。`structuredClone()` 的优点是允许源代码中的[可转移对象](/zh-CN/docs/Web/API/Web_Workers_API/Transferable_objects)*转移*到新的副本,而不仅仅是克隆。它还能处理更多的数据类型,如 `Error`。但是请注意,`structuredClone()` 不是 JavaScript 语言本身的特性——相反,它是浏览器和任何其他实现了 [`window`](/zh-CN/docs/Web/API/Window) 这样全局对象的 JavaScript 运行时的一个特性。调用 `structuredClone()` 来克隆一个不可序列化的对象,与调用 `JSON.stringify()` 来序列化一个不可序列化的对象一样,会失败。

## 参见

- {{glossary("Shallow copy", "浅拷贝")}}
- [`window.structuredClone()`](/zh-CN/docs/Web/API/structuredClone)
- 相关术语:
- {{glossary("Shallow copy", "浅拷贝")}}
- {{DOMxRef("Window.structuredClone()")}}
- {{DOMxRef("WorkerGlobalScope.structuredClone()")}}
2 changes: 1 addition & 1 deletion files/zh-cn/glossary/serializable_object/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ slug: Glossary/Serializable_object

{{GlossarySidebar}}

**可序列化对象**(Serializable object)是可以在任何 JavaScript 环境(领域,realm)中序列化、反序列化的对象。例如,这允许将此类对象存储在磁盘上并在以后进行恢复,或使用 {{domxref("structuredClone()")}} 对它们进行拷贝,又或者使用 {{domxref("DedicatedWorkerGlobalScope.postMessage()")}} 在 Worker 之间共享它们。
**可序列化对象**(Serializable object)是可以在任何 JavaScript 环境(领域,realm)中序列化、反序列化的对象。例如,这允许将此类对象存储在磁盘上并在以后进行恢复,或使用 {{DOMxRef("Window.structuredClone", "structuredClone()")}} 对它们进行拷贝,又或者使用 {{domxref("DedicatedWorkerGlobalScope.postMessage()")}} 在 Worker 之间共享它们。

序列化可能不包括原始对象的所有属性和其他方面的内容。例如,对 {{domxref("DOMException")}} 的序列化必须包含 `name``message` 属性,但是否包含其他属性则取决于具体实现。因此,反序列化的对象并不一定是与原始对象相同的拷贝。但是,反序列化得到的新的对象将会是一个{{glossary("deep copy", "深拷贝")}},因此任何从原始对象序列化并反序列化到新的对象的属性都不会和原始对象共享任何引用。

Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/api/domexception/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ slug: Web/API/DOMException

每个异常都有一个**名称**(name),一个采用驼峰命名法的简短字符串,用于描述识别错误或异常情况。

`DOMException` 是一个{{Glossary("Serializable object","可序列化对象")}},因此可以使用 {{domxref("structuredClone()")}} 克隆,或使用 {{domxref("Worker.postMessage()", "postMessage()")}} 在 [Worker](/zh-CN/docs/Web/API/Worker) 之间复制。
`DOMException` 是一个{{Glossary("Serializable object","可序列化对象")}},因此可以使用 {{DOMxRef("Window.structuredClone", "structuredClone()")}} 克隆,或使用 {{domxref("Worker.postMessage()", "postMessage()")}} 在 [Worker](/zh-CN/docs/Web/API/Worker) 之间复制。

## 构造函数

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ greetUser("Veronica");
## 参见

- [微任务指南](/zh-CN/docs/Web/API/HTML_DOM_API/Microtask_guide)
- {{domxref("queueMicrotask()")}}
- {{domxref("Window.queueMicrotask()")}}
- [异步 JavaScript](/zh-CN/docs/Learn/JavaScript/Asynchronous)
- [异步 JavaScript 简介](/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing)
- [合作的异步 JavaScript:超时和间隔](/zh-CN/docs/Learn/JavaScript/Asynchronous)
Expand Down
18 changes: 8 additions & 10 deletions files/zh-cn/web/api/html_dom_api/microtask_guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ slug: Web/API/HTML_DOM_API/Microtask_guide

一个**微任务**(microtask)就是一个简短的函数,当创建该微任务的函数执行之后,*并且*只有当 Javascript 调用栈为空,而控制权尚未返还给被{{Glossary("user agent", "用户代理")}}用来驱动脚本执行环境的事件循环之前,该微任务才会被执行。事件循环既可能是浏览器的主事件循环也可能是被一个 [web worker](/zh-CN/docs/Web/API/Web_Workers_API) 所驱动的事件循环。这使得给定的函数在没有其他脚本执行干扰的情况下运行,也保证了微任务能在用户代理有机会对该微任务带来的行为做出反应之前运行。

JavaScript 中的 [promise](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 和 [Mutation Observer API](/zh-CN/docs/Web/API/MutationObserver) 都使用微任务队列去运行它们的回调函数,但当能够推迟工作直到当前事件循环过程完结时,也是可以执行微任务的时机。为了允许第三方库、框架、polyfill 能使用微任务,在 {{domxref("Window")}} 和 {{domxref("Worker")}} 接口上暴露了 {{domxref("queueMicrotask()")}} 方法。
JavaScript 中的 [promise](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 和 [Mutation Observer API](/zh-CN/docs/Web/API/MutationObserver) 都使用微任务队列去运行它们的回调函数,但当能够推迟工作直到当前事件循环过程完结时,也是可以执行微任务的时机。为了允许第三方库、框架、polyfill 能使用微任务,在 {{domxref("Window")}} 和 {{domxref("WorkerGlobalScope")}} 接口上暴露了 {{domxref("Window.queueMicrotask()", "queueMicrotask()")}} 方法。

## 任务 vs 微任务

Expand All @@ -33,7 +33,7 @@ JavaScript 中的 [promise](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/

首先,每当一个任务存在,事件循环都会检查该任务是否正把控制权交给其他 JavaScript 代码。如若不然,事件循环就会运行微任务队列中的所有微任务。接下来微任务循环会在事件循环的每次迭代中被处理多次,包括处理完事件和其他回调之后。

其次,如果一个微任务通过调用 {{domxref("queueMicrotask()")}}, 向队列中加入了更多的微任务,则那些新加入的微任务 _会早于下一个任务运行_。这是因为事件循环会持续调用微任务直至队列中没有留存的,即使是在有更多微任务持续被加入的情况下。
其次,如果一个微任务通过调用 {{domxref("Window.queueMicrotask()", "queueMicrotask()")}},向队列中加入了更多的微任务,则那些新加入的微任务*会早于下一个任务运行*。这是因为事件循环会持续调用微任务直至队列中没有留存的,即使是在有更多微任务持续被加入的情况下。

> [!WARNING]
> 因为微任务自身可以入列更多的微任务,且事件循环会持续处理微任务直至队列为空,那么就存在一种使得事件循环无尽处理微任务的真实风险。如何处理递归增加微任务是要谨慎而行的。
Expand All @@ -44,11 +44,11 @@ JavaScript 中的 [promise](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/

### 入列微任务

就其本身而言,应该使用微任务的典型情况,要么只有在没有其他办法的时候,要么是当创建框架或库时需要使用微任务达成其功能。虽然在过去要使得入列微任务成为可能有可用的技巧(比如创建一个立即 resolve 的 promise),但新加入的 {{domxref("queueMicrotask()")}} 方法增加了一种标准的方式,可以安全的引入微任务而避免使用额外的技巧。
就其本身而言,应该使用微任务的典型情况,要么只有在没有其他办法的时候,要么是当创建框架或库时需要使用微任务达成其功能。虽然在过去要使得入列微任务成为可能有可用的技巧(比如创建一个立即兑现的 promise),但新加入的 {{domxref("Window.queueMicrotask()", "queueMicrotask()")}} 方法增加了一种标准的方式,可以安全的引入微任务而避免使用额外的技巧。

通过引入 `queueMicrotask()`,由晦涩地使用 promise 去创建微任务而带来的风险就可以被避免了。举例来说,当使用 promise 创建微任务时,由回调抛出的异常被报告为 rejected promises 而不是标准异常。同时,创建和销毁 promise 带来了事件和内存方面的额外开销,这是正确入列微任务的函数应该避免的。

简单的传入一个 JavaScript {{jsxref("Function")}} ,以在 `queueMicrotask()` 方法中处理微任务时供其上下文调用即可;取决于当前执行上下文, `queueMicrotask()` 以定义的形式被暴露在 {{domxref("Window")}} 或 {{domxref("Worker")}} 接口上。
简单的传入一个 JavaScript {{jsxref("Function")}},以在 `queueMicrotask()` 方法中处理微任务时供其上下文调用即可;取决于当前执行上下文,`queueMicrotask()` 以定义的形式被暴露在 {{domxref("Window")}} 或 {{domxref("Worker")}} 接口上。

```js
queueMicrotask(() => {
Expand Down Expand Up @@ -175,9 +175,7 @@ let sendMessage = (message) => {
};
```

当 `sendMessage()`

被调用时,指定的消息首先被推入消息队列数组。接着事情就变得有趣了。
当 `sendMessage()` 被调用时,指定的消息首先被推入消息队列数组。接着事情就变得有趣了。

如果我们刚加入数组的消息是第一条,就入列一个将会发送一个批处理的微任务。照旧,当 JavaScript 执行路径到达顶层,恰在运行回调之前,那个微任务将会执行。这意味着之后的间歇期内造成的对 `sendMessage()` 的任何调用都会将其各自的消息推入消息队列,但囿于入列微任务逻辑之前的数组长度检查,不会有新的微任务入列。

Expand All @@ -204,7 +202,7 @@ let logElem = document.getElementById("log");
let log = (s) => (logElem.innerHTML += s + "<br>");
```

在下面的代码中,我们看到对 {{domxref("queueMicrotask()")}} 的一次调用被用来调度一个微任务以使其运行。这次调用包含了 `log()`,一个简单的向屏幕输出文字的自定义函数。
在下面的代码中,我们看到对 {{domxref("Window.queueMicrotask()", "queueMicrotask()")}} 的一次调用被用来调度一个微任务以使其运行。这次调用包含了 `log()`,一个简单的向屏幕输出文字的自定义函数。

```js
log("Before enqueueing the microtask");
Expand Down Expand Up @@ -233,7 +231,7 @@ let logElem = document.getElementById("log");
let log = (s) => (logElem.innerHTML += s + "<br>");
```

在下面的代码中,我们看到对 {{domxref("queueMicrotask()")}} 的一次调用被用来调度一个微任务以使其运行。这次调用包含了 `log()`,一个简单的向屏幕输出文字的自定义函数。
在下面的代码中,我们看到对 {{domxref("Window.queueMicrotask()", "queueMicrotask()")}} 的一次调用被用来调度一个微任务以使其运行。这次调用包含了 `log()`,一个简单的向屏幕输出文字的自定义函数。

以下代码调度了一个 0 毫秒后触发的 timeout,而后入列了一个微任务。前后被对 `log()` 的调用包住,输出附加的信息。

Expand Down Expand Up @@ -300,7 +298,7 @@ log("Main program exiting");
## 参见

- [In depth: Microtasks and the JavaScript runtime environment](/zh-CN/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth)
- {{domxref("queueMicrotask()")}}
- {{domxref("Window.queueMicrotask()", "queueMicrotask()")}}
- [Asynchronous JavaScript](/zh-CN/docs/Learn/JavaScript/Asynchronous)

- [General asynchronous programming concepts](/zh-CN/docs/Learn/JavaScript/Asynchronous/Concepts)
Expand Down
5 changes: 3 additions & 2 deletions files/zh-cn/web/api/settimeout/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -385,5 +385,6 @@ function clearMessage() {
- [`core-js` 中允许向回调函数传递参数的 `setTimeout` 版本的 polyfill](https://github.com/zloirock/core-js#settimeout-and-setinterval)
- {{domxref("clearTimeout")}}
- {{domxref("setInterval()")}}
- {{domxref("window.requestAnimationFrame")}}
- {{domxref("queueMicrotask()")}}
- {{domxref("Window.requestAnimationFrame")}}
- {{domxref("Window.queueMicrotask()")}}
- {{domxref("WorkerGlobalScope.queueMicrotask()")}}
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@ slug: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
- {{domxref("clearTimeout()")}}
- {{domxref("createImageBitmap()")}}
- {{domxref("WorkerGlobalScope.dump()", "dump()")}} {{non-standard_inline}}
- {{domxref("fetch()")}}
- {{domxref("queueMicrotask()")}}
- {{domxref("WorkerGlobalScope.fetch()", "fetch()")}}
- {{domxref("WorkerGlobalScope.queueMicrotask()", "queueMicrotask()")}}
- {{domxref("reportError()")}}
- {{domxref("setInterval()")}}
- {{domxref("setTimeout()")}}
- {{domxref("structuredClone()")}}
- {{DOMxRef("WorkerGlobalScope.structuredClone", "structuredClone()")}}
- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}}(仅专用 worker)
- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()", "cancelAnimationFrame()")}}(仅专用 worker)

Expand Down
6 changes: 3 additions & 3 deletions files/zh-cn/web/api/web_workers_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@ worker 在一个与当前 {{DOMxRef("window")}} 不同的全局上下文中运
- {{domxref("clearTimeout()")}}
- {{domxref("createImageBitmap()")}}
- {{domxref("WorkerGlobalScope.dump()", "dump()")}} {{non-standard_inline}}
- {{domxref("fetch()")}}
- {{domxref("queueMicrotask()")}}
- {{domxref("WorkerGlobalScope.fetch()", "fetch()")}}
- {{domxref("WorkerGlobalScope.queueMicrotask()", "queueMicrotask()")}}
- {{domxref("reportError()")}}
- {{domxref("setInterval()")}}
- {{domxref("setTimeout()")}}
- {{domxref("structuredClone()")}}
- {{DOMxRef("WorkerGlobalScope.structuredClone", "structuredClone()")}}
- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}}(仅专用 worker)
- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()", "cancelAnimationFrame()")}}(仅专用 worker)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ slug: Web/API/Web_Workers_API/Structured_clone_algorithm

- [HTML 规范:安全地传递结构化数据](https://html.spec.whatwg.org/multipage/infrastructure.html#safe-passing-of-structured-data)
- [可转移对象](/zh-CN/docs/Web/API/Web_Workers_API/Transferable_objects)
- {{domxref("structuredClone()")}}
- {{DOMxRef("Window.structuredClone()")}}
- {{DOMxRef("WorkerGlobalScope.structuredClone()")}}
- {{domxref("window.history")}}
- {{domxref("window.postMessage()")}}
- [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ slug: Web/API/Web_Workers_API/Transferable_objects

*可转移对象*通常用于共享资源,该资源一次仅能安全地暴露在一个 JavaScript 线程中。例如,{{jsxref("ArrayBuffer")}} 是一个拥有内存块的可转移对象。当此类缓冲区(buffer)在线程之间传输时,相关联的内存资源将从原始的缓冲区分离出来,并且附加到新线程创建的缓冲区对象中。原始线程中的缓冲区对象不再可用,因为它不再拥有属于自己的内存资源了。

使用 {{domxref("structuredClone()")}} 创建对象的深层拷贝时,也可以使用转移。克隆操作后,传输的资源将被移动到克隆的对象,而不是复制。
使用 {{DOMxRef("WorkerGlobalScope.structuredClone", "structuredClone()")}} 创建对象的深层拷贝时,也可以使用转移。克隆操作后,传输的资源将被移动到克隆的对象,而不是复制。

使用转移对象资源的机制取决于对象自身。例如,当 {{jsxref("ArrayBuffer")}} 在线程之间转移时,它指向的内存资源*实际上*以快速且高效的零拷贝操作在上下文之间移动。其他对象可以通过拷贝关联的资源,然后将它从旧的上下文中删除来转移它。

Expand All @@ -34,7 +34,7 @@ console.log(uInt8Array.byteLength); // 0

### 在进行克隆操作时转移

以下代码展示了 {{domxref("structuredClone()")}} 操作,将底层缓冲区从原始对象复制到克隆对象(`clone`)。
以下代码展示了 `structuredClone()` 操作,将底层缓冲区从原始对象复制到克隆对象(`clone`)。

```js
const original = new Uint8Array(1024);
Expand Down
Loading