From ba0b4724c329f8441afd90a7f8adf8a782e21ad9 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 11:00:13 +0800
Subject: [PATCH 01/23] Update article.md

---
 2-ui/5-loading/02-script-async-defer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md
index 6c49d9945f..21ce358c1c 100755
--- a/2-ui/5-loading/02-script-async-defer/article.md
+++ b/2-ui/5-loading/02-script-async-defer/article.md
@@ -1,5 +1,5 @@
 
-# Script 标签属性：async, defer
+# 脚本：async，defer
 
 现代的网站中，脚本往往比 HTML 更“重”：它们的大小通常更大，处理时间也更长。
 

From 35274561b0c5725a0152f4e4e7266f016cf951d7 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 11:40:23 +0800
Subject: [PATCH 02/23] Update article.md

---
 .../02-script-async-defer/article.md          | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md
index 21ce358c1c..465510e02c 100755
--- a/2-ui/5-loading/02-script-async-defer/article.md
+++ b/2-ui/5-loading/02-script-async-defer/article.md
@@ -7,15 +7,15 @@
 
 这会导致两个重要的问题：
 
-1. 脚本不能访问到位于它们下面的 DOM 元素，因此，脚本不能给它们添加事件等。
-2. 如果页面顶部有一个庞大的脚本，它会“阻塞页面”。在脚本下载并执行结束前，用户都不能看到页面内容：
+1. 脚本不能访问到位于它们下面的 DOM 元素，因此，脚本无法给它们添加处理程序等。
+2. 如果页面顶部有一个笨重的脚本，它会“阻塞页面”。在该脚本下载并执行结束前，用户都不能看到页面内容：
 
 ```html run height=100
 <p>...content before script...</p>
 
 <script src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>
 
-<!-- 在脚本加载结束前都看不到下面的内容 -->
+<!-- This isn't visible until the script loads -->
 <p>...content after script...</p>
 ```
 
@@ -29,17 +29,17 @@
 </body>
 ```
 
-但是这样的方案绝非完美。例如：浏览器只有在下载完整的 HTML 文档后才会注意到脚本（并且开始下载它）。对于长的 HTML 文档来说，这样的延迟必须引起注意。
+但是这种解决方案远非完美。例如，浏览器只有在下载了完整的 HTML 文档之后才会注意到该脚本（并且可以开始下载它）。对于长的 HTML 文档来说，这样可能会造成明显的延迟。
 
-对于网络连接很快的人来说，这不值一提。但是这个世界上仍然有很多地区的人们他们使用很慢的网络连接，并且使用着远非完美的移动互联网。
+这对于使用高速连接的人来说，这不值一提，他们不会感受到这种延迟。但是这个世界上仍然有很多地区的人们所使用的网络速度很慢，并且使用的是远非完美的移动互联网连接。
 
-幸运的是，这里有两个 `<script>` 属性可以解决我们的这个问题：`defer` 和 `async`。
+幸运的是，这里有两个 `<script>` 特性（attribute）可以为我们解决这个问题：`defer` 和 `async`。
 
 ## defer
 
-`defer` 属性告诉浏览器它应该继续处理页面，并在“后台”下载脚本，然后等页面处理完成后才开始执行此脚本。
+`defer` 特性告诉浏览器它应该继续处理页面，并在“后台”下载脚本，然后等页面处理完成后才开始执行此脚本。
 
-接下来的这个例子和上面一样，但是是用 `defer` 属性：
+接下来的这个例子和上面一样，但是是用 `defer` 特性：
 
 ```html run height=100
 <p>...content before script...</p>
@@ -50,8 +50,8 @@
 <p>...content after script...</p>
 ```
 
-- 具有 `defer` 属性的脚本不会阻塞页面的加载。
-- 具有 `defer` 属性的脚本总是要等到 DOM 解析完毕，但在 `DOMContentLoaded` 事件之前执行。
+- 具有 `defer` 特性的脚本不会阻塞页面的加载。
+- 具有 `defer` 特性的脚本总是要等到 DOM 解析完毕，但在 `DOMContentLoaded` 事件之前执行。
 
 下面的例子演示了这一过程：
 
@@ -80,19 +80,19 @@ Defer 脚本保持他们的相对顺序，就像常规脚本一样。
 ```
 
 ```smart header="短脚本先下载完成，但是后执行"
-浏览器解析页面找到 script 属性并并行下载它们，以提高性能。因此，在上面的实例中，两个脚本并行下载。`small.js` 可能会先下载完成。
+浏览器解析页面找到 script 特性并并行下载它们，以提高性能。因此，在上面的实例中，两个脚本并行下载。`small.js` 可能会先下载完成。
 
 但是规范要求脚本按照文档顺序执行，因此它要等到 `long.js` 执行结束才会被执行。
 ```
 
-```smart header="`defer` 属性仅适用于外部脚本"
-`defer` 属性会忽略没有 `src` 属性的 `<script>` 脚本。
+```smart header="`defer` 特性仅适用于外部脚本"
+`defer` 特性会忽略没有 `src` 特性的 `<script>` 脚本。
 ```
 
 
 ## async
 
-`async` 属性意味着脚本是完全独立的：
+`async` 特性意味着脚本是完全独立的：
 
 - 页面不会等待异步脚本，它会继续处理页面并显示内容。
 - `DOMContentLoaded` 和 async 脚本不会彼此等待：
@@ -146,7 +146,7 @@ document.body.append(script); // (*)
 - 它们不会等待其他内容，其他的内容也不会等待它们。
 - 先加载完成的脚本先运行（“加载优先” 顺序）
 
-我们可以通过将 `async` 属性显示修改为 `false` 以将加载优先顺序修改为文档顺序（就像常规脚本一样）：
+我们可以通过将 `async` 特性显示修改为 `false` 以将加载优先顺序修改为文档顺序（就像常规脚本一样）：
 
 ```js run
 let script = document.createElement('script');
@@ -170,7 +170,7 @@ function loadScript(src) {
   document.body.append(script);
 }
 
-// 由于 async=false 属性存在，long.js 会先运行
+// 由于 async=false 特性存在，long.js 会先运行
 loadScript("/article/script-async-defer/long.js");
 loadScript("/article/script-async-defer/small.js");
 ```
@@ -178,7 +178,7 @@ loadScript("/article/script-async-defer/small.js");
 
 ## 总结
 
-`async` 和 `defer` 属性有一个共同点：它们都不会阻塞页面的渲染。因此，用户可以立即阅读并了解页面内容。
+`async` 和 `defer` 特性有一个共同点：它们都不会阻塞页面的渲染。因此，用户可以立即阅读并了解页面内容。
 
 但是它们之间也存在一些本质的区别：
 
@@ -195,4 +195,4 @@ loadScript("/article/script-async-defer/small.js");
 所以，这就需要在页面适当位置添加“加载”进度指示，禁用无效的按钮，以清楚地向用户显示什么准备好了什么没有准备好。
 ```
 
-在开发中，通常在脚本需要整个 DOM 文档或者脚本的相对执行顺序很重要的时候，使用 `defer` 属性。而当脚本之间互相独立，比如计数器或者广告，并且它们相对执行顺序不重要的时候，此时使用 `async` 属性。
+在开发中，通常在脚本需要整个 DOM 文档或者脚本的相对执行顺序很重要的时候，使用 `defer` 特性。而当脚本之间互相独立，比如计数器或者广告，并且它们相对执行顺序不重要的时候，此时使用 `async` 特性。

From a20642c8b34e4d1e87fe55949623f4d70459f74a Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 12:03:07 +0800
Subject: [PATCH 03/23] Update article.md

---
 2-ui/5-loading/02-script-async-defer/article.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md
index 465510e02c..efa72c130d 100755
--- a/2-ui/5-loading/02-script-async-defer/article.md
+++ b/2-ui/5-loading/02-script-async-defer/article.md
@@ -37,9 +37,9 @@
 
 ## defer
 
-`defer` 特性告诉浏览器它应该继续处理页面，并在“后台”下载脚本，然后等页面处理完成后才开始执行此脚本。
+`defer` 特性告诉浏览器它应该继续处理页面，并“在后台”下载脚本，然后等页面加载完成后，再执行此脚本。
 
