underlyingSource 包括:
+ underlyingSource 包括：
- start(controller) -
- 这是一个当对象被构造时立刻调用的方法.此方法的内容由开发人员定义，并应着眼于访问流,并执行其他任何必需的设置流功能.如果这个过程是异步完成的，它可以返回一个promise，表明成功或失败.传递给这个方法的
controller是一个{{domxref("ReadableStreamDefaultController")}}或{{domxref("ReadableByteStreamController")}},具体取决于type属性的值。开发人员可以使用此方法在设立期间控制流.
+ - 这是一个当对象被构造时立刻调用的方法。此方法的内容由开发人员定义，并应着眼于访问流，并执行其他任何必需的设置流功能。如果这个过程是异步完成的，它可以返回一个 promise，表明成功或失败。传递给这个方法的
controller是一个{{domxref("ReadableStreamDefaultController")}}或{{domxref("ReadableByteStreamController")}},具体取决于type属性的值。开发人员可以使用此方法在设立期间控制流。 - pull(controller) {{optional_inline}} -
- 这个方法，也是由开发人员定义的，当流的内部队列不满时，会重复调用这个方法，直到队列补满。如果
pull()返回一个promise，那么它将不会再被调用，直到promise完成;如果promise失败，该流将会出现错误.传递给此方法的controller参数是{{domxref("ReadableStreamDefaultController")}}或{{domxref("ReadableByteStreamController")}},具体取决于type属性的值。由于更多的块被获取,这个方法可以被开发人员用来控制流.
+ - 这个方法，也是由开发人员定义的，当流的内部队列不满时，会重复调用这个方法，直到队列补满。如果
pull()返回一个 promise，那么它将不会再被调用，直到 promise 完成;如果 promise 失败，该流将会出现错误。传递给此方法的controller参数是{{domxref("ReadableStreamDefaultController")}}或{{domxref("ReadableByteStreamController")}},具体取决于type属性的值。由于更多的块被获取，这个方法可以被开发人员用来控制流。 - cancel(reason) {{optional_inline}} -
- 如果应用程序表示该流将被取消（例如,调用了{{domxref("ReadableStream.cancel()")}}，则将调用此方法，该方法也由开发人员定义。 该方法应该做任何必要的事情来释放对流的访问。 如果这个过程是异步的，它可以返回一个promise,表明成功或失败.原因参数包含一个{{domxref("DOMString")}},它描述了流被取消的原因. +
- 如果应用程序表示该流将被取消（例如，调用了{{domxref("ReadableStream.cancel()")}}，则将调用此方法，该方法也由开发人员定义。 该方法应该做任何必要的事情来释放对流的访问。 如果这个过程是异步的，它可以返回一个 promise，表明成功或失败。原因参数包含一个{{domxref("DOMString")}},它描述了流被取消的原因。
- type {{optional_inline}} -
- 该属性控制正在处理的可读类型的流。如果它包含一个设置为
bytes的值，则传递的控制器对象将是一个{{domxref("ReadableByteStreamController")}}，能够处理BYOB（带您自己的缓冲区）/字节流。如果未包含，则传递的控制器将为{{domxref("ReadableStreamDefaultController")}}。
+ - 该属性控制正在处理的可读类型的流。如果它包含一个设置为
bytes的值，则传递的控制器对象将是一个{{domxref("ReadableByteStreamController")}}，能够处理 BYOB（带您自己的缓冲区）/字节流。如果未包含，则传递的控制器将为{{domxref("ReadableStreamDefaultController")}}。 - autoAllocateChunkSize {{optional_inline}} -
- 对于字节流，开发人员可以使用正整数值设置
autoAllocateChunkSize以打开流的自动分配功能。启用此功能后，流实现将自动分配一个具有给定整数大小的{{domxref("ArrayBuffer")}}，并调用底层源代码，就好像消费者正在使用BYOB阅读器一样。
+ - 对于字节流，开发人员可以使用正整数值设置
autoAllocateChunkSize以打开流的自动分配功能。启用此功能后，流实现将自动分配一个具有给定整数大小的{{domxref("ArrayBuffer")}}，并调用底层源代码，就好像消费者正在使用 BYOB 阅读器一样。
参数
返回值
-{{domxref("ReadableStream")}}对象的实例.
+{{domxref("ReadableStream")}}对象的实例。
错误
diff --git a/files/zh-cn/web/api/readablestreamdefaultreader/index.html b/files/zh-cn/web/api/readablestreamdefaultreader/index.html index 6c2eb00f488def..8d82f1239e6a7a 100644 --- a/files/zh-cn/web/api/readablestreamdefaultreader/index.html +++ b/files/zh-cn/web/api/readablestreamdefaultreader/index.html @@ -6,13 +6,13 @@{{APIRef("Streams")}}{{SeeCompatTable}}
- Streams API 的 ReadableStreamDefaultReader 的接口 表示一个可被用于读取来自网络提供的流数据(例如 fetch 请求)的默认读取器
构造方法
ReadableStreamDefaultReader()
- - 创建 和 返回 一个
ReadableStreamDefaultReader()对象实例.
+ - 创建 和 返回 一个
ReadableStreamDefaultReader()对象实例。
属性
@@ -20,25 +20,25 @@属性
ReadableStreamDefaultReader.closed
- - 允许你编写 当stream结束时 执行的代码 . 如果这个stream变成关闭状态或者 reader 的锁(lock)被释放 则返回一个状态是 fulfills的 promise,如果这个stream 报错则返回rejects的promise. +
- 允许你编写 当 stream 结束时 执行的代码 . 如果这个 stream 变成关闭状态或者 reader 的锁 (lock) 被释放 则返回一个状态是 fulfills 的 promise，如果这个 stream 报错则返回 rejects 的 promise.
方法
ReadableStreamDefaultReader.cancel()
- - 取消这个 stream, 表示对这个stream失去了兴趣. 提供的参数将传递给源source, 可能会也可能不会用到这些参数. +
- 取消这个 stream，表示对这个 stream 失去了兴趣。提供的参数将传递给源 source，可能会也可能不会用到这些参数。
ReadableStreamDefaultReader.read()
- - 返回一个promise,提供对stream内部队列中下一个块(chunk)访问的promise. +
- 返回一个 promise，提供对 stream 内部队列中下一个块 (chunk) 访问的 promise.
ReadableStreamDefaultReader.releaseLock()
- - 释放读取这个stream的锁. +
- 释放读取这个 stream 的锁。
例子
-在下面的例子中, {{domxref("Response")}} 被创建为流 HTML片段 fetched 来自其他源.
+在下面的例子中，{{domxref("Response")}} 被创建为流 HTML 片段 fetched 来自其他源。
-它展示了一个 {{domxref("ReadableStream")}} 和一个 Uint8Array组合使用的例子.
它展示了一个 {{domxref("ReadableStream")}} 和一个 Uint8Array组合使用的例子。
fetch("https://www.example.org/").then((response) => {
const reader = response.body.getReader();
diff --git a/files/zh-cn/web/api/renderingcontext/index.html b/files/zh-cn/web/api/renderingcontext/index.html
index 4cf1dfc0b72802..1213754dd1384e 100644
--- a/files/zh-cn/web/api/renderingcontext/index.html
+++ b/files/zh-cn/web/api/renderingcontext/index.html
@@ -6,7 +6,7 @@
---
{{APIRef("Canvas API")}}
-RenderingContext 是一个辅助类型，描述下面任何一个渲染上下文： {{domxref("CanvasRenderingContext2D")}}， {{domxref("WebGLRenderingContext")}} 或者 {{domxref("WebGL2RenderingContext")}} （继承自 WebGLRenderingContext）。
+RenderingContext 是一个辅助类型，描述下面任何一个渲染上下文： {{domxref("CanvasRenderingContext2D")}}， {{domxref("WebGLRenderingContext")}} 或者 {{domxref("WebGL2RenderingContext")}}（继承自 WebGLRenderingContext）。
这是简化规范的辅助类型，它不是一个接口，也没有对象实现它。
diff --git a/files/zh-cn/web/api/resize_observer_api/index.html b/files/zh-cn/web/api/resize_observer_api/index.html
index 17a6bed612a325..968f7d3ad451a3 100644
--- a/files/zh-cn/web/api/resize_observer_api/index.html
+++ b/files/zh-cn/web/api/resize_observer_api/index.html
@@ -5,7 +5,7 @@
---
{{DefaultAPISidebar("Resize Observer API")}}
-Resize Observer API提供了一种高性能的机制，通过该机制，代码可以监视元素的大小更改，并且每次大小更改时都会向观察者传递通知。
+Resize Observer API 提供了一种高性能的机制，通过该机制，代码可以监视元素的大小更改，并且每次大小更改时都会向观察者传递通知。
概念和使用
@@ -17,7 +17,7 @@ 概念和使用
这样的解决方案仅适用于有限的场景，对性能不利（不断调用上述方法会导致性能严重下降），并且在不更改浏览器窗口大小的情况下通常不起作用。
-Resize Observer API提供了一种解决此类问题的解决方案，此外，它还使您能够轻松观察和响应元素内容或边框的大小变化，并以高效的方式做出响应。 它为Web平台中经常讨论的缺少element queries 提供了JavaScript解决方案。
+Resize Observer API 提供了一种解决此类问题的解决方案，此外，它还使您能够轻松观察和响应元素内容或边框的大小变化，并以高效的方式做出响应。 它为 Web 平台中经常讨论的缺少element queries 提供了 JavaScript 解决方案。
用法很简单，并且与其他观察者（例如 Performance Observer 或者 Intersection Observer )— 几乎相同，您可以使用 ResizeObserver()构造函数创建一个新的{{domxref("ResizeObserver")}} ，然后使用 {{domxref("ResizeObserver.observe()")}}使其寻找特定元素大小的更改。 每次更改大小时，构造函数中设置的回调函数便会运行，从而提供对新维度的访问权限，并允许您根据需要执行任何操作。
@@ -32,11 +32,11 @@ 接口
例子
-您可以在我们的GitHub存储库中找到几个简单的示例：
+您可以在我们的 GitHub 存储库中找到几个简单的示例：
- resize-observer-border-radius.html (源码): 一个带有绿色框的简单示例，其大小为视口大小的百分比。更改视口大小时，框的圆角将根据框的大小成比例地变化。 我们可以通过 {{cssxref("border-radius")}} 来百分比来实现，但这很快会导致椭圆形的角看起来很丑陋，而上述解决方案为您提供了随盒子大小缩放的漂亮的角形正方形。 -
- resize-observer-text.html (源码): 这里我们使用resize observer来改变 {{cssxref("font-size")}} ，标题和段落的值随着滑块值的改变而改变，导致包含的<div>改变宽度。 这表明您可以响应元素大小的更改，即使它们与视口无关。 +
- resize-observer-text.html (源码): 这里我们使用 resize observer 来改变 {{cssxref("font-size")}} ，标题和段落的值随着滑块值的改变而改变，导致包含的<div>改变宽度。 这表明您可以响应元素大小的更改，即使它们与视口无关。
代码通常将遵循这种模式 (取自 resize-observer-border-radius.html):
@@ -74,7 +74,7 @@技术规范
浏览器支持情况
-此页面中的兼容性表是根据结构化数据生成的。如果你想贡献数据，请到 https://github.com/mdn/browser-compat-data 提PR。
+此页面中的兼容性表是根据结构化数据生成的。如果你想贡献数据，请到 https://github.com/mdn/browser-compat-data 提 PR。
{{Compat("api.ResizeObserver")}}
diff --git a/files/zh-cn/web/api/resizeobserver/index.html b/files/zh-cn/web/api/resizeobserver/index.html index 7bc3fb9aaba2b6..127fe06b9bb67e 100644 --- a/files/zh-cn/web/api/resizeobserver/index.html +++ b/files/zh-cn/web/api/resizeobserver/index.html @@ -5,9 +5,9 @@ ---ResizeObserver 接口可以监听到 {{domxref('Element')}} 的内容区域或 {{domxref('SVGElement')}}的边界框改变。内容区域则需要减去内边距padding。（有关内容区域、内边距资料见盒子模型 ）
ResizeObserver 接口可以监听到 {{domxref('Element')}} 的内容区域或 {{domxref('SVGElement')}}的边界框改变。内容区域则需要减去内边距 padding。（有关内容区域、内边距资料见盒子模型 ）
ResizeObserver避免了在自身回调中调整大小，从而触发的无限回调和循环依赖。它仅通过在后续帧中处理DOM中更深层次的元素来实现这一点。如果（浏览器）遵循规范，只会在绘制前或布局后触发调用。
+ResizeObserver 避免了在自身回调中调整大小，从而触发的无限回调和循环依赖。它仅通过在后续帧中处理 DOM 中更深层次的元素来实现这一点。如果（浏览器）遵循规范，只会在绘制前或布局后触发调用。
构造器
@@ -37,7 +37,7 @@方法
示例
-以下示例通过观察box的宽度变化从而改变其边框圆角半径。
+以下示例通过观察 box 的宽度变化从而改变其边框圆角半径。
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
diff --git a/files/zh-cn/web/api/resizeobserver/observe/index.html b/files/zh-cn/web/api/resizeobserver/observe/index.html
index c9d0ba321cc536..cbcba0f7105599 100644
--- a/files/zh-cn/web/api/resizeobserver/observe/index.html
+++ b/files/zh-cn/web/api/resizeobserver/observe/index.html
@@ -38,7 +38,7 @@ 异常
示例
-以下示例通过观察box的尺寸变化从而改变其边框圆角半径。
+以下示例通过观察 box 的尺寸变化从而改变其边框圆角半径。
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
diff --git a/files/zh-cn/web/api/resizeobserver/resizeobserver/index.html b/files/zh-cn/web/api/resizeobserver/resizeobserver/index.html
index 3ecbce509d667a..52c74993fa42a8 100644
--- a/files/zh-cn/web/api/resizeobserver/resizeobserver/index.html
+++ b/files/zh-cn/web/api/resizeobserver/resizeobserver/index.html
@@ -22,7 +22,7 @@ 参数
示例
The following example shows the dimensions of a box inside it, as text, upon resizing.
- 下面示例展示了box调整大小时，其内部文本显示为尺寸大小。
+ 下面示例展示了 box 调整大小时，其内部文本显示为尺寸大小。
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
diff --git a/files/zh-cn/web/api/resizeobserverentry/index.html b/files/zh-cn/web/api/resizeobserverentry/index.html
index 0842dfb927190a..1b5c0e412a75c9 100644
--- a/files/zh-cn/web/api/resizeobserverentry/index.html
+++ b/files/zh-cn/web/api/resizeobserverentry/index.html
@@ -11,7 +11,7 @@ 属性
- {{domxref('ResizeObserverEntry.contentRect')}} {{experimental_inline}} {{readonlyinline}} -
- 对改变尺寸大小的元素的 {{domxref('DOMRectReadOnly')}}引用（包含x,y,width,height,top,right,bottom,left属性）。 +
- 对改变尺寸大小的元素的 {{domxref('DOMRectReadOnly')}}引用（包含 x,y,width,height,top,right,bottom,left 属性）。
- {{domxref('ResizeObserverEntry.target')}} {{experimental_inline}} {{readonlyinline}}
- 当前改变尺寸大小的元素的 {{domxref('Element')}} 引用
- @@ -23,11 +23,11 @@
事件
方法
-无.
+无。
示例
-以下示例通过观察box的宽度变化从而改变其边框圆角半径。
+以下示例通过观察 box 的宽度变化从而改变其边框圆角半径。
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
diff --git a/files/zh-cn/web/api/resource_timing_api/index.html b/files/zh-cn/web/api/resource_timing_api/index.html
index 6b02dc75321b6b..70d95563fcb4a2 100644
--- a/files/zh-cn/web/api/resource_timing_api/index.html
+++ b/files/zh-cn/web/api/resource_timing_api/index.html
@@ -5,30 +5,30 @@
---
{{DefaultAPISidebar("Resource Timing API")}}
-通过Resource Timing API可以获取和分析应用资源加载的详细网络计时数据, 应用程序可以
+通过Resource Timing API可以获取和分析应用资源加载的详细网络计时数据，应用程序可以
-使用时间度量标准来确定加载特定资源所需要的时间, 比如 {{domxref("XMLHttpRequest")}}, {{SVGElement("SVG","SVG element")}}, 图片, 或者脚本.
+使用时间度量标准来确定加载特定资源所需要的时间，比如 {{domxref("XMLHttpRequest")}}, {{SVGElement("SVG","SVG element")}}, 图片，或者脚本。
-Resource Timing API为网络事件(如重定向的开始和结束事件, DNS查找的开始和结束事件, 请求开始, 响应开始和结束时间等)生成有高分辨率时间戳( {{domxref("DOMHighResTimeStamp","high-resolution timestamps", "", 1)}} )的资源加载时间线, 并提供了资源大小和资源类型.
+Resource Timing API为网络事件 (如重定向的开始和结束事件，DNS 查找的开始和结束事件，请求开始，响应开始和结束时间等) 生成有高分辨率时间戳 ( {{domxref("DOMHighResTimeStamp","high-resolution timestamps", "", 1)}} ) 的资源加载时间线，并提供了资源大小和资源类型。
-本文档是Resource Timing API的概述. 更多详细信息, 请查阅每个接口的参考说明, Using Resource Timing 和 参见 的参考链接. 有关资源时序处理模型的图示，请参阅 resource timing phases .
+本文档是 Resource Timing API 的概述。更多详细信息，请查阅每个接口的参考说明，Using Resource Timing 和 参见 的参考链接。有关资源时序处理模型的图示，请参阅 resource timing phases .
PerformanceResourceTiming 接口只统计{{domxref("PerformanceEntry","performance entries", "", 1)}} 中 {{domxref("PerformanceEntry.entryType","entryType")}} 为"resource"类型的 {{domxref("PerformanceEntry")}}
高分辨率时间戳
-一些 Resource Timing 属性返回高分辨率时间戳, 顾名思义, 代表了高分辨率的时间点. 高分辨率时间戳类型是{{domxref("DOMHighResTimeStamp")}}, 用双精度数字(double)表示, 它的值是一个离散的时间点或者两个离散时间点之间的时间差.
+一些 Resource Timing 属性返回高分辨率时间戳，顾名思义，代表了高分辨率的时间点。高分辨率时间戳类型是{{domxref("DOMHighResTimeStamp")}}, 用双精度数字 (double) 表示，它的值是一个离散的时间点或者两个离散时间点之间的时间差。
-DOMHighResTimeStamp的单位是毫秒(ms), 并且应该可以准确到 5 微秒(µs). 但是, 如果浏览器无法以提供精确到5微秒的时间值(如软硬件限制), 则可以将该值表示为以毫秒为单位的精确到毫秒的时间。
+DOMHighResTimeStamp的单位是毫秒 (ms), 并且应该可以准确到 5 微秒 (µs). 但是，如果浏览器无法以提供精确到 5 微秒的时间值 (如软硬件限制), 则可以将该值表示为以毫秒为单位的精确到毫秒的时间。
资源载入时间戳
-应用程序可以获得用于加载资源的各个阶段的时间戳. 处理模型中的第一个属性是 {{domxref("PerformanceEntry.startTime","startTime")}} , 它在资源加载过程开始之前立即返回时间. {{domxref("PerformanceResourceTiming.fetchStart","fetchStart")}} 跟踪和重定向处理(如果适用)，并在DNS查找之前进行. 下个阶段是{{domxref('PerformanceResourceTiming.connectStart','connectStart')}} 和 {{domxref('PerformanceResourceTiming.connectEnd','connectEnd')}} 分别是开始连接到服务器和连接建立完成的时间戳. 最后三个按顺序分别是: {{domxref('PerformanceResourceTiming.requestStart','requestStart')}} - 在浏览器开始向服务器请求资源时; {{domxref('PerformanceResourceTiming.responseStart','responseStart')}} - 资源请求首包返回时; and {{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}} - 资源全部接收完成时. 如果资源是通过安全连接加载的 {{domxref('PerformanceResourceTiming.secureConnectionStart','secureConnectionStart')}} 的值将会在connectStart和connectEnd之间.
+应用程序可以获得用于加载资源的各个阶段的时间戳。处理模型中的第一个属性是 {{domxref("PerformanceEntry.startTime","startTime")}} , 它在资源加载过程开始之前立即返回时间. {{domxref("PerformanceResourceTiming.fetchStart","fetchStart")}} 跟踪和重定向处理 (如果适用)，并在 DNS 查找之前进行。下个阶段是{{domxref('PerformanceResourceTiming.connectStart','connectStart')}} 和 {{domxref('PerformanceResourceTiming.connectEnd','connectEnd')}} 分别是开始连接到服务器和连接建立完成的时间戳。最后三个按顺序分别是: {{domxref('PerformanceResourceTiming.requestStart','requestStart')}} - 在浏览器开始向服务器请求资源时; {{domxref('PerformanceResourceTiming.responseStart','responseStart')}} - 资源请求首包返回时; and {{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}} - 资源全部接收完成时。如果资源是通过安全连接加载的 {{domxref('PerformanceResourceTiming.secureConnectionStart','secureConnectionStart')}} 的值将会在 connectStart 和 connectEnd 之间。
-当 {{Glossary("CORS")}} 生效时, 除非服务器的访问策略允许共享这些值，否则这些值中的许多将返回为零. 这需要提供资源的服务器发送 Timing-Allow-Origin HTTP 响应头并且指定origin[s]来源才能允许获取这些被限制的时间戳 .
+当 {{Glossary("CORS")}} 生效时，除非服务器的访问策略允许共享这些值，否则这些值中的许多将返回为零。这需要提供资源的服务器发送 Timing-Allow-Origin HTTP 响应头并且指定 origin[s] 来源才能允许获取这些被限制的时间戳 .
-在非web页面本身的域名下，这些属性在默认都会返回0值 : redirectStart, redirectEnd, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, 和 responseStart.
+在非 web 页面本身的域名下，这些属性在默认都会返回 0 值 : redirectStart, redirectEnd, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, 和 responseStart.
The {{domxref("PerformanceResourceTiming")}} interface also includes several network timing properties. The {{domxref("PerformanceResourceTiming.redirectStart","redirectStart")}} and {{domxref("PerformanceResourceTiming.redirectEnd","redirectEnd")}} properties return {{domxref("DOMHighResTimeStamp","timestamps")}} for redirect start and end times, respectively. Likewise, the The {{domxref("PerformanceResourceTiming.domainLookupStart","domainLookupStart")}} and {{domxref("PerformanceResourceTiming.domainLookupEnd","domainLookupEnd")}} properties return {{domxref("DOMHighResTimeStamp","timestamps")}} for DNS lookup start and end times, respectively.
diff --git a/files/zh-cn/web/api/resource_timing_api/using_the_resource_timing_api/index.html b/files/zh-cn/web/api/resource_timing_api/using_the_resource_timing_api/index.html
index a6c62b98b71f15..00afb21416708b 100644
--- a/files/zh-cn/web/api/resource_timing_api/using_the_resource_timing_api/index.html
+++ b/files/zh-cn/web/api/resource_timing_api/using_the_resource_timing_api/index.html
@@ -7,15 +7,15 @@
Resource Timing API 提供了获取和分析应用程序资源加载的详细网络计时数据的一种途径。应用可以使用一些可量化的时间度量标准，如加载特定资源的时长。这些资源可能是 {{domxref("XMLHttpRequest")}}, {{SVGElement("SVG","SVG element")}}、图片、脚本等等。
-这个接口提供了使用 {{domxref("DOMHighResTimeStamp","高精度时间戳")}} 度量的资源加载时间轴。此时间轴包含众多网络事件的时间，如重定向开始和结束时间，开始请求资源时间，DNS查询开始和结束时间，响应开始和结束时间等等。也包含了请求到的资源的大小、请求发起者的类型。
+这个接口提供了使用 {{domxref("DOMHighResTimeStamp","高精度时间戳")}} 度量的资源加载时间轴。此时间轴包含众多网络事件的时间，如重定向开始和结束时间，开始请求资源时间，DNS 查询开始和结束时间，响应开始和结束时间等等。也包含了请求到的资源的大小、请求发起者的类型。
这篇文档展示了如何使用 Resource Timing 接口。获取更详细的信息或示例，请查看每个接口的文档和See also章节。
-Github上有一个真实的例子，这里是它的源码 source code. 欢迎提pull request和报告bug。
+Github上有一个真实的例子，这里是它的源码 source code. 欢迎提 pull request 和报告 bug。
资源加载的各个阶段
-应用可以获取到资源加载的各个阶段的时间戳，如重定向、DNS查询、TCP连接建立。这些阶段和他们的属性名在图1中列出。
+应用可以获取到资源加载的各个阶段的时间戳，如重定向、DNS 查询、TCP 连接建立。这些阶段和他们的属性名在图 1 中列出。
图 1. Resource timing 属性
@@ -24,7 +24,7 @@ 资源加载的各个阶段
计算资源加载各阶段的时间
-接下来的这段例子展示了用 Resource timing 属性去计算以下阶段的耗时：重定向 ({{domxref("PerformanceResourceTiming.redirectStart","redirectStart")}} 和 {{domxref("PerformanceResourceTiming.redirectEnd","redirectEnd")}} )，DNS查询({{domxref("PerformanceResourceTiming.domainLookupStart","domainLookupStart")}} 和 {{domxref("PerformanceResourceTiming.domainLookupEnd","domainLookupEnd")}})，TCP握手 ({{domxref('PerformanceResourceTiming.connectStart','connectStart')}} 和 {{domxref('PerformanceResourceTiming.connectEnd','connectEnd')}})， 响应 ({{domxref('PerformanceResourceTiming.responseStart','responseStart')}} 和 {{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}})。 这段例子也计算了从开始获取资源和请求开始（分别为{{domxref("PerformanceResourceTiming.fetchStart","fetchStart")}} and {{domxref("PerformanceResourceTiming.requestStart","requestStart")}}）到响应结束 ({{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}}) 的时间.
+接下来的这段例子展示了用 Resource timing 属性去计算以下阶段的耗时：重定向 ({{domxref("PerformanceResourceTiming.redirectStart","redirectStart")}} 和 {{domxref("PerformanceResourceTiming.redirectEnd","redirectEnd")}} )，DNS 查询 ({{domxref("PerformanceResourceTiming.domainLookupStart","domainLookupStart")}} 和 {{domxref("PerformanceResourceTiming.domainLookupEnd","domainLookupEnd")}})，TCP 握手 ({{domxref('PerformanceResourceTiming.connectStart','connectStart')}} 和 {{domxref('PerformanceResourceTiming.connectEnd','connectEnd')}})， 响应 ({{domxref('PerformanceResourceTiming.responseStart','responseStart')}} 和 {{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}})。 这段例子也计算了从开始获取资源和请求开始（分别为{{domxref("PerformanceResourceTiming.fetchStart","fetchStart")}} and {{domxref("PerformanceResourceTiming.requestStart","requestStart")}}）到响应结束 ({{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}}) 的时间。
function calculate_load_times() {
// Check performance support