-接下来的这个例子和上面一样，但是是用 `defer` 特性：
+这是与上面那个相同的示例，但是带有 `defer` 特性：
 
 ```html run height=100
 <p>...content before script...</p>
@@ -50,10 +50,10 @@
 <p>...content after script...</p>
 ```
 
-- 具有 `defer` 特性的脚本不会阻塞页面的加载。
+- 具有 `defer` 特性的脚本不会阻塞页面。
 - 具有 `defer` 特性的脚本总是要等到 DOM 解析完毕，但在 `DOMContentLoaded` 事件之前执行。
 
-下面的例子演示了这一过程：
+下面这个示例演示了这一过程：
 
 ```html run height=100
 <p>...content before scripts...</p>
@@ -68,11 +68,11 @@
 ```
 
 1. 页面内容立即显示。
-2. `DOMContentLoaded` 在等待 defer 脚本动作的完成。它仅在脚本 `(2)` 下载且执行结束后才被触发。
+2. `DOMContentLoaded` 等待具有 `defer` 特性的脚本执行完成。`DOMContentLoaded` 仅在脚本 `(2)` 下载且执行结束后才会被触发。
 
-Defer 脚本保持他们的相对顺序，就像常规脚本一样。
+具有 `defer` 特性的脚本保持其相对顺序，就像常规脚本一样。
 
-所以，如果我们有一个长脚本在前，一个短脚本在后，那么后者就会等待前者。
+因此，如果我们有一个长脚本在前，一个短脚本在后，那么后者就会等待前者。
 
 ```html
 <script defer src="https://javascript.info/article/script-async-defer/long.js"></script>

From 4439ed5472c5983866df7c4e9174a5f1f18291c8 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 14:31:09 +0800
Subject: [PATCH 04/23] Update article.md

---
 .../02-script-async-defer/article.md          | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md
index efa72c130d..9febc4cfed 100755
--- a/2-ui/5-loading/02-script-async-defer/article.md
+++ b/2-ui/5-loading/02-script-async-defer/article.md
@@ -80,13 +80,13 @@
 ```
 
 ```smart header="短脚本先下载完成，但是后执行"
-浏览器解析页面找到 script 特性并并行下载它们，以提高性能。因此，在上面的实例中，两个脚本并行下载。`small.js` 可能会先下载完成。
+浏览器扫描页面寻找脚本，然后并行下载它们，以提高性能。因此，在上面的示例中，两个脚本是并行下载的。`small.js` 可能会先下载完成。
 
-但是规范要求脚本按照文档顺序执行，因此它要等到 `long.js` 执行结束才会被执行。
+但是规范要求脚本按照文档顺序执行，因此，它需要等到 `long.js` 执行结束才会被执行。
 ```
 
 ```smart header="`defer` 特性仅适用于外部脚本"
-`defer` 特性会忽略没有 `src` 特性的 `<script>` 脚本。
+如果 `<script>` 脚本没有 `src`，则会忽略 `defer` 特性。
 ```
 
 
@@ -94,14 +94,14 @@
 
 `async` 特性意味着脚本是完全独立的：
 
-- 页面不会等待异步脚本，它会继续处理页面并显示内容。
-- `DOMContentLoaded` 和 async 脚本不会彼此等待：
-    - `DOMContentLoaded` 可能发生在异步脚本之前（此时异步脚本在页面加载完成后才加载完成）
-    - `DOMContentLoaded` 也可能发生在异步脚本之后（此时异步脚本可能很短或者是从 HTTP 缓存中加载的）
-- 其他脚本不会等待 `async` 脚本加载完成，同样 `async` 脚本也不会等待其他脚本。
+- 页面不会等待异步脚本，它会继续处理并显示页面内容。
+- `DOMContentLoaded` 和异步脚本不会彼此等待：
+    - `DOMContentLoaded` 可能会发生在异步脚本之前（如果异步脚本在页面完成后才加载完成）
+    - `DOMContentLoaded` 也可能发生在异步脚本之后（如果异步脚本很短，或者是从 HTTP 缓存中加载的）
+- 其他脚本不会等待 `async` 脚本加载完成，同样，`async` 脚本也不会等待其他脚本。
 
 
-因此，如果我们有几个 `async` 脚本，它们可能按任意次序执行，总之是先加载完成的就先运行：
+因此，如果我们有几个 `async` 脚本，它们可能按任意次序执行。总之是先加载完成的就先执行：
 
 ```html run height=100
 <p>...content before scripts...</p>
@@ -116,11 +116,11 @@
 <p>...content after scripts...</p>
 ```
 
-1. 页面内容立刻显示出来：`async` 脚本不会阻塞页面加载。
-2. `DOMContentLoaded` 可以在 `async` 之前或之后触发，不能保证谁在前谁在后。
-3. Async 脚本不会等待彼此。一个小的脚本 `small.js` 放在后面，但是可能会比 `long.js` 这个长脚本先加载完成，所以尽管 `small.js` 在后面，但是它可能先运行。这一行为被称为“加载优先（load-first）”顺序。
+1. 页面内容立刻显示出来：`async` 脚本不会阻塞页面。
+2. `DOMContentLoaded` 可能在 `async` 之前或之后触发，不能保证谁先谁后。
+3. 异步脚本不会等待彼此。较小的脚本 `small.js` 排在第二位，但可能会比 `long.js` 这个长脚本先加载完成，所以 `small.js` 会先执行。这被称为“加载优先”顺序。
 
-当我们将独立的第三方脚本集成到页面的时候，此时采用异步加载方式是非常棒的：计数器，广告等等，因为它们不依赖于我们的脚本，同样我们的脚本也不应该等待它们加载完成：
+当我们将独立的第三方脚本集成到页面时，异步脚本非常有用：计数器，广告等，因为它们不依赖于我们的脚本，我们的脚本也不应该等待它们：
 
 ```html
 <!-- Google Analytics 脚本通常是这样嵌入页面的 -->
@@ -128,7 +128,7 @@
 ```
 
 
-## 动态脚本（Dynamic scripts）
+## 动态脚本
 
 我们也可以使用 JavaScript 动态地添加脚本：
 
@@ -144,7 +144,7 @@ document.body.append(script); // (*)
 
 这也就是说：
 - 它们不会等待其他内容，其他的内容也不会等待它们。
-- 先加载完成的脚本先运行（“加载优先” 顺序）
+- 先加载完成的脚本先执行（“加载优先” 顺序）
 
 我们可以通过将 `async` 特性显示修改为 `false` 以将加载优先顺序修改为文档顺序（就像常规脚本一样）：
 
@@ -159,7 +159,7 @@ script.async = false;
 document.body.append(script);
 ```
 
-例如，这里我们添加了两个脚本。在没有设置 `script.async=false` 时，它们执行顺序为加载优先顺序（即 `small.js` 可能先运行）。但是当设置了 `script.async=false` 后，脚本执行顺序就是它在文档中的顺序：
+例如，这里我们添加了两个脚本。在没有设置 `script.async=false` 时，它们执行顺序为加载优先顺序（即 `small.js` 可能先执行）。但是当设置了 `script.async=false` 后，脚本执行顺序就是它在文档中的顺序：
 
 
 ```js run
@@ -170,7 +170,7 @@ function loadScript(src) {
   document.body.append(script);
 }
 
-// 由于 async=false 特性存在，long.js 会先运行
+// 由于 async=false 特性存在，long.js 会先执行
 loadScript("/article/script-async-defer/long.js");
 loadScript("/article/script-async-defer/small.js");
 ```
@@ -184,7 +184,7 @@ loadScript("/article/script-async-defer/small.js");
 
 |  类型   | 顺序 | `DOMContentLoaded` |
 |---------|---------|---------|
-| `async` | **加载优先顺序**。脚本在文档中的顺序不重要 —— 先加载完成先运行 | 无关紧要。可能在文档还未完全下载前加载执行。如果脚本很小或者来自于缓存，同时文档又足够长，就会发生这种情况。|
+| `async` | **加载优先顺序**。脚本在文档中的顺序不重要 —— 先加载完成先执行 | 无关紧要。可能在文档还未完全下载前加载执行。如果脚本很小或者来自于缓存，同时文档又足够长，就会发生这种情况。|
 | `defer` | **文档顺序**（它们在文档中的位置） | 在 `DOMContentLoaded` 之前且在文档加载解析之后执行（可能需要等待）。|
 
 ```warn header="没有脚本的页面应该也是可用的"

From dcbfd596f2aa7389899514d619571c5eb7305991 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 15:12:46 +0800
Subject: [PATCH 05/23] Update article.md

---
 .../02-script-async-defer/article.md          | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md
index 9febc4cfed..956de62194 100755
--- a/2-ui/5-loading/02-script-async-defer/article.md
+++ b/2-ui/5-loading/02-script-async-defer/article.md
@@ -120,7 +120,7 @@
 2. `DOMContentLoaded` 可能在 `async` 之前或之后触发，不能保证谁先谁后。
 3. 异步脚本不会等待彼此。较小的脚本 `small.js` 排在第二位，但可能会比 `long.js` 这个长脚本先加载完成，所以 `small.js` 会先执行。这被称为“加载优先”顺序。
 
-当我们将独立的第三方脚本集成到页面时，异步脚本非常有用：计数器，广告等，因为它们不依赖于我们的脚本，我们的脚本也不应该等待它们：
+当我们将独立的第三方脚本集成到页面时，此时采用异步加载方式是非常棒的：计数器，广告等，因为它们不依赖于我们的脚本，我们的脚本也不应该等待它们：
 
 ```html
 <!-- Google Analytics 脚本通常是这样嵌入页面的 -->
@@ -138,15 +138,14 @@ script.src = "/article/script-async-defer/long.js";
 document.body.append(script); // (*)
 ```
 
-当脚本附加到文档 `(*)` 时，脚本就会开始加载：
+当脚本被附加到文档 `(*)` 时，脚本就会立即开始加载。
 
-**默认情况下，动态脚本表现为“异步”行为。**
+**默认情况下，动态脚本的行为是“异步”的。**
 
-这也就是说：
-- 它们不会等待其他内容，其他的内容也不会等待它们。
-- 先加载完成的脚本先执行（“加载优先” 顺序）
+也就是说：
+- 它们不会等待任何东西，也没有什么东西会等它们。
+- 先加载完成的脚本先执行（“加载优先”顺序）。
 
-我们可以通过将 `async` 特性显示修改为 `false` 以将加载优先顺序修改为文档顺序（就像常规脚本一样）：
 
 ```js run
 let script = document.createElement('script');
@@ -159,7 +158,9 @@ script.async = false;
 document.body.append(script);
 ```
 
-例如，这里我们添加了两个脚本。在没有设置 `script.async=false` 时，它们执行顺序为加载优先顺序（即 `small.js` 可能先执行）。但是当设置了 `script.async=false` 后，脚本执行顺序就是它在文档中的顺序：
+我们可以通过将 `async` 特性显式地修改为 `false`，以将脚本的加载顺序更改为文档顺序（就像常规脚本一样）：
+
+例如，这里我们添加了两个脚本。在没有设置 `script.async=false` 时，它们执行顺序为加载优先顺序（即 `small.js` 可能先执行）。但是当设置了 `script.async=false` 后，脚本执行顺序就变成了“脚本在文档中的顺序”：
 
 
 ```js run
@@ -170,7 +171,7 @@ function loadScript(src) {
   document.body.append(script);
 }
 
-// 由于 async=false 特性存在，long.js 会先执行
+// long.js 先执行，因为代码中设置了 async=false
 loadScript("/article/script-async-defer/long.js");
 loadScript("/article/script-async-defer/small.js");
 ```
@@ -178,21 +179,21 @@ loadScript("/article/script-async-defer/small.js");
 
 ## 总结
 
-`async` 和 `defer` 特性有一个共同点：它们都不会阻塞页面的渲染。因此，用户可以立即阅读并了解页面内容。
+`async` 和 `defer` 有一个共同点：加载这样的脚本都不会阻塞页面的渲染。因此，用户可以立即阅读并了解页面内容。
 
-但是它们之间也存在一些本质的区别：
+但是，它们之间也存在一些本质的区别：
 
-|  类型   | 顺序 | `DOMContentLoaded` |
+|         | 顺序 | `DOMContentLoaded` |
 |---------|---------|---------|
-| `async` | **加载优先顺序**。脚本在文档中的顺序不重要 —— 先加载完成先执行 | 无关紧要。可能在文档还未完全下载前加载执行。如果脚本很小或者来自于缓存，同时文档又足够长，就会发生这种情况。|
-| `defer` | **文档顺序**（它们在文档中的位置） | 在 `DOMContentLoaded` 之前且在文档加载解析之后执行（可能需要等待）。|
+| `async` | **加载优先顺序**。脚本在文档中的顺序不重要 —— 先加载完成先执行 | 不相关。可能在文档加载完成前加载并执行完毕。如果脚本很小或者来自于缓存，同时文档足够长，就会发生这种情况。 |
+| `defer` | **文档顺序**（它们在文档中的顺序） | 在文档加载和解析完成之后（如果需要，则会等待），即在 `DOMContentLoaded` 之前执行。 |
 
 ```warn header="没有脚本的页面应该也是可用的"
-请注意，如果你使用的是 `defer`，那么在脚本加载之前页面都是“可见”的。
+请注意，如果你使用的是 `defer`，那么该页面在脚本加载之前就“可见”。
 
-因此，用户可以阅读这个页面内容，但是一些图形组件可能没有准备完成。
+因此，用户可以阅读这个页面的内容，但是某些图形组件可能尚未准备好。
 
-所以，这就需要在页面适当位置添加“加载”进度指示，禁用无效的按钮，以清楚地向用户显示什么准备好了什么没有准备好。
+所以，我们应该在页面适当位置添加“正在加载”的指示，并且被禁用的按钮也应该这样显示，这样用户就可以清晰地看到什么准备好了，什么还没准备好。
 ```
 
-在开发中，通常在脚本需要整个 DOM 文档或者脚本的相对执行顺序很重要的时候，使用 `defer` 特性。而当脚本之间互相独立，比如计数器或者广告，并且它们相对执行顺序不重要的时候，此时使用 `async` 特性。
+在实际开发中，`defer` 用于需要整个 DOM 的脚本，和/或脚本的相对执行顺序很重要的时候。`async` 用于独立脚本，例如计数器或广告。它们的相对执行顺序无关紧要。

From 7cdee2a7b80dcb391386c3f7a95919b47c65bf35 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 15:19:51 +0800
Subject: [PATCH 06/23] Update article.md

---
 2-ui/5-loading/02-script-async-defer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md
index 956de62194..51bdec9b6a 100755
--- a/2-ui/5-loading/02-script-async-defer/article.md
+++ b/2-ui/5-loading/02-script-async-defer/article.md
@@ -196,4 +196,4 @@ loadScript("/article/script-async-defer/small.js");
 所以，我们应该在页面适当位置添加“正在加载”的指示，并且被禁用的按钮也应该这样显示，这样用户就可以清晰地看到什么准备好了，什么还没准备好。
 ```
 
-在实际开发中，`defer` 用于需要整个 DOM 的脚本，和/或脚本的相对执行顺序很重要的时候。`async` 用于独立脚本，例如计数器或广告。它们的相对执行顺序无关紧要。
+在实际开发中，`defer` 用于需要整个 DOM 的脚本，和/或脚本的相对执行顺序很重要的时候。`async` 用于独立脚本，例如计数器或广告，这些脚本的相对执行顺序无关紧要。

From 6950a0a0cdfb260053a212fedf7041bc8327c1df Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 15:29:48 +0800
Subject: [PATCH 07/23] Update solution.md

---
 .../03-onload-onerror/1-load-img-callback/solution.md     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.md b/2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.md
index 1fceec259c..6e63597f84 100644
--- a/2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.md
+++ b/2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.md
@@ -1,6 +1,6 @@
 
 算法：
-1. 为每个资源制作 `img`。
-2. 为每个 image 添加 `onload/onerror`。
-3. 在 `onload` 或 `onerror` 被触发时增加计数器。
-4. 当计数器值等于资源值时 —— 结束：`callback()`。
+1. 为每个资源创建 `img`。
+2. 为每个图片添加 `onload/onerror`。
+3. 在 `onload` 或 `onerror` 被触发时，增加计数器。
+4. 当计数器值等于资源值时 —— 我们完成了：`callback()`。

From 0348cce1eb6652432a5008443fdffa6041f3c69e Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 15:36:41 +0800
Subject: [PATCH 08/23] Update task.md

---
 2-ui/2-events/04-default-browser-action/3-image-gallery/task.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md b/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md
index ef78f789b5..a3ffdd59fe 100644
--- a/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md
+++ b/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md
@@ -4,7 +4,7 @@ importance: 5
 
 # 图片库
 
-创建一个图片库，通过点击缩略图可以更改主图像。
+创建一个图片库，通过点击缩略图可以更改主图片。
 
 像这样：
 

From 1e3b6f9386f4af7422388acb218fae47f8465657 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 16:16:29 +0800
Subject: [PATCH 09/23] Update task.md

---
 .../1-load-img-callback/task.md               | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/2-ui/5-loading/03-onload-onerror/1-load-img-callback/task.md b/2-ui/5-loading/03-onload-onerror/1-load-img-callback/task.md
index 0c4ea42c58..da68f158f5 100644
--- a/2-ui/5-loading/03-onload-onerror/1-load-img-callback/task.md
+++ b/2-ui/5-loading/03-onload-onerror/1-load-img-callback/task.md
@@ -2,22 +2,22 @@ importance: 4
 
 ---
 
-# 用回调函数加载 images
+# 使用回调函数加载图片
 
-通常，图像在被创建时才会被加载，因此当我们在页面中添加 `<img>` 时，用户不会立即看到图像。浏览器首先需要加载它。
+通常，图片在被创建时才会被加载。所以，当我们向页面中添加 `<img>` 时，用户不会立即看到图片。浏览器首先需要加载它。
 
-我们可以像这样“提前”创建它来立即显示图像：
+为了立即显示一张图片，我们可以“提前”创建它，像这样：
 
 ```js
 let img = document.createElement('img');
 img.src = 'my.jpg';
 ```
 
-浏览器开始加载图像然后保存在缓存中。之后，当相同图像出现在文档中时（无论怎样），它会立即显示。
+浏览器开始加载图片，并将其保存到缓存中。以后，当相同图片出现在文档中时（无论怎样），它都会立即显示。
 
-**创建一个函数，用来从 `source` 数组中加载所有图像，并在准备就绪时运行 `callback` 的 `preloadImages(sources, callback)` 。**
+**创建一个函数 `preloadImages(sources, callback)`，来加载来自数组 `source` 的所有图片，并在准备就绪时运行 `callback`。**
 
-例如，这将在加载图像之后显示一个 `alert`：
+例如，这段代码将在图片加载完成后显示一个 `alert`：
 
 ```js
 function loaded() {
@@ -27,10 +27,10 @@ function loaded() {
 preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);
 ```
 
-如果出现错误，函数仍会认为图像已经“被加载”。
+如果出现错误，函数应该仍假定图片已经“加载完成”。
 
-换句话说，当所有图像被加载或出现错误输出时，`callback` 都会被执行。
+换句话说，当所有图片都已加载完成，或出现错误输出时，将执行 `callback`。
 
-比如，当我们计划显示一个包含许多图像的可滚动图库，并希望确保所有的图像都被加载时，这个函数是非常有用的。
+例如，当我们计划显示一个包含很多图片的可滚动图册，并希望确保所有图片都已加载完成时，这个函数很有用。
 
-在源文档中，你可以找到指向测试图像的链接，以及检查它们是否已被加载的代码。它应该输出 `300`。
+在源文档中，你可以找到指向测试图片的链接，以及检查它们是否已加载完成的代码。它应该输出 `300`。

From caf8a58f2a4c8f6f7a6c0b6fb0a352639743bb69 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 16:17:19 +0800
Subject: [PATCH 10/23] Update task.md

---
 .../04-default-browser-action/3-image-gallery/task.md         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md b/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md
index a3ffdd59fe..f9c137c8b2 100644
--- a/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md
+++ b/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md
@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# 图片库
+# 图册
 
-创建一个图片库，通过点击缩略图可以更改主图片。
+创建一个图册，通过点击缩略图可以更改主图片。
 
 像这样：
 

From 66a7e05d170219c5d7a0de6176bd9d370a17bf8f Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 16:35:25 +0800
Subject: [PATCH 11/23] Update article.md

---
 1-js/03-code-quality/02-coding-style/article.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/1-js/03-code-quality/02-coding-style/article.md b/1-js/03-code-quality/02-coding-style/article.md
index 83761fc96c..09c2d63932 100644
--- a/1-js/03-code-quality/02-coding-style/article.md
+++ b/1-js/03-code-quality/02-coding-style/article.md
@@ -225,7 +225,7 @@ function pow(x, n) {
 
 ## 函数位置
 
-如果你正在写几个“辅助类”的函数和一些使用它们的代码，那么有三种方式来组织这些函数。
+如果你正在写几个 "helper" 函数和一些使用它们的代码，那么有三种方式来组织这些函数。
 
 1. 在调用这些函数的代码的 **上方** 声明这些函数：
 
@@ -256,7 +256,7 @@ function pow(x, n) {
     setHandler(elem);
     walkAround();
 
-    // --- *!*辅助类函数*/!* ---
+    // --- *!*helper 函数*/!* ---
     function createElement() {
       ...
     }

From d190ff1e1b7509a0d558ece5f1f1af1d7da96e7a Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 16:37:35 +0800
Subject: [PATCH 12/23] Update article.md

---
 1-js/06-advanced-functions/06-function-object/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/1-js/06-advanced-functions/06-function-object/article.md b/1-js/06-advanced-functions/06-function-object/article.md
index 6083b53192..ebbf20d765 100644
--- a/1-js/06-advanced-functions/06-function-object/article.md
+++ b/1-js/06-advanced-functions/06-function-object/article.md
@@ -347,6 +347,6 @@ welcome(); // Hello, Guest（嵌套调用有效）
 
 此外，函数可以带有额外的属性。很多知名的 JavaScript 库都充分利用了这个功能。
 
-它们创建一个“主”函数，然后给它附加很多其它 "helper" 函数。例如，[jQuery](https://jquery.com) 库创建了一个名为 `$` 的函数。[lodash](https://lodash.com) 库创建一个 `_` 函数，然后为其添加了 `_.add`、`_.keyBy` 以及其它属性（欲了解详情，参见 [docs](https://lodash.com/docs)）。实际上，它们这么做是为了减少对全局空间的污染，这样一个库就只会有一个全局变量。这样就降低了命名冲突的可能性。
+它们创建一个“主”函数，然后给它附加很多其它“辅助”函数。例如，[jQuery](https://jquery.com) 库创建了一个名为 `$` 的函数。[lodash](https://lodash.com) 库创建一个 `_` 函数，然后为其添加了 `_.add`、`_.keyBy` 以及其它属性（欲了解详情，参见 [docs](https://lodash.com/docs)）。实际上，它们这么做是为了减少对全局空间的污染，这样一个库就只会有一个全局变量。这样就降低了命名冲突的可能性。
 
 所以，一个函数本身可以完成一项有用的工作，还可以在自身的属性中附带许多其他功能。

From 689feae8d3e6e996628726fcaacfb1329efe6fd2 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 16:38:15 +0800
Subject: [PATCH 13/23] Update article.md

---
 1-js/03-code-quality/02-coding-style/article.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/1-js/03-code-quality/02-coding-style/article.md b/1-js/03-code-quality/02-coding-style/article.md
index 09c2d63932..fcf58ad3d2 100644
--- a/1-js/03-code-quality/02-coding-style/article.md
+++ b/1-js/03-code-quality/02-coding-style/article.md
@@ -225,7 +225,7 @@ function pow(x, n) {
 
 ## 函数位置
 
-如果你正在写几个 "helper" 函数和一些使用它们的代码，那么有三种方式来组织这些函数。
+如果你正在写几个“辅助”函数和一些使用它们的代码，那么有三种方式来组织这些函数。
 
 1. 在调用这些函数的代码的 **上方** 声明这些函数：
 
@@ -256,7 +256,7 @@ function pow(x, n) {
     setHandler(elem);
     walkAround();
 
-    // --- *!*helper 函数*/!* ---
+    // --- *!*辅助函数*/!* ---
     function createElement() {
       ...
     }

From 0009b7a3dcfee5d2c35206e80260d19ed393c635 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 16:39:45 +0800
Subject: [PATCH 14/23] Update article.md

---
 1-js/13-modules/02-import-export/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md
index e8ab1043e0..1aaf328ff1 100755
--- a/1-js/13-modules/02-import-export/article.md
+++ b/1-js/13-modules/02-import-export/article.md
@@ -321,7 +321,7 @@ export {default as User} from './user.js'; // 重新导出 default
 
 为什么要这样做？我们看一个实际开发中的用例。
 
-想象一下，我们正在编写一个 "package"：一个包含大量模块的文件夹，其中一些功能是导出到外部的（像 NPM 这样的工具允许发布和分发这样的 package），并且其中一些模块仅仅是供其他 package 中的模块内部使用的“帮助器（helper）”。
+想象一下，我们正在编写一个 "package"：一个包含大量模块的文件夹，其中一些功能是导出到外部的（像 NPM 这样的工具允许发布和分发这样的 package），并且其中一些模块仅仅是供其他 package 中的模块内部使用的 "helpers"。
 
 文件结构可能是这样的：
 ```

From db3c00b777acfe49caff60005ffb7c20ae08a6b2 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 16:58:59 +0800
Subject: [PATCH 15/23] Update article.md

---
 2-ui/5-loading/03-onload-onerror/article.md | 54 ++++++++++-----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/2-ui/5-loading/03-onload-onerror/article.md b/2-ui/5-loading/03-onload-onerror/article.md
index c8e2e6a3f5..35eaf75548 100644
--- a/2-ui/5-loading/03-onload-onerror/article.md
+++ b/2-ui/5-loading/03-onload-onerror/article.md
@@ -1,17 +1,17 @@
-# 资源加载：onload 和 onerror
+# 资源加载：onload，onerror
 
-浏览器允许跟踪外部资源的加载 —— 脚本、iframes、图像等。
+浏览器允许我们跟踪外部资源的加载 —— 脚本，iframe，图片等。
 
-它有两个事件：
+这里有两个事件：
 
 - `onload` —— 成功加载，
-- `onerror` —— 发生异常。
+- `onerror` —— 出现异常。
 
 ## 加载脚本
 
-假设我们需要调用属于第三方脚本的函数。
+假设我们需要加载第三方脚本，并调用其中的函数。
 
-我们可以像这样动态加载：
+我们可以像这样动态加载它：
 
 ```js
 let script = document.createElement('script');
@@ -20,66 +20,66 @@ script.src = "my.js";
 document.head.append(script);
 ```
 
-……但如何运行声明在脚本中的函数？我们需要等到脚本被加载后才能调用它。
+……但如何运行在该脚本中声明的函数？我们需要等到该脚本加载完成，之后才能调用它。
 
 ```smart
-对于我们自己的脚本，可以使用 [JavaScript modules](info:modules)，但它们并没有被第三方库广泛采用。
+对于我们自己的脚本，可以使用 [JavaScript 模块](info:modules)，但是它们并未被广泛应用于第三方库。
 ```
 
 ### script.onload
 
-主要得力于 `load` 事件。它在脚本被加载和执行后才会触发。
+我们的得力助手是 `load` 事件。它会在脚本加载并执行完成时触发。
 
 例如：
 
 ```js run untrusted
 let script = document.createElement('script');
 
-// 可以从任意域名加载任意脚本
+// 可以从任意域名，加载任意脚本
 script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"
 document.head.append(script);
 
 *!*
 script.onload = function() {
-  // 脚本创建了一个辅助函数“_”
-  alert(_); // 函数可用
+  // 该脚本创建了一个辅助函数 "_"
+  alert(_); // 该函数可用
 };
 */!*
 ```
 
-因此，在 `onload` 中我们可以使用脚本中的变量、运行函数等。
+因此，在 `onload` 中我们可以使用脚本中的变量，运行函数等。
 
-……如果加载失败怎么办？比如，没有这样的脚本（错误 404）或者服务器宕机（不可用）。
+……如果加载失败怎么办？例如，这里没有这样的脚本（error 404）或者服务器宕机（不可用）。
 
 ### script.onerror
 
-发生在脚本加载期间的错误可以在 `error` 事件上进行追踪。
+发生在脚本加载期间的错误会被 `error` 事件跟踪到。
 
-比如，我们请求一个不存在的脚本：
+例如，我们请求一个不存在的脚本：
 
 ```js run
 let script = document.createElement('script');
-script.src = "https://example.com/404.js"; // 没有这样的脚本
+script.src = "https://example.com/404.js"; // 没有这个脚本
 document.head.append(script);
 
 *!*
 script.onerror = function() {
-  alert("Error loading " + this.src); // 加载 https://example.com/404.js 发生错误
+  alert("Error loading " + this.src); // Error loading https://example.com/404.js
 };
 */!*
 ```
 
-请注意，我们无法在这里获取更多 HTTP 错误细节。我们不知道错误是 404 还是 500 或者其他情况，只知道是加载失败了。
+请注意，在这里我们无法获取更多 HTTP 错误细节。我们不知道错误是 404 还是 500 或者其他情况。只知道是加载失败了。
 
 ```warn
-`onload`/`onerror` 事件仅仅跟踪加载本身。
+`onload`/`onerror` 事件仅跟踪加载本身。
 
-跟踪脚本处理和执行期间的错误超出了这些事件的范围。如果要追踪脚本错误，可以使用 `window.onerror` 全局处理器。
+在脚本处理和执行期间可能发生的错误超出了这些事件跟踪的范围。也就是说：如果脚本成功加载，则即使脚本中有编程错误，也会触发 `onload` 事件。如果要跟踪脚本错误，可以使用 `window.onerror` 全局处理程序。
 ```
 
 ## 其他资源
 
-`load` 和 `error` 事件也适用于几乎任何具有外部 `src` 的资源。
+`load` 和 `error` 事件也适用于其他资源，基本上（basically）适用于具有外部 `src` 的任何资源。
 
 例如：
 
@@ -96,12 +96,12 @@ img.onerror = function() {
 };
 ```
 
-但也有一些注意事项：
+但是有一些注意事项：
 
-- 对于大部分资源来说，当他们被添加到文档时就开始加载。但是 `<img>` 是个例外。它要等到获取 src `(*)` 属性后才开始加载。
-- 对于 `<iframe>` 来说，只要 iframe 加载完成，不论成功还是失败，`iframe.onload` 事件都会触发，
+- 大多数资源在被添加到文档中后，便开始加载。但是 `<img>` 是个例外。它要等到获得 src `(*)` 后才开始加载。
+- 对于 `<iframe>` 来说，iframe 加载完成时会触发 `iframe.onload` 事件，无论是成功加载还是出现错误。
 
-这是出于历史遗留原因。
+这是出于历史原因。
 
 ## 跨域策略
 
@@ -196,7 +196,7 @@ window.onerror = function(message, url, line, col, errorObj) {
 
 ## 总结
 
-`<img>` 图像、外部样式表、脚本和其他资源都提供了 `load` 和 `error` 事件来追踪它们的加载：
+`<img>` 图片，外部样式表，脚本和其他资源都提供了 `load` 和 `error` 事件来跟踪它们的加载：
 
 - `load` 在成功加载时被触发。
 - `error` 在加载失败时被触发。

From 716305c754a6dda604d1355abd9246f684be198b Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 19:27:49 +0800
Subject: [PATCH 16/23] Update article.md

---
 2-ui/5-loading/03-onload-onerror/article.md | 26 ++++++++++-----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/2-ui/5-loading/03-onload-onerror/article.md b/2-ui/5-loading/03-onload-onerror/article.md
index 35eaf75548..cfe680d6b0 100644
--- a/2-ui/5-loading/03-onload-onerror/article.md
+++ b/2-ui/5-loading/03-onload-onerror/article.md
@@ -23,7 +23,7 @@ document.head.append(script);
 ……但如何运行在该脚本中声明的函数？我们需要等到该脚本加载完成，之后才能调用它。
 
 ```smart
-对于我们自己的脚本，可以使用 [JavaScript 模块](info:modules)，但是它们并未被广泛应用于第三方库。
+对于我们自己的脚本，可以使用 [JavaScript module](info:modules)，但是它们并未被广泛应用于第三方库。
 ```
 
 ### script.onload
@@ -35,7 +35,7 @@ document.head.append(script);
 ```js run untrusted
 let script = document.createElement('script');
 
-// 可以从任意域名，加载任意脚本
+// 可以从任意域名（domain），加载任意脚本
 script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"
 document.head.append(script);
 
@@ -69,7 +69,7 @@ script.onerror = function() {
 */!*
 ```
 
-请注意，在这里我们无法获取更多 HTTP 错误细节。我们不知道错误是 404 还是 500 或者其他情况。只知道是加载失败了。
+请注意，在这里我们无法获取更多 HTTP 错误详细信息。我们不知道错误是 404 还是 500 或者其他情况。只知道是加载失败了。
 
 ```warn
 `onload`/`onerror` 事件仅跟踪加载本身。
@@ -105,21 +105,21 @@ img.onerror = function() {
 
 ## 跨域策略
 
-这里有个规则：来自一个站点的脚本无法访问其他站点的内容。即 `https://facebook.com` 中的脚本不能获取 `https://gmail.com` 中的用户邮箱。
+这里有一条规则：来自一个站点的脚本无法访问其他站点的内容。例如，位于 `https://facebook.com` 的脚本无法读取位于 `https://gmail.com` 的用户邮箱。
 
-或者，更确切地说，一个源（domain/port/protocol 三者）不能获取另外一个源中的内容。因此，即使我们有一个子域名，或者仅仅是另外一个端口，这都是不同的源，彼此不能互相访问。
+或者，更确切地说，一个源（域/端口/协议三者）无法获取另一个源的内容。因此，即使我们有一个子域名，或者仅仅是另一个端口，这都是不同的源，彼此无法相互访问。
 
-这个规则同样适用于其他域中的资源。
+这个规则还影响其他域的资源。
 
-如果我们需要使用来自其他域名的脚本，并且脚本里面存在错误，那么我们就不能获取错误信息。
+如果我们使用的是来自其他域的脚本，并且该脚本中存在错误，那么我们无法获取错误的详细信息。
 
-例如，我们调用脚本中一个（错误）函数：
+例如，让我们使用一个脚本 `error.js`，该脚本只包含一个（错误）函数调用：
 ```js
 // 📁 error.js
 noSuchFunction();
 ```
 
-现在从我们的域名中加载它：
+现在从它所在的同一个站点加载它：
 
 ```html run height=0
 <script>
@@ -137,7 +137,7 @@ Uncaught ReferenceError: noSuchFunction is not defined
 https://javascript.info/article/onload-onerror/crossorigin/error.js, 1:1
 ```
 
-现在，再从其他域名中加载这个脚本：
+现在，让我们从另一个域名中加载相同的脚本：
 
 ```html run height=0
 <script>
@@ -148,16 +148,16 @@ window.onerror = function(message, url, line, col, errorObj) {
 <script src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>
 ```
 
-错误报告与上面不同，就像这样：
+错误报告与上面那个示例中的不同，就像这样：
 
 ```
 Script error.
 , 0:0
 ```
 
-错误细节可能因浏览器而异，但是原理是相同的：任何有关脚本内部的信息都是不可见的。确切来说是因为它来自于其他域。
+错误详细信息可能因浏览器而异，但是原理是相同的：有关脚本内部的任何信息（包括错误堆栈跟踪）都被隐藏了。正是因为它来自于另一个域。
 
-我们为什么需要细节信息？
+为什么我们需要错误详细信息？
 
 因为有很多服务（我们也可以自己建立）监听 `window.onerror`，在服务器上保存错误信息，并分析它们，以提供用户相应的错误页面。这很棒，因为我们可以看到由用户触发的真实错误。但是我们不能获得来自其他域名的脚本的任何错误信息。
 

From 9f00cf60f3c83aa4ded21baac2dcb806ca1a825b Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 19:39:05 +0800
Subject: [PATCH 17/23] Update article.md

---
 2-ui/5-loading/03-onload-onerror/article.md | 30 ++++++++++++---------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/2-ui/5-loading/03-onload-onerror/article.md b/2-ui/5-loading/03-onload-onerror/article.md
index cfe680d6b0..070917138b 100644
--- a/2-ui/5-loading/03-onload-onerror/article.md
+++ b/2-ui/5-loading/03-onload-onerror/article.md
@@ -5,7 +5,7 @@
 这里有两个事件：
 
 - `onload` —— 成功加载，
-- `onerror` —— 出现异常。
+- `onerror` —— 出现 error。
 
 ## 加载脚本
 
@@ -53,7 +53,7 @@ script.onload = function() {
 
 ### script.onerror
 
-发生在脚本加载期间的错误会被 `error` 事件跟踪到。
+发生在脚本加载期间的 error 会被 `error` 事件跟踪到。
 
 例如，我们请求一个不存在的脚本：
 
@@ -69,12 +69,12 @@ script.onerror = function() {
 */!*
 ```
 
-请注意，在这里我们无法获取更多 HTTP 错误详细信息。我们不知道错误是 404 还是 500 或者其他情况。只知道是加载失败了。
+请注意，在这里我们无法获取更多 HTTP error 的详细信息。我们不知道 error 是 404 还是 500 或者其他情况。只知道是加载失败了。
 
 ```warn
 `onload`/`onerror` 事件仅跟踪加载本身。
 
-在脚本处理和执行期间可能发生的错误超出了这些事件跟踪的范围。也就是说：如果脚本成功加载，则即使脚本中有编程错误，也会触发 `onload` 事件。如果要跟踪脚本错误，可以使用 `window.onerror` 全局处理程序。
+在脚本处理和执行期间可能发生的 error 超出了这些事件跟踪的范围。也就是说：如果脚本成功加载，则即使脚本中有编程 error，也会触发 `onload` 事件。如果要跟踪脚本 error，可以使用 `window.onerror` 全局处理程序。
 ```
 
 ## 其他资源
@@ -99,7 +99,7 @@ img.onerror = function() {
 但是有一些注意事项：
 
 - 大多数资源在被添加到文档中后，便开始加载。但是 `<img>` 是个例外。它要等到获得 src `(*)` 后才开始加载。
-- 对于 `<iframe>` 来说，iframe 加载完成时会触发 `iframe.onload` 事件，无论是成功加载还是出现错误。
+- 对于 `<iframe>` 来说，iframe 加载完成时会触发 `iframe.onload` 事件，无论是成功加载还是出现 error。
 
 这是出于历史原因。
 
@@ -111,7 +111,7 @@ img.onerror = function() {
 
 这个规则还影响其他域的资源。
 
-如果我们使用的是来自其他域的脚本，并且该脚本中存在错误，那么我们无法获取错误的详细信息。
+如果我们使用的是来自其他域的脚本，并且该脚本中存在 error，那么我们无法获取 error 的详细信息。
 
 例如，让我们使用一个脚本 `error.js`，该脚本只包含一个（错误）函数调用：
 ```js
@@ -130,7 +130,7 @@ window.onerror = function(message, url, line, col, errorObj) {
 <script src="https://github.com/article/onload-onerror/crossorigin/error.js"></script>
 ```
 
-我们可以看到一个很好的错误报告，就像这样：
+我们可以看到一个很好的 error 报告，就像这样：
 
 ```
 Uncaught ReferenceError: noSuchFunction is not defined
@@ -148,18 +148,24 @@ window.onerror = function(message, url, line, col, errorObj) {
 <script src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>
 ```
 
-错误报告与上面那个示例中的不同，就像这样：
+此报告与上面那个示例中的不同，就像这样：
 
 ```
 Script error.
 , 0:0
 ```
 
-错误详细信息可能因浏览器而异，但是原理是相同的：有关脚本内部的任何信息（包括错误堆栈跟踪）都被隐藏了。正是因为它来自于另一个域。
+error 的详细信息可能因浏览器而异，但是原理是相同的：有关脚本内部的任何信息（包括 error 堆栈跟踪）都被隐藏了。正是因为它来自于另一个域。
 
-为什么我们需要错误详细信息？
+为什么我们需要 error 的详细信息？
 
-因为有很多服务（我们也可以自己建立）监听 `window.onerror`，在服务器上保存错误信息，并分析它们，以提供用户相应的错误页面。这很棒，因为我们可以看到由用户触发的真实错误。但是我们不能获得来自其他域名的脚本的任何错误信息。
+因为有很多服务（我们也可以构建自己的服务）使用 `window.onerror` 监听全局 error，
+
+
+
+
+
+监听 `window.onerror`，在服务器上保存 error 信息，并分析它们，以提供用户相应的 error 页面。这很棒，因为我们可以看到由用户触发的真实 error。但是我们不能获得来自其他域名的脚本的任何 error 信息。
 
 类似的跨源策略（CORS）也适用于其他类型资源。
 
@@ -192,7 +198,7 @@ window.onerror = function(message, url, line, col, errorObj) {
 <script *!*crossorigin="anonymous"*/!* src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>
 ```
 
-现在，假设服务器提供 `Access-Control-Allow-Origin` 头，一切都正常。我们有完整的错误报告。
+现在，假设服务器提供 `Access-Control-Allow-Origin` 头，一切都正常。我们有完整的 error 报告。
 
 ## 总结
 

From b373d08878fc3774277c01d9450895f7da2bf633 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 19:51:18 +0800
Subject: [PATCH 18/23] Update article.md

---
 2-ui/5-loading/03-onload-onerror/article.md | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/2-ui/5-loading/03-onload-onerror/article.md b/2-ui/5-loading/03-onload-onerror/article.md
index 070917138b..43fc3d5de0 100644
--- a/2-ui/5-loading/03-onload-onerror/article.md
+++ b/2-ui/5-loading/03-onload-onerror/article.md
@@ -103,7 +103,7 @@ img.onerror = function() {
 
 这是出于历史原因。
 
-## 跨域策略
+## 跨源策略
 
 这里有一条规则：来自一个站点的脚本无法访问其他站点的内容。例如，位于 `https://facebook.com` 的脚本无法读取位于 `https://gmail.com` 的用户邮箱。
 
@@ -159,17 +159,11 @@ error 的详细信息可能因浏览器而异，但是原理是相同的：有
 
 为什么我们需要 error 的详细信息？
 
-因为有很多服务（我们也可以构建自己的服务）使用 `window.onerror` 监听全局 error，
+因为有很多服务（我们也可以构建自己的服务）使用 `window.onerror` 监听全局 error，保存 error 并提供访问和分析 error 的接口。这很好，因为我们可以看到由用户触发的实际中的 error。但是，如果一个脚本来自于另一个源，那么正如我们刚刚看到的那样，其中没有太多有关 error 的信息。
 
+对其他类型的资源也执行类似的跨源策略（CORS）。
 
-
-
-
-监听 `window.onerror`，在服务器上保存 error 信息，并分析它们，以提供用户相应的 error 页面。这很棒，因为我们可以看到由用户触发的真实 error。但是我们不能获得来自其他域名的脚本的任何 error 信息。
-
-类似的跨源策略（CORS）也适用于其他类型资源。
-
-**要允许跨域访问，我们需要 `crossorigin` 属性，同样对于服务器也需要提供特殊的响应头。**
+**要允许跨源访问，我们需要 `crossorigin` 属性，同样对于服务器也需要提供特殊的响应头。**
 
 这里有三个级别的跨源访问：
 
@@ -183,7 +177,7 @@ error 的详细信息可能因浏览器而异，但是原理是相同的：有
 诸如“cookies”这类的内容超出了本章的范围，你可以在 <info:cookie> 章节获取到关于它的更多信息。
 ```
 
-在我们的的例子中没有任何 crossorigin 属性。因此禁止跨域访问。让我们来加上它吧。
+在我们的的例子中没有任何 crossorigin 属性。因此禁止跨源访问。让我们来加上它吧。
 
 我们可以选择“anonymous”（不会发送 cookies，但是需要一个服务端响应头）或者“use-credentials”（发送 cookes，需要设置两个服务端响应头）。
 

From 8daf4580107af3cbbaa7de656bc8adf28b3580f6 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 19:57:59 +0800
Subject: [PATCH 19/23] Update article.md

---
 2-ui/1-document/05-basic-dom-node-properties/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md
index dc1d436eeb..bcbcc52340 100644
--- a/2-ui/1-document/05-basic-dom-node-properties/article.md
+++ b/2-ui/1-document/05-basic-dom-node-properties/article.md
@@ -188,7 +188,7 @@ tagName 和 nodeName 之间有什么不同吗？
 如果我们只处理元素，那么 `tagName` 和 `nodeName` 这两种方法，我们都可以使用，没有区别。
 
 ```smart header="标签名称始终是大写的，除非是在 XML 模式下"
-浏览器有两种处理文档（document）的模式：HTML 和 XML。通常，HTML 模式用于网页。只有在浏览器接收到带有 `Content-Type: application/xml+xhtml` 报头（header）的 XML-document 时，XML 模式才会被启用。
+浏览器有两种处理文档（document）的模式：HTML 和 XML。通常，HTML 模式用于网页。只有在浏览器接收到带有 header `Content-Type: application/xml+xhtml` 的 XML-document 时，XML 模式才会被启用。
 
 在 HTML 模式下，`tagName/nodeName` 始终是大写的：它是 `BODY`，而不是 `<body>` 或 `<BoDy>`。
 

From 9449c2e110e9ae659b3941d50ec7c6623efcf2ee Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 19:59:26 +0800
Subject: [PATCH 20/23] Update article.md

---
 1-js/11-async/03-promise-chaining/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/1-js/11-async/03-promise-chaining/article.md b/1-js/11-async/03-promise-chaining/article.md
index c7583e7732..64c02cd763 100644
--- a/1-js/11-async/03-promise-chaining/article.md
+++ b/1-js/11-async/03-promise-chaining/article.md
@@ -232,7 +232,7 @@ JavaScript 检查在 `(*)` 行中由 `.then` 处理程序（handler）返回的
 let promise = fetch(url);
 ```
 
-执行这条语句，向 `url` 发出网络请求并返回一个 promise。当远程服务器返回响应头（是在 **全部响应加载完成前**）时，该 promise 用使用一个 `response` 对象来进行 resolve。
+执行这条语句，向 `url` 发出网络请求并返回一个 promise。当远程服务器返回 header（是在 **全部响应加载完成前**）时，该 promise 用使用一个 `response` 对象来进行 resolve。
 
 为了读取完整的响应，我们应该调用 `response.text()` 方法：当全部文字（full text）内容从远程服务器下载完成后，它会返回一个 promise，该 promise 以刚刚下载完成的这个文本作为 result 进行 resolve。
 

From 01badf62e487b492f3228cf90cdc4f0075dbec1b Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 20:00:20 +0800
Subject: [PATCH 21/23] Update article.md

---
 1-js/01-getting-started/1-intro/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md
index 3f843e142d..4823e764e6 100644
--- a/1-js/01-getting-started/1-intro/article.md
+++ b/1-js/01-getting-started/1-intro/article.md
@@ -73,7 +73,7 @@ JavaScript 的能力很大程度上依赖于它执行的环境。例如：[Node.
   这就是“同源策略”。为了解决“同源策略”问题，两个标签页必须**都**包含一些处理这个问题的特殊的 JavaScript 代码，并均允许数据交换，这样才能够实现两个同源标签页的数据交换。本教程会讲到这部分相关的知识。
 
   这个限制也是为了用户的信息安全。例如，用户打开的 `http://anysite.com` 网页的 JavaScript 肯定不能访问 `http://gmail.com`（另外一个标签页打开的网页）也不能从那里窃取信息。
-- JavaScript 通过互联网可以轻松地和当前网页域名的服务器进行通讯。但是从其他网站/域名的服务器中获取数据的能力是受限的。尽管这可以实现，但是需要来自远程服务器的明确协议（在 HTTP 头中）。这也是为了用户的数据安全。
+- JavaScript 通过互联网可以轻松地和当前网页域名的服务器进行通讯。但是从其他网站/域名的服务器中获取数据的能力是受限的。尽管这可以实现，但是需要来自远程服务器的明确协议（在 HTTP header 中）。这也是为了用户的数据安全。
 
 ![](limitations.svg)
 

From f52596b37661d6347b8ee4658be5fdb4f1242677 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 20:13:57 +0800
Subject: [PATCH 22/23] Update article.md

---
 1-js/13-modules/03-modules-dynamic-imports/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/1-js/13-modules/03-modules-dynamic-imports/article.md b/1-js/13-modules/03-modules-dynamic-imports/article.md
index 8074771721..1f34ead94e 100755
--- a/1-js/13-modules/03-modules-dynamic-imports/article.md
+++ b/1-js/13-modules/03-modules-dynamic-imports/article.md
@@ -1,4 +1,4 @@
-# 动态导入（Dynamic import）
+# 动态导入
 
 我们在前面章节中介绍的导出和导入语句称为“静态”导入。语法非常简单且严格。
 

From 45446ba85661c8181ed587965684f900c82beac3 Mon Sep 17 00:00:00 2001
From: LeviDing <imdingxuewen@gmail.com>
Date: Thu, 2 Apr 2020 20:34:47 +0800
Subject: [PATCH 23/23] Update article.md

---
 2-ui/5-loading/03-onload-onerror/article.md | 32 ++++++++++-----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/2-ui/5-loading/03-onload-onerror/article.md b/2-ui/5-loading/03-onload-onerror/article.md
index 43fc3d5de0..402823ed52 100644
--- a/2-ui/5-loading/03-onload-onerror/article.md
+++ b/2-ui/5-loading/03-onload-onerror/article.md
@@ -35,7 +35,7 @@ document.head.append(script);
 ```js run untrusted
 let script = document.createElement('script');
 
-// 可以从任意域名（domain），加载任意脚本
+// 可以从任意域（domain），加载任意脚本
 script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"
 document.head.append(script);
 
@@ -107,7 +107,7 @@ img.onerror = function() {
 
 这里有一条规则：来自一个站点的脚本无法访问其他站点的内容。例如，位于 `https://facebook.com` 的脚本无法读取位于 `https://gmail.com` 的用户邮箱。
 
-或者，更确切地说，一个源（域/端口/协议三者）无法获取另一个源的内容。因此，即使我们有一个子域名，或者仅仅是另一个端口，这都是不同的源，彼此无法相互访问。
+或者，更确切地说，一个源（域/端口/协议三者）无法获取另一个源（origin）的内容。因此，即使我们有一个子域，或者仅仅是另一个端口，这都是不同的源，彼此无法相互访问。
 
 这个规则还影响其他域的资源。
 
@@ -137,7 +137,7 @@ Uncaught ReferenceError: noSuchFunction is not defined
 https://javascript.info/article/onload-onerror/crossorigin/error.js, 1:1
 ```
 
-现在，让我们从另一个域名中加载相同的脚本：
+现在，让我们从另一个域中加载相同的脚本：
 
 ```html run height=0
 <script>
@@ -159,29 +159,29 @@ error 的详细信息可能因浏览器而异，但是原理是相同的：有
 
 为什么我们需要 error 的详细信息？
 
-因为有很多服务（我们也可以构建自己的服务）使用 `window.onerror` 监听全局 error，保存 error 并提供访问和分析 error 的接口。这很好，因为我们可以看到由用户触发的实际中的 error。但是，如果一个脚本来自于另一个源，那么正如我们刚刚看到的那样，其中没有太多有关 error 的信息。
+因为有很多服务（我们也可以构建自己的服务）使用 `window.onerror` 监听全局 error，保存 error 并提供访问和分析 error 的接口。这很好，因为我们可以看到由用户触发的实际中的 error。但是，如果一个脚本来自于另一个源（origin），那么正如我们刚刚看到的那样，其中没有太多有关 error 的信息。
 
 对其他类型的资源也执行类似的跨源策略（CORS）。
 
-**要允许跨源访问，我们需要 `crossorigin` 属性，同样对于服务器也需要提供特殊的响应头。**
+**要允许跨源访问，`<script>` 标签需要具有 `crossorigin` 特性（attribute），并且远程服务器必须提供特殊的 header。**
 
 这里有三个级别的跨源访问：
 
-1. **无 `crossorigin` 属性*** —— 禁止访问。
-2. **`crossorigin="anonymous"`** —— 如果服务器的响应头中提供了 `Access-Control-Allow-Origin` 为 `*` 或者为我们的源，那么就可以访问。浏览器不会将授权信息和 cookies 发送到远程服务器。
-3. **`crossorigin="use-credentials"`** —— 如果服务器的响应头提供了 `Access-Control-Allow-Origin` 为我们的源，且提供了 `Access-Control-Allow-Credentials: true`，那么我们就可以访问。浏览器此时会将授权信息和 cookies 发送到远程服务器。
+1. **无 `crossorigin` 特性** —— 禁止访问。
+2. **`crossorigin="anonymous"`** —— 如果服务器的响应带有包含 `*` 或我们的源（origin）的 header `Access-Control-Allow-Origin`，则允许访问。浏览器不会将授权信息和 cookie 发送到远程服务器。
+3. **`crossorigin="use-credentials"`** —— 如果服务器发送回带有我们的源的 header `Access-Control-Allow-Origin` 和 `Access-Control-Allow-Credentials: true`，则允许访问。浏览器会将授权信息和 cookie 发送到远程服务器。
 
 ```smart
-你可以在 <info:fetch-crossorigin> 中阅读更多关于跨源访问的信息。这里虽然它是以 `fetch` 方法作为网络请求的，但策略都是相同的。
+你可以在 <info:fetch-crossorigin> 一章中了解有关跨源访问的更多信息。这一章描述了用于网络请求的 `fetch` 方法，但策略是完全相同的。
 
-诸如“cookies”这类的内容超出了本章的范围，你可以在 <info:cookie> 章节获取到关于它的更多信息。
+诸如 "cookie" 之类的内容超出了本章的范围，但你可以在 <info:cookie> 一章学习它们。
 ```
 
-在我们的的例子中没有任何 crossorigin 属性。因此禁止跨源访问。让我们来加上它吧。
+在我们的示例中没有任何跨源特性（attribute）。因此，跨源访问被禁止。让我们来添加它吧。
 
-我们可以选择“anonymous”（不会发送 cookies，但是需要一个服务端响应头）或者“use-credentials”（发送 cookes，需要设置两个服务端响应头）。
+我们可以在 `"anonymous"`（不会发送 cookie，需要一个服务器端的 header）和 `"use-credentials"`（会发送 cookie，需要两个服务器端的 header）。
 
-如果我们不关心“cookies”，那么可以使用`“anonymous”`：
+如果我们不关心 cookie，那么可以选择 `"anonymous"`：
 
 ```html run height=0
 <script>
@@ -192,15 +192,15 @@ window.onerror = function(message, url, line, col, errorObj) {
 <script *!*crossorigin="anonymous"*/!* src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>
 ```
 
-现在，假设服务器提供 `Access-Control-Allow-Origin` 头，一切都正常。我们有完整的 error 报告。
+现在，假设服务器提供了 `Access-Control-Allow-Origin` header，一切都正常。我们有了完整的 error 报告。
 
 ## 总结
 
-`<img>` 图片，外部样式表，脚本和其他资源都提供了 `load` 和 `error` 事件来跟踪它们的加载：
+图片 `<img>`，外部样式，脚本和其他资源都提供了 `load` 和 `error` 事件以跟踪它们的加载：
 
 - `load` 在成功加载时被触发。
 - `error` 在加载失败时被触发。
 
-只有 `<iframe>` 特殊：出于历史原因，不管加载成功还是失败，即使页面没有被找到，它都会触发 `load` 事件。
+唯一的例外是 `<iframe>`：出于历史原因，不管加载成功还是失败，即使页面没有被找到，它都会触发 `load` 事件。
 
 `readystatechange` 事件也适用于资源，但很少被使用，因为 `load/error` 事件更简单。