From d05b37a915427d2df67367a9aba300e3557ee81f Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Sat, 28 May 2022 17:31:54 +0800 Subject: [PATCH] AutoCorrect files/zh-cn/web/{n,s,p}*/ --- .../web/manifest/background_color/index.html | 4 +- files/zh-cn/web/manifest/index.html | 60 +++++++++---------- files/zh-cn/web/mathml/attribute/index.html | 10 ++-- files/zh-cn/web/mathml/authoring/index.html | 8 +-- files/zh-cn/web/mathml/element/index.html | 2 +- .../web/mathml/element/maction/index.html | 18 +++--- .../zh-cn/web/mathml/element/math/index.html | 24 ++++---- .../zh-cn/web/mathml/element/mroot/index.html | 6 +- .../web/mathml/element/mspace/index.html | 6 +- .../zh-cn/web/mathml/element/msqrt/index.html | 4 +- .../zh-cn/web/mathml/element/msub/index.html | 8 +-- .../zh-cn/web/mathml/element/msup/index.html | 4 +- .../zh-cn/web/media/autoplay_guide/index.html | 12 ++-- .../index.html | 16 ++--- .../web/media/formats/containers/index.html | 4 +- .../web/media/formats/image_types/index.html | 2 +- .../web/media/formats/video_codecs/index.html | 6 +- files/zh-cn/web/media/index.html | 4 +- .../critical_rendering_path/index.html | 6 +- .../index.html | 36 +++++------ .../web/performance/dns-prefetch/index.html | 10 ++-- .../performance/how_browsers_work/index.md | 8 +-- files/zh-cn/web/performance/index.html | 38 ++++++------ .../web/performance/lazy_loading/index.html | 6 +- .../optimizing_startup_performance/index.html | 22 +++---- .../performance/rum-vs-synthetic/index.html | 2 +- .../add_to_home_screen/index.html | 14 ++--- .../app_structure/index.html | 8 +-- .../zh-cn/web/progressive_web_apps/index.html | 2 +- .../introduction/index.html | 8 +-- .../offline_service_workers/index.html | 8 +-- files/zh-cn/web/security/index.html | 2 +- .../security/same-origin_policy/index.html | 44 +++++++------- .../web/security/secure_contexts/index.html | 12 ++-- .../security/securing_your_site/index.html | 14 ++--- .../index.html | 4 +- .../security/subresource_integrity/index.html | 6 +- .../transport_layer_security/index.html | 6 +- 38 files changed, 227 insertions(+), 227 deletions(-) diff --git a/files/zh-cn/web/manifest/background_color/index.html b/files/zh-cn/web/manifest/background_color/index.html index 844e64dd16aab0..d5bf5b49a2f5ed 100644 --- a/files/zh-cn/web/manifest/background_color/index.html +++ b/files/zh-cn/web/manifest/background_color/index.html @@ -28,12 +28,12 @@
Type

（原文：The background_color member defines a placeholder background color for the application page to display before its stylesheet is loaded. This value is used by the user agent to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded.）

-

因此，background_color 应于 {{cssxref("background-color")}}网站样式表中的CSS属性匹配，以在启动Web应用程序和加载网站内容之间进行平滑过渡。

+

因此，background_color 应于 {{cssxref("background-color")}}网站样式表中的 CSS 属性匹配，以在启动 Web 应用程序和加载网站内容之间进行平滑过渡。

（原文：Therefore background_color should match the {{cssxref("background-color")}} CSS property in the site’s stylesheet for a smooth transition between launching the web application and loading the site's content.）

-

注意：该 background_color 构件仅用于在从网络或存储介质加载主样式表时改善用户体验。{{cssxref("background-color")}} 当渐进式Web应用程序样式表可用时，用户代理不会将其用作CSS属性。

+

注意：该 background_color 构件仅用于在从网络或存储介质加载主样式表时改善用户体验。{{cssxref("background-color")}} 当渐进式 Web 应用程序样式表可用时，用户代理不会将其用作 CSS 属性。

实例

diff --git a/files/zh-cn/web/manifest/index.html b/files/zh-cn/web/manifest/index.html index 118f51c16463bb..fbe70b509f1440 100644 --- a/files/zh-cn/web/manifest/index.html +++ b/files/zh-cn/web/manifest/index.html @@ -7,13 +7,13 @@ - web app manifest translation_of: Web/Manifest --- -

Web应用程序清单在一个JSON文本文件中提供有关应用程序的信息（如名称，作者，图标和描述）。manifest 的目的是将Web应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。

+

Web 应用程序清单在一个 JSON 文本文件中提供有关应用程序的信息（如名称，作者，图标和描述）。manifest 的目的是将 Web 应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。

-

Web应用程序清单是被称为渐进式Web应用程序(PWA)的Web技术集合的一部分, 它们是可以安装到设备的主屏幕的网络应用程序，而不需要用户通过应用商店，伴随着其他功能, 比如离线可用和接收推送通知。

+

Web 应用程序清单是被称为渐进式 Web 应用程序 (PWA)的 Web 技术集合的一部分，它们是可以安装到设备的主屏幕的网络应用程序，而不需要用户通过应用商店，伴随着其他功能，比如离线可用和接收推送通知。

-

Web应用程序清单部署在您的HTML页面中，使用在你的文件的头部的一个链接标记：

+

Web 应用程序清单部署在您的 HTML 页面中，使用在你的文件的头部的一个链接标记：

<link rel="manifest" href="/manifest.json">
@@ -65,29 +65,29 @@

成员

background_color

-

为web应用程序预定义的背景颜色。此值在应用程序样式表中可以再次声明。它主要用于在样式表加载之前，当加载manifest，浏览器可以用来绘制web应用程序的背景颜色。在启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。

+

为 web 应用程序预定义的背景颜色。此值在应用程序样式表中可以再次声明。它主要用于在样式表加载之前，当加载 manifest，浏览器可以用来绘制 web 应用程序的背景颜色。在启动 web 应用程序和加载应用程序的内容之间创建了一个平滑的过渡。

"background_color": "red"
-

注意：background_color只是在web应用程序加载时提高用户体验，而当web应用程序的样式表可用时，不能替代作为背景颜色使用。

+

注意：background_color 只是在 web 应用程序加载时提高用户体验，而当 web 应用程序的样式表可用时，不能替代作为背景颜色使用。

description

-

提供有关Web应用程序的一般描述。

+

提供有关 Web 应用程序的一般描述。

"description": "The app that helps you find the best food in town!"

dir

-

指定名称、短名称和描述成员的主文本方向。与lang一起配置，可以帮助正确显示右到左文本。

+

指定名称、短名称和描述成员的主文本方向。与 lang 一起配置，可以帮助正确显示右到左文本。

"dir": "rtl",
 "lang": "ar",
 "short_name": "أنا من التطبيق!"
-

可选值:

+

可选值：

-

注意：当省略时，默认为auto

+

注意：当省略时，默认为 auto

display

-

定义开发人员对Web应用程序的首选显示模式。

+

定义开发人员对 Web 应用程序的首选显示模式。

"display": "standalone"
-

有效值:

+

有效值：

@@ -118,12 +118,12 @@

display

- + - + @@ -140,12 +140,12 @@

display

fullscreen全屏显示, 所有可用的显示区域都被使用, 并且不显示状态栏{{Glossary("chrome")}}。全屏显示，所有可用的显示区域都被使用，并且不显示状态栏{{Glossary("chrome")}}。 standalone
standalone让这个应用看起来像一个独立的应用程序，包括具有不同的窗口，在应用程序启动器中拥有自己的图标等。这个模式中，用户代理将移除用于控制导航的UI元素，但是可以包括其他UI元素，例如状态栏。让这个应用看起来像一个独立的应用程序，包括具有不同的窗口，在应用程序启动器中拥有自己的图标等。这个模式中，用户代理将移除用于控制导航的 UI 元素，但是可以包括其他 UI 元素，例如状态栏。 minimal-ui
-

Note: 您可以使用显示模式媒体功能，根据显示模式选择性地将CSS应用到您的应用程序。 这可用于在从URL启动网站和从桌面图标启动网站之间提供一致的用户体验。

+

Note: 您可以使用显示模式媒体功能，根据显示模式选择性地将 CSS 应用到您的应用程序。 这可用于在从 URL 启动网站和从桌面图标启动网站之间提供一致的用户体验。

icons

-

指定可在各种环境中用作应用程序图标的图像对象数组。 例如，它们可以用来在其他应用程序列表中表示Web应用程序，或者将Web应用程序与OS的任务切换器和/或系统偏好集成在一起。

+

指定可在各种环境中用作应用程序图标的图像对象数组。 例如，它们可以用来在其他应用程序列表中表示 Web 应用程序，或者将 Web 应用程序与OS的任务切换器和/或系统偏好集成在一起。

"icons": [
   {
@@ -183,7 +183,7 @@ 
icons

   
   
    src
-   图像文件的路径。 如果src是一个相对URL，则基本URL将是manifest的URL。
+   图像文件的路径。 如果src是一个相对 URL，则基本 URL 将是 manifest 的 URL。
   
   
    type
@@ -206,7 +206,7 @@ 
name

 
 
orientation

 
-
定义所有Web应用程序顶级的默认方向 {{Glossary("Browsing context", "browsing contexts")}}.

+
定义所有 Web 应用程序顶级的默认方向 {{Glossary("Browsing context", "browsing contexts")}}.

 
 
​​"orientation": "portrait-primary"

 
@@ -225,17 +225,17 @@ 
orientation

 
 
 
-
指定一个布尔值，提示用户代理向用户指示指定的相关应用程序（请参见下文）可用，并建议通过Web应用程序。 只有当相关的本地应用程序确实提供了某些Web应用程序无法做到的事情时，才应该使用它。

+
指定一个布尔值，提示用户代理向用户指示指定的相关应用程序（请参见下文）可用，并建议通过 Web 应用程序。 只有当相关的本地应用程序确实提供了某些 Web 应用程序无法做到的事情时，才应该使用它。

 
 
"prefer_related_applications": false

 
 

-
Note: 如果省略,默认设置为 false.

+
Note: 如果省略，默认设置为 false.

 

 
 
 
-
指定一个“应用程序对象”数组，代表可由底层平台安装或可访问的本机应用程序 - 例如可通过Google Play Store获取的原生Android应用程序。 这样的应用程序旨在替代提供类似或等同功能的Web应用程序 - 就像Web应用程序的本机应用程序版本一样。

+
指定一个“应用程序对象”数组，代表可由底层平台安装或可访问的本机应用程序 - 例如可通过 Google Play Store 获取的原生 Android 应用程序。 这样的应用程序旨在替代提供类似或等同功能的 Web 应用程序 - 就像 Web 应用程序的本机应用程序版本一样。

 
 
"related_applications": [
   {
@@ -263,49 +263,49 @@ 
   
   
    url
-   可以找到应用程序的URL。
+   可以找到应用程序的 URL。
   
   
    id
-   用于表示指定平台上的应用程序的ID。
+   用于表示指定平台上的应用程序的 ID。
   
  
 
 
 
scope

 
-
定义此Web应用程序的应用程序上下文的导航范围。 这基本上限制了manifest可以查看的网页。 如果用户在范围之外浏览应用程序，则返回到正常的网页。

+
定义此 Web 应用程序的应用程序上下文的导航范围。 这基本上限制了 manifest 可以查看的网页。 如果用户在范围之外浏览应用程序，则返回到正常的网页。

 
-
如果scope是相对URL，则基本URL将是manifest的URL。

+
如果scope是相对 URL，则基本 URL 将是 manifest 的 URL。

 
 
"scope": "/myapp/"

 
 
short_name

 
-
为应用程序提供简短易读的名称。 这是为了在没有足够空间显示Web应用程序的全名时使用。

+
为应用程序提供简短易读的名称。 这是为了在没有足够空间显示 Web 应用程序的全名时使用。

 
 
"short_name": "I/O 2017"
 

 
 
start_url

 
-
指定用户从设备启动应用程序时加载的URL。 如果以相对URL的形式给出，则基本URL将是manifest的URL。

+
指定用户从设备启动应用程序时加载的 URL。 如果以相对 URL 的形式给出，则基本 URL 将是 manifest 的 URL。

 
 
"start_url": "./?utm_source=web_app_manifest"

 
 
theme_color

 
-
定义应用程序的默认主题颜色。 这有时会影响操作系统显示应用程序的方式（例如，在Android的任务切换器上，主题颜色包围应用程序）。

+
定义应用程序的默认主题颜色。 这有时会影响操作系统显示应用程序的方式（例如，在 Android 的任务切换器上，主题颜色包围应用程序）。

 
 
"theme_color": "aliceblue"

 
 
初始屏幕

 
-
在Chrome 47及更高版本中，从主屏幕启动的Web应用程序将显示启动画面。 这个启动画面是使用Web应用程序清单中的属性自动生成的，具体来说就是：name，background_color以及icons 中距设备最近128dpi的图标。

+
在 Chrome 47 及更高版本中，从主屏幕启动的 Web 应用程序将显示启动画面。 这个启动画面是使用 Web 应用程序清单中的属性自动生成的，具体来说就是：name，background_color以及icons 中距设备最近 128dpi 的图标。

 
-
Mime类型

+
Mime 类型

 
-
Manifests 应使用 application/manifest+json MIME 类型. 但是, 你不必非得这样做.

+
Manifests 应使用 application/manifest+json MIME 类型。但是，你不必非得这样做。

 
 
规范

 
diff --git a/files/zh-cn/web/mathml/attribute/index.html b/files/zh-cn/web/mathml/attribute/index.html
index 496c69a50accff..095df7836c36a1 100644
--- a/files/zh-cn/web/mathml/attribute/index.html
+++ b/files/zh-cn/web/mathml/attribute/index.html
@@ -3,13 +3,13 @@
 slug: Web/MathML/Attribute
 translation_of: Web/MathML/Attribute
 ---
-
此页面是MathML属性的字母表。 每个属性的更多详细信息请看这里element pages。

+
此页面是 MathML 属性的字母表。 每个属性的更多详细信息请看这里element pages。

 
 
注意：

 
 
    
- 
  • MathML的 {{ MathMLElement("mstyle") }} 和 {{ MathMLElement("math") }} 元素接受所有 MathML 的描述元素。
    • 
- 
  • 请参阅MathML中值（values）和单位的注释值。
    • 
+ 
  • MathML 的 {{ MathMLElement("mstyle") }} 和 {{ MathMLElement("math") }} 元素接受所有 MathML 的描述元素。
    • 
+ 
  • 请参阅 MathML 中值（values）和单位的注释值。
    • 
 

 
 
@@ -25,7 +25,7 @@
    
@@ -34,7 +34,7 @@
    
diff --git a/files/zh-cn/web/mathml/authoring/index.html b/files/zh-cn/web/mathml/authoring/index.html
index e7295b1d59bc64..ad5e679d4d6b90 100644
--- a/files/zh-cn/web/mathml/authoring/index.html
+++ b/files/zh-cn/web/mathml/authoring/index.html
@@ -10,7 +10,7 @@
 
 
这个页面解释了如何利用 MathML 语言书写数学公式。就像 HTML，MathML 是用标签和属性描述的。当你的文档包含了高级结构比如说列表或表格的时候，HTML 会变得很冗长，但是幸好还有很多来自简单记号法的生成器，“所见即所得”编辑器以及别的内容管理系统可以帮助你编写 Web 网页。

 
-
数学公式记号法在结构方面更加复杂，像分数、平方根或者矩阵，很可能需要它们自己的标签。结果是，好的 MathML 编辑工具很重要，我们在下面描述一些工具。值得一说的是，Mozilla MathML 工作小组已经开发出了 TeXZilla，这是一个基于 JavaScript、支持 Unicode 编码的 LaTeX 转 MathML 转换器，is intended to be used in many scenarios described here。当然了，这个列表并不详尽，我们建议你自己去查看 W3C MathML软件列表，你可以在那里找到很多别的工具。

+
数学公式记号法在结构方面更加复杂，像分数、平方根或者矩阵，很可能需要它们自己的标签。结果是，好的 MathML 编辑工具很重要，我们在下面描述一些工具。值得一说的是，Mozilla MathML 工作小组已经开发出了 TeXZilla，这是一个基于 JavaScript、支持 Unicode 编码的 LaTeX 转 MathML 转换器，is intended to be used in many scenarios described here。当然了，这个列表并不详尽，我们建议你自己去查看 W3C MathML 软件列表，你可以在那里找到很多别的工具。
注意，根据设计，MathML 在 HTML5 中是完美整合的，而且你可以使用寻常的 Web 功能，比如说 CSS、DOM、JavaScript 或 SVG。这超出这个文档的范围了，但是任何拥有基础 Web 语言知识的人都能够轻松地学会用 MathML 综合这些功能。请阅读我们的文档以及 MathML 参考以了解详情。

 
@@ -45,11 +45,11 @@ 
HTML 网
 
 
对不支持 MathML 的浏览器的后备计划

 
-
不幸的是，一些浏览器不能呈现 MathML 方程式，或者只能有限地支持它。因此，你可能需要使用一个MathML polyfill 以提供一些用于呈现的后备计划。如果你只需要基本的数学公式结构，比如说用在这个 MDN wiki 中的这些，那么，一个小型的 mathml.css 样式表就足够了。要想使用它，只需要在你的文档中插入一行内容：

+
不幸的是，一些浏览器不能呈现 MathML 方程式，或者只能有限地支持它。因此，你可能需要使用一个 MathML polyfill 以提供一些用于呈现的后备计划。如果你只需要基本的数学公式结构，比如说用在这个 MDN wiki 中的这些，那么，一个小型的 mathml.css 样式表就足够了。要想使用它，只需要在你的文档中插入一行内容：
<script src="http://fred-wang.github.io/mathml.css/mspace.js"></script>

 
-
如果你需要更多复杂的结构，你需要考虑使用更重一些的 MathJax 库作为一个MathML polyfill：

+
如果你需要更多复杂的结构，你需要考虑使用更重一些的 MathJax 库作为一个 MathML polyfill：
<script src="http://fred-wang.github.io/mathjax.js/mpadded-min.js"></script>

 
@@ -93,7 +93,7 @@ 
数学公式字体
You can then use the @font-face rule as usual to provide WOFF fallback for Latin Modern and Latin Modern Math. See this GitHub repository to get WOFF fonts and sample CSS stylesheets to use on your Web site and check its test page.

 
-
XML文档中的 MathML（XHTML、EPUB，等等）

+
XML 文档中的 MathML（XHTML、EPUB，等等）
If for some reason you need to use MathML in XML documents, be sure to satisfy the usual requirements: well-formed document, use of correct MIME type, MathML namespace "http://www.w3.org/1998/Math/MathML" on <math> roots. For example, the XHTML version of the previous example looks like this:

   

diff --git a/files/zh-cn/web/mathml/element/index.html b/files/zh-cn/web/mathml/element/index.html
index 6eabd340c79ae6..892003acc9cbca 100644
--- a/files/zh-cn/web/mathml/element/index.html
+++ b/files/zh-cn/web/mathml/element/index.html
@@ -128,7 +128,7 @@ 
U
    
  
  • {{MathMLElement("munder")}}（下标）
    • 
- 
  • {{MathMLElement("munderover")}}（上标-下标对）
    • 
+ 
  • {{MathMLElement("munderover")}}（上标 - 下标对）
    • 
 
其他元素

diff --git a/files/zh-cn/web/mathml/element/maction/index.html b/files/zh-cn/web/mathml/element/maction/index.html
index b31cec26c6769a..db8fb919eb842e 100644
--- a/files/zh-cn/web/mathml/element/maction/index.html
+++ b/files/zh-cn/web/mathml/element/maction/index.html
@@ -15,8 +15,8 @@ 
属性
actiontype
该属性描述元素上发生了哪种行为，有如下几种取值：
  
    
-  
  • statusline: 当元素被点击或屏幕阅读器的指针指向该元素时触发，message会在浏览器的状态栏中显示。语法如下：<maction actiontype="statusline"> expression message </maction>。
    • 
-  
  • toggle: 当子表达式被点击时触发，子表达式会依次显示。因此每次点击时selection的值都会增加。语法如下：<maction actiontype="toggle" selection="positive-integer" > expression1 expression2 expressionN </maction>。
    • 
+  
  • statusline: 当元素被点击或屏幕阅读器的指针指向该元素时触发，message 会在浏览器的状态栏中显示。语法如下：<maction actiontype="statusline"> expression message </maction>。
    • 
+  
  • toggle: 当子表达式被点击时触发，子表达式会依次显示。因此每次点击时 selection 的值都会增加。语法如下：<maction actiontype="toggle" selection="positive-integer" > expression1 expression2 expressionN </maction>。
    • 
   
  • tooltip: 当指针指向表达式时触发，会在表达式附近显示一个提示框。语法如下：<maction actiontype="tooltip"> expression message </maction>。
    • 
  

  

@@ -25,9 +25,9 @@ 
属性
href
用来设置标签点击后跳转的链接。
mathbackground

- 
用来设置标签的背景色，可以使用#rgb、#rrggbb或者HTML颜色名。

+ 
用来设置标签的背景色，可以使用#rgb、#rrggbb或者HTML 颜色名。
mathcolor

- 
用来设置文字和分数的线的颜色，同样可以使用#rgb、#rrggbb或者HTML颜色名。

+ 
用来设置文字和分数的线的颜色，同样可以使用#rgb、#rrggbb或者HTML 颜色名。
selection
用来设置该行为作用在哪个子元素上，默认为1，代表第一个子元素。

@@ -96,16 +96,16 @@ 
浏览器兼容性

 
 {{Compat("mathml.elements.maction")}}
 
-
Gecko具体说明

+
Gecko 具体说明
    
- 
  • 在Gecko 9.0 {{ geckoRelease("9.0") }} 之前，actiontype属性支持的非标准的restyle值，如今它已经不再支持。
    • 
- 
  • 在Gecko 14.0 {{ geckoRelease("14.0") }} 之前，statusline 行为类型使用了如下所示的非标准语法，如今它已按照MathML规范被修复了。
+ 
  • 在 Gecko 9.0 {{ geckoRelease("9.0") }} 之前，actiontype属性支持的非标准的restyle值，如今它已经不再支持。
    • 
+ 
  • 在 Gecko 14.0 {{ geckoRelease("14.0") }} 之前，statusline 行为类型使用了如下所示的非标准语法，如今它已按照 MathML 规范被修复了。
   
    <maction actiontype="statusline#(message)">
 (expression)
 </maction>
 
    
  
    • 
- 
  • 在Gecko 15.0 {{geckoRelease("15.0")}}中，只有actiontype属性的值为toggle时，selection属性才会有作用。
    • 
- 
  • 从Gecko 16.0 {{geckoRelease("16.0")}}开始，当actiontype属性的值无效时，selection属性仍然起作用。如果未指定actiontype或者selection属性的值无效，将抛出一个MathML错误（无效的标记）。
    • 
+ 
  • 在 Gecko 15.0 {{geckoRelease("15.0")}}中，只有 actiontype 属性的值为toggle时，selection属性才会有作用。
    • 
+ 
  • 从 Gecko 16.0 {{geckoRelease("16.0")}}开始，当actiontype属性的值无效时，selection属性仍然起作用。如果未指定actiontype或者selection属性的值无效，将抛出一个 MathML 错误（无效的标记）。
    • 
 

diff --git a/files/zh-cn/web/mathml/element/math/index.html b/files/zh-cn/web/mathml/element/math/index.html
index 5eada860f8d262..9ae82856fe16f5 100644
--- a/files/zh-cn/web/mathml/element/math/index.html
+++ b/files/zh-cn/web/mathml/element/math/index.html
@@ -9,7 +9,7 @@
 ---
 
{{MathMLRef}}

 
-
MathML的顶级元素是<math>。所有有效的MathML实例必须被包括在 <math> 标记中。另外不可以在一个 <math> 元素中嵌套第二个 <math> 元素，但是 <math> 元素中可以有任意多的子元素 。

+
MathML 的顶级元素是<math>。所有有效的 MathML 实例必须被包括在 <math> 标记中。另外不可以在一个 <math> 元素中嵌套第二个 <math> 元素，但是 <math> 元素中可以有任意多的子元素 。
属性

 
@@ -21,23 +21,23 @@ 
属性
dir
公式的整体方向。取值可以是 ltr (从左到右) 或者 rtl (从右到左).
href

- 
用于给公式设置一个超链接的URI。

+ 
用于给公式设置一个超链接的 URI。
mathbackground

- 
背景颜色。你可以使用#rgb格式、 #rrggbb 格式和 HTML颜色名。

+ 
背景颜色。你可以使用#rgb格式、 #rrggbb 格式和 HTML 颜色名。
mathcolor

- 
公式的文本颜色。你可以使用#rgb格式、 #rrggbb 格式和 HTML颜色名。

+ 
公式的文本颜色。你可以使用#rgb格式、 #rrggbb 格式和 HTML 颜色名。
display

- 
这个枚举属性指定本标记所括的MathML代码应该如何被显示。该属性有如下取值：
+ 
这个枚举属性指定本标记所括的 MathML 代码应该如何被显示。该属性有如下取值：
  
    
-  
  • block, 使用该值会使该MathML元素显示于文本之外，成为一个独立的块元素，不受其所在的文本的影响。
    • 
-  
  • inline, 使用该值使这段MathML显示为行内元素，放置于当前文本的区域中。除非改变文本的显示，否则无法移动这个MathML的显示位置。
    • 
+  
  • block, 使用该值会使该 MathML 元素显示于文本之外，成为一个独立的块元素，不受其所在的文本的影响。
    • 
+  
  • inline, 使用该值使这段 MathML 显示为行内元素，放置于当前文本的区域中。除非改变文本的显示，否则无法移动这个 MathML 的显示位置。
    • 
  

 
  
如果没有指定该属性值，默认值采用 inline。

  
mod {{deprecated_inline}}

- 
因为display属性的出现而废弃。

- 可用取值为：display (效果和display="block"一样) 和and inline.

+ 
因为display 属性的出现而废弃。

+ 可用取值为：display (效果和display="block"一样) 和 and inline.
overflow
指定当该数学公式超过了其运行的范围时应该如何表现。

  可能的取值为： linebreak (默认值), scroll, elide, truncate, scale.

@@ -115,7 +115,7 @@ 
XHTML 记号

 </body>
 </html>
 
-
注意： XHTML 文档如果带有MathML，必须将文档的MIME类型设置为application/xhtml+xml进行发送。一般来说可以通过将扩展名改为.xhtml 来实现对本地文件的修改。对于Apache服务器，你可以配置.htaccess文件 来达到映射扩展名为正确的MIME类型的目的。因为MathML被放在一个XML文件中，你必须编写一个严格符合XML格式的文档。

+
注意： XHTML 文档如果带有 MathML，必须将文档的 MIME 类型设置为application/xhtml+xml进行发送。一般来说可以通过将扩展名改为.xhtml 来实现对本地文件的修改。对于 Apache 服务器，你可以配置.htaccess文件 来达到映射扩展名为正确的 MIME 类型的目的。因为 MathML 被放在一个 XML 文件中，你必须编写一个严格符合 XML 格式的文档。
规范

 
@@ -147,9 +147,9 @@ 
浏览器兼容性
Gecko-specific 注释

 
-
Gecko 7.0 {{ geckoRelease("7.0") }} 添加了对所有MathML属性在顶级math元素上的支持。 (也就是说和添加一个{{ MathMLElement("mstyle") }}元素效果一样)。然而，displaystyle 属性直到Gecko 8.0 {{ geckoRelease("8.0") }} 才 被添加进实现。

+
Gecko 7.0 {{ geckoRelease("7.0") }} 添加了对所有 MathML 属性在顶级 math 元素上的支持。 (也就是说和添加一个{{ MathMLElement("mstyle") }}元素效果一样)。然而，displaystyle 属性直到 Gecko 8.0 {{ geckoRelease("8.0") }} 才 被添加进实现。

 
-
纯文本的fall-back (alttext) 或者指定替代图像的属性altimg, altimg-width, altimg-height 或 altimg-valign 目前都还没有在Gecko中实现。

+
纯文本的 fall-back (alttext) 或者指定替代图像的属性altimg, altimg-width, altimg-height 或 altimg-valign 目前都还没有在 Gecko 中实现。
另见

 
diff --git a/files/zh-cn/web/mathml/element/mroot/index.html b/files/zh-cn/web/mathml/element/mroot/index.html
index 284ce119855138..c96917827a017c 100644
--- a/files/zh-cn/web/mathml/element/mroot/index.html
+++ b/files/zh-cn/web/mathml/element/mroot/index.html
@@ -5,7 +5,7 @@
 ---
 
{{MathMLRef}}

 
-
MathML的<mroot>元素用来表示一个有明确根指数的根式。它接受两个参数，语法如下：<mroot> base index </mroot>。

+
MathML 的<mroot>元素用来表示一个有明确根指数的根式。它接受两个参数，语法如下：<mroot> base index </mroot>。
属性

 
@@ -15,9 +15,9 @@ 
属性
href
用来设置标签点击后跳转的链接。
mathbackground

- 
用来设置标签的背景色，可以使用#rgb、#rrggbb或者HTML颜色名。

+ 
用来设置标签的背景色，可以使用#rgb、#rrggbb或者HTML 颜色名。
mathcolor

- 
用来设置文字（包括根底数、根指数和根号本身）的颜色，同样可以使用#rgb、#rrggbb或者HTML颜色名。

+ 
用来设置文字（包括根底数、根指数和根号本身）的颜色，同样可以使用#rgb、#rrggbb或者HTML 颜色名。
例子

diff --git a/files/zh-cn/web/mathml/element/mspace/index.html b/files/zh-cn/web/mathml/element/mspace/index.html
index c063dc4f9f4673..b6fb4681ef1a68 100644
--- a/files/zh-cn/web/mathml/element/mspace/index.html
+++ b/files/zh-cn/web/mathml/element/mspace/index.html
@@ -20,7 +20,7 @@ 
属性
Indicates a line-break at the space. Possible values: auto (default value), newline, nobreak, goodbreak, badbreak.

  Starting with MathML 3, it is preferred to use {{ MathMLElement("mo") }} to control linebreaking.
mathbackground

- 
用来设置背景色，可以使用#rgb、#rrggbb或者HTML颜色名。

+ 
用来设置背景色，可以使用#rgb、#rrggbb或者HTML 颜色名。
width
空白的宽度 (参阅 length).

@@ -66,11 +66,11 @@ 
浏览器兼容性

 
 {{Compat("mathml.elements.mspace")}}
 
-
Gecko说明

+
Gecko 说明
    
  
  • Indentation attributes 暂时没有实现 (for Gecko see {{ bug("534962") }}).
    • 
- 
  • 从Gecko 23.0 {{geckoRelease("23.0")}}开始实现了对width属性负值的支持。
    • 
+ 
  • 从 Gecko 23.0 {{geckoRelease("23.0")}}开始实现了对width属性负值的支持。
    • 
 
相关链接

diff --git a/files/zh-cn/web/mathml/element/msqrt/index.html b/files/zh-cn/web/mathml/element/msqrt/index.html
index d4b741d38f88b7..f87cd504066ec9 100644
--- a/files/zh-cn/web/mathml/element/msqrt/index.html
+++ b/files/zh-cn/web/mathml/element/msqrt/index.html
@@ -15,9 +15,9 @@ 
属性
href
用来设置标签点击后跳转的链接
mathbackground

- 
用来设置标签的背景色，可以使用#rgb、#rrggbb或者HTML颜色名。

+ 
用来设置标签的背景色，可以使用#rgb、#rrggbb或者HTML 颜色名。
mathcolor

- 
用来设置文字（包括根底数、根指数和根号本身）的颜色，同样可以使用#rgb、#rrggbb或者HTML颜色名。

+ 
用来设置文字（包括根底数、根指数和根号本身）的颜色，同样可以使用#rgb、#rrggbb或者HTML 颜色名。
例子

diff --git a/files/zh-cn/web/mathml/element/msub/index.html b/files/zh-cn/web/mathml/element/msub/index.html
index edd18d677a69cd..363a5436a5ada7 100644
--- a/files/zh-cn/web/mathml/element/msub/index.html
+++ b/files/zh-cn/web/mathml/element/msub/index.html
@@ -15,9 +15,9 @@ 
属性
href
用来设置标签点击后跳转的链接。
mathbackground

- 
用来设置标签的背景色，可以使用#rgb、#rrggbb或者HTML颜色名。

+ 
用来设置标签的背景色，可以使用#rgb、#rrggbb或者HTML 颜色名。
mathcolor

- 
用来设置标签文字的颜色，同样可以使用#rgb、#rrggbb或者HTML颜色名。

+ 
用来设置标签文字的颜色，同样可以使用#rgb、#rrggbb或者HTML 颜色名。
subscriptshift
用来设置下标相对于表达式的基线的最小距离，它是一个长度值。

@@ -66,10 +66,10 @@ 
浏览器兼容性

 
 {{Compat("mathml.elements.msub")}}
 
-
关于Gecko的特殊说明

+
关于 Gecko 的特殊说明
    
- 
  • 从Gecko 26.0 {{geckoRelease("26")}}开始，不允许使用<none />作为子元素。The rendering has been made more consistent with equivalent configurations of {{MathMLElement("msup")}} and {{MathMLElement("mmultiscripts")}} and a bug with an incorrect application of the superscriptshift attribute has been fixed (see {{bug("827713")}} for details).
    • 
+ 
  • 从 Gecko 26.0 {{geckoRelease("26")}}开始，不允许使用<none />作为子元素。The rendering has been made more consistent with equivalent configurations of {{MathMLElement("msup")}} and {{MathMLElement("mmultiscripts")}} and a bug with an incorrect application of the superscriptshift attribute has been fixed (see {{bug("827713")}} for details).
    • 
 
相关链接

diff --git a/files/zh-cn/web/mathml/element/msup/index.html b/files/zh-cn/web/mathml/element/msup/index.html
index d45ee8ec2d38c0..6cfab05f8616e0 100644
--- a/files/zh-cn/web/mathml/element/msup/index.html
+++ b/files/zh-cn/web/mathml/element/msup/index.html
@@ -75,10 +75,10 @@ 
浏览器兼容性
{{Compat("mathml.elements.msup")}}

 
-
Gecko说明

+
Gecko 说明
    
- 
  • 从 Gecko 26.0 {{geckoRelease("26")}} 开始，不再支持使用 <none /> 作为子元素。并且渲染结果和 {{MathMLElement("msub")}} 和 {{MathMLElement("mmultiscripts")}} 这些等价配置更加接近，同时修复了一个关于 superscriptshift 属性错误使用的问题(参阅 {{bug("827713")}}).
    • 
+ 
  • 从 Gecko 26.0 {{geckoRelease("26")}} 开始，不再支持使用 <none /> 作为子元素。并且渲染结果和 {{MathMLElement("msub")}} 和 {{MathMLElement("mmultiscripts")}} 这些等价配置更加接近，同时修复了一个关于 superscriptshift 属性错误使用的问题 (参阅 {{bug("827713")}}).
    • 
 
参见

diff --git a/files/zh-cn/web/media/autoplay_guide/index.html b/files/zh-cn/web/media/autoplay_guide/index.html
index 140e8efc33e72f..104c4e9040e2ea 100644
--- a/files/zh-cn/web/media/autoplay_guide/index.html
+++ b/files/zh-cn/web/media/autoplay_guide/index.html
@@ -21,7 +21,7 @@ 
自动播放 和 自动播放暂
 
audioElement.play();
 

 
-
以下网络功能和API可能会受到自动播放阻止的影响：

+
以下网络功能和 API 可能会受到自动播放阻止的影响：

 
 
    
  
  • The {{Glossary("HTML")}} {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements
    • 
@@ -30,12 +30,12 @@ 
    自动播放 和 自动播放暂
 
 
    从用户的角度来看，网页或应用程序自动地发出噪音而没有警告可能会令人讨厌、不便或令人反感。因此，浏览器通常仅允许在特定情况下进行自动播放。
    
 
-
    Autoplay功能
    
+
    Autoplay 功能
    
 
 
    据新政策，媒体内容将在满足以下至少一个的条件下自动播放：
    
 
 
      
- 
    • 音频被静音或其音量设置为0
      • 
+ 
    • 音频被静音或其音量设置为 0
      • 
  
    • 用户和网页已有交互行为（包括点击、触摸、按下某个键等等）
      • 
  
    • 网站已被列入白名单；如果浏览器确定用户经常与媒体互动，这可能会自动发生，也可能通过首选项或其他用户界面功能手动发生
      • 
  
    • 自动播放策略应用到{{HTMLElement("iframe")}}或者其文档上
      • 
@@ -46,7 +46,7 @@ 
      Autoplay功能
      
 
      详情，请参阅 Google Chrome 和 WebKit 的自动播放政策。
      
 
 
      
-
      注意: 换句话说，如果在尚无任何用户交互的页面中通过编程方式启动播放，则通常会阻止任何包含音频在内的媒体的播放。
      
+
      注意： 换句话说，如果在尚无任何用户交互的页面中通过编程方式启动播放，则通常会阻止任何包含音频在内的媒体的播放。
      
 
      
 
 
      能自动播放的媒体元素
      
@@ -65,7 +65,7 @@ 
      autoplay 属性
      
  
    • 假设网络性能或带宽没有显着变化，且已收到足够的媒体流并已开始播放，继续播放直至媒体结束而不会中断。
      • 
 
    
 
-
    例子1: autoplay属性
    
+
    例子 1: autoplay 属性
    
 
 
    使用 autoplay 属性的{{HTMLElement("audio")}}元素就像如下：
    
 
@@ -74,7 +74,7 @@ 
    例子1: autoplay属性
    
 </audio>
 
 
-
    例子2：检测自动播放失败
    
+
    例子 2：检测自动播放失败
    
 
 
    如果你依靠自动播放功能去做一些重要的事情，或者自动播放失败会以任何方式影响你的应用程序，那你可能会想知道自动播放什么时候没有开始。不幸的是，对于{{htmlattrxref("autoplay", "audio")}}属性，识别自动播放是否成功开始是很棘手的。自动播放失败时不会触发任何事件。也没有抛出异常或可以设置回调，甚至在媒体元素上都没有标记来告诉你自动播放是否起作用。你实际能做的就是检查一些值，然后根据这些值猜测自动播放是否起作用。
    
 
diff --git a/files/zh-cn/web/media/dash_adaptive_streaming_for_html_5_video/index.html b/files/zh-cn/web/media/dash_adaptive_streaming_for_html_5_video/index.html
index 600ea4e8b5b6ac..58fb1b97c6d977 100644
--- a/files/zh-cn/web/media/dash_adaptive_streaming_for_html_5_video/index.html
+++ b/files/zh-cn/web/media/dash_adaptive_streaming_for_html_5_video/index.html
@@ -16,17 +16,17 @@ 
    浏览器支持
    
 
 
    Firefox 21 包含了针对 HTM5 WebM 视频的 DASH 实现，但默认没有启用。可以通过在“about:config”里调整“media.dash.enabled”首选项来开启。
    
 
-
    Firefox 23 移除了针对 HTML5 WebM 视频的 DASH 实现。此功能将被 媒体源扩展 API（MSE） 的实现取代。MSE 可实现通过 JavaScript 库（例如 dash.js）来提供对 DASH 的支持。详情参见 Bug 778617。
    
+
    Firefox 23 移除了针对 HTML5 WebM 视频的 DASH 实现。此功能将被 媒体源扩展 API（MSE）的实现取代。MSE 可实现通过 JavaScript 库（例如 dash.js）来提供对 DASH 的支持。详情参见 Bug 778617。
    
 
 
    使用 DASH - 服务端
    
 
-
    首先，您需要将WebM视频转换为带有不同比特率的随附视频文件的DASH清单。根据您的需求，启动从 ffmpeg.org 的 ffmpeg 程序，就可以使用 libvpx 和 libbvorbis 支持的 WebM 视频和音频（版本2.5以上，3.2.5版本已通过测试）。
    
+
    首先，您需要将 WebM 视频转换为带有不同比特率的随附视频文件的 DASH 清单。根据您的需求，启动从 ffmpeg.org 的 ffmpeg 程序，就可以使用 libvpx 和 libbvorbis 支持的 WebM 视频和音频（版本 2.5 以上，3.2.5 版本已通过测试）。
    
 
-
    1. 使用现有的WebM文件创建一个音频文件和多个视频文件。
    
+
    1. 使用现有的 WebM 文件创建一个音频文件和多个视频文件。
    
 
 
    例如：
    
 
-
    文件in.video可以是任何包含至少一个音频和一个视频流的容器，这些容器可以由ffmpeg解码，
    
+
    文件in.video可以是任何包含至少一个音频和一个视频流的容器，这些容器可以由 ffmpeg 解码，
    
 
 
    创建音频：
    
 
@@ -78,11 +78,11 @@ 
    2. 创建清单文件
    
 
 
    -map 参数对应输入文件的顺序（每个文件只对应一个参数）。-adaptation_sets 参数将它们分配给适配集；例如，以上命令创建一个包含 0,1,2,3 的视频集（0），而另一个（1）仅仅包含视频流 4 和音频流。
    
 
-
    将清单和相关的视频文件放在Web服务器或CDN上。 DASH通过HTTP来完成，因此只要您的HTTP服务器支持字节范围请求，并且DASH设置为使用 mimetype="application/dash+xml" 来支持 .mpd 文件即可。
    
+
    将清单和相关的视频文件放在 Web 服务器或 CDN 上。 DASH 通过 HTTP 来完成，因此只要您的 HTTP 服务器支持字节范围请求，并且 DASH 设置为使用 mimetype="application/dash+xml" 来支持 .mpd 文件即可。
    
 
-
    使用DASH-客户端
    
+
    使用 DASH-客户端
    
 
-
    您将需要修改网页，使其首先指向DASH清单，而不是直接指向特定的视频文件：
    
+
    您将需要修改网页，使其首先指向 DASH 清单，而不是直接指向特定的视频文件：
    
 
 
    <video>
   <source src="movie.mpd">
@@ -90,7 +90,7 @@ 
    使用DASH-客户端
    
   Your browser does not support the video tag.
 </video>
    
 
-
    如果浏览器支持DASH，则您的视频现在将自适应地流式传输。
    
+
    如果浏览器支持 DASH，则您的视频现在将自适应地流式传输。
    
 
 
 
diff --git a/files/zh-cn/web/media/formats/containers/index.html b/files/zh-cn/web/media/formats/containers/index.html
index 5e0a5cd9b2419c..a329c0e02e7290 100644
--- a/files/zh-cn/web/media/formats/containers/index.html
+++ b/files/zh-cn/web/media/formats/containers/index.html
@@ -11,9 +11,9 @@
 
 
    Common container formats
    
 
-
    最常用的几个媒体容器格式：MPEG-4（MP4）、QuickTime Movie（MOV）、Wavafile Audio File Format（WAV）。当然你也可能听说过：MP3, Ogg, WebM, AVI等等。下面列出了常用的几种媒体容器格式，有些仅支持音频，有些即支持音频又支持视频。
    
+
    最常用的几个媒体容器格式：MPEG-4（MP4）、QuickTime Movie（MOV）、Wavafile Audio File Format（WAV）。当然你也可能听说过：MP3, Ogg, WebM, AVI 等等。下面列出了常用的几种媒体容器格式，有些仅支持音频，有些即支持音频又支持视频。
    
 
-
    一个媒体文件的扩展名和MIME类型，与它的容器格式以及它的编码方式没有特定的关系。例如MP3的扩展名是.mp3，MIME类型是audio/mp3，但是它的容器格式是MPEG-1，编码方式是MPEG-1 Audio Layer III。
    
+
    一个媒体文件的扩展名和 MIME 类型，与它的容器格式以及它的编码方式没有特定的关系。例如 MP3 的扩展名是.mp3，MIME 类型是audio/mp3，但是它的容器格式是 MPEG-1，编码方式是 MPEG-1 Audio Layer III。
    
 
 
    Index of media container formats (file types)
    
 
diff --git a/files/zh-cn/web/media/formats/image_types/index.html b/files/zh-cn/web/media/formats/image_types/index.html
index 3d3ecd9968608f..ec7dc0a4e26594 100644
--- a/files/zh-cn/web/media/formats/image_types/index.html
+++ b/files/zh-cn/web/media/formats/image_types/index.html
@@ -18,7 +18,7 @@
 
 
    常见图像文件类型
    
 
-
    世界上有非常多的图像文件格式。下面列举了网页上常用的格式，其中BMP由于浏览器支持限制而不被推荐，通常应该避免在网页内容中使用。
    
+
    世界上有非常多的图像文件格式。下面列举了网页上常用的格式，其中 BMP 由于浏览器支持限制而不被推荐，通常应该避免在网页内容中使用。
    
 
 
    
 
accent
    {{ MathMLElement("mo") }}, {{ MathMLElement("mover") }}, {{ MathMLElement("munderover") }}
    
-    
布尔类型的值，指明操作符是否应该被视为accent。

+    
布尔类型的值，指明操作符是否应该被视为 accent。

 
     
原文：A Boolean value specifying whether the operator should be treated as an accent.

    		accentunder
    {{ MathMLElement("munder") }}, {{ MathMLElement("munderover") }}
    
-    
布尔类型的值，指明操作符是否应该被视为accent。

+    
布尔类型的值，指明操作符是否应该被视为 accent。

 
     
原文：A Boolean value specifying whether the operator should be treated as an accent.

    		
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
  
  
  
  
  
  
  
 
 
 
 
 
  
  
  
  
  
  
  
  
  
 
 
 
 
 
 
 
 
  
  
  
  
 
 
 
  
  
  
  
 
 
 
 
 
  
  
  
  
 
 
 
  
  
  
  
  
  
 
 
 
 
 
 
 
 
 
 
 

diff --git a/files/zh-cn/web/media/formats/video_codecs/index.html b/files/zh-cn/web/media/formats/video_codecs/index.html
index 839858989ecf53..0e9086cb146bf6 100644
--- a/files/zh-cn/web/media/formats/video_codecs/index.html
+++ b/files/zh-cn/web/media/formats/video_codecs/index.html
@@ -10,9 +10,9 @@
 
 
    
  
  • 全色彩的高清视频（1920x1080）每一帧为 8,294,400 字节。
    • 
- 
  • 按照典型的每秒30帧的传播速度，高清视频每秒钟会占用 248,832,000 字节（约 249 MB）。
    • 
+ 
  • 按照典型的每秒 30 帧的传播速度，高清视频每秒钟会占用 248,832,000 字节（约 249 MB）。
    • 
  
  • 一分钟的高清视频将需要 14.93 GB 的存储空间。
    • 
- 
  • 一个相当典型的30分钟视频会议将需要约 447.9 GB 的存储空间，而2小时的电影则需要将近 1.79 TB（也就是 1790 GB） 的存储空间。
    • 
+ 
  • 一个相当典型的 30 分钟视频会议将需要约 447.9 GB 的存储空间，而 2 小时的电影则需要将近 1.79 TB（也就是 1790 GB） 的存储空间。
    • 
 
不仅仅是需要的存储空间很大的问题，以 249MB 每秒的速度传输这样的未压缩的视频所需要的网络带宽也很大（不包括音频和开销）。这就是为什么我们需要视频编解码器。就像音频编解码器对声音数据所做的处理一样，视频编解码器会压缩视频数据并将其编码为一种格式，以后我们可以对其进行解码，播放或者编辑。

@@ -111,7 +111,7 @@ 
源视频格式对编码输出
  

-   
+   
diff --git a/files/zh-cn/web/media/index.html b/files/zh-cn/web/media/index.html
index a82c194f5b6802..058c77da74ced4 100644
--- a/files/zh-cn/web/media/index.html
+++ b/files/zh-cn/web/media/index.html
@@ -23,7 +23,7 @@ 
HTML
{{HTMLElement("audio")}}
<audio> 元素用于在 Web 上下文中播放音频。这可以用于复杂媒体的隐性目标，亦或是用户控制播放音频的可见控制。可以从 JavaScript {{domxref("HTMLAudioElement")}} 对象中访问。
{{HTMLElement("video")}}

- 
<video> 元素是 Web 上下文中视频内容的端点。其可以简单地用于呈现视频，亦或是流式视频的目标。<video> 也可以用于连接媒体 API 和其他 HTML 与 DOM 技术，比如 {{HTMLElement("canvas")}} （用于抓取并控制框中内容)，例如，可以通过 JavaScript {{domxref("HTMLVideoElement")}} 对象访问。

+ 
<video> 元素是 Web 上下文中视频内容的端点。其可以简单地用于呈现视频，亦或是流式视频的目标。<video> 也可以用于连接媒体 API 和其他 HTML 与 DOM 技术，比如 {{HTMLElement("canvas")}}（用于抓取并控制框中内容)，例如，可以通过 JavaScript {{domxref("HTMLVideoElement")}} 对象访问。
{{HTMLElement("track")}}
<track> 元素可以被放置在 {{HTMLElement("audio")}} 或者 {{HTMLElement("video")}} 元素内部，当在媒体播放时，以提供 WebVTT 格式化字幕或标题轨道的参考。可以通过 JavaScript {{domxref("HTMLTrackElement")}} 对象访问。
{{HTMLElement("source")}}

@@ -38,7 +38,7 @@ 
API
网络音频 API
网络音频 API 允许您生成、过滤并调节实时与预录的音频材料，并将其发送至 <audio> 元素、媒体流或磁盘中。
WebRTC

- 
WebRTC （网页即时通信） 可以使互联网上任意两位用户在无需媒介的情况下中串流实时音频、视频和任意数据。

+ 
WebRTC（网页即时通信） 可以使互联网上任意两位用户在无需媒介的情况下中串流实时音频、视频和任意数据。

 
diff --git a/files/zh-cn/web/performance/critical_rendering_path/index.html b/files/zh-cn/web/performance/critical_rendering_path/index.html
index 4158961c566597..751c3cf9cf3a77 100644
--- a/files/zh-cn/web/performance/critical_rendering_path/index.html
+++ b/files/zh-cn/web/performance/critical_rendering_path/index.html
@@ -19,13 +19,13 @@ 
理解 CRP
Web 性能包含了服务器请求和响应、加载、执行脚本、渲染、布局和绘制每个像素到屏幕上。

 
-
网页请求从 HTML 文件请求开始。服务器返回 HTML -- 响应头和数据。然后浏览器开始解析 HTML，转换收到的数据为 DOM 树。浏览器每次发现外部资源就初始化请求，无论是样式、脚本或者嵌入的图片引用。有时请求会阻塞，这意味着解析剩下的 HTML 会被终止直到重要的资源被处理。浏览器接着解析 HTML，发请求和构造 DOM 直到文件结尾 ，这时开始构造 CSS对象模型。等到 DOM 和 CSSOM 完成之后，浏览器构造渲染树，计算所有可见内容的样式。一旦渲染树完成布局开始，定义所有渲染树元素的位置和大小。完成之后，页面被渲染完成，或者说是绘制到屏幕上。

+
网页请求从 HTML 文件请求开始。服务器返回 HTML -- 响应头和数据。然后浏览器开始解析 HTML，转换收到的数据为 DOM 树。浏览器每次发现外部资源就初始化请求，无论是样式、脚本或者嵌入的图片引用。有时请求会阻塞，这意味着解析剩下的 HTML 会被终止直到重要的资源被处理。浏览器接着解析 HTML，发请求和构造 DOM 直到文件结尾 ，这时开始构造 CSS 对象模型。等到 DOM 和 CSSOM 完成之后，浏览器构造渲染树，计算所有可见内容的样式。一旦渲染树完成布局开始，定义所有渲染树元素的位置和大小。完成之后，页面被渲染完成，或者说是绘制到屏幕上。
文本对象模型

 
-
DOM构建是增量的。 HTML响应变成令牌（token），令牌变成节点，而节点又变成DOM树。 单个DOM节点以startTag令牌开始，以endTag令牌结束。 节点包含有关HTML元素的所有相关信息。 该信息是使用令牌描述的。 节点根据令牌层次结构连接到DOM树中。 如果另一组startTag和endTag令牌位于一组startTag和endTag之间，则您在节点内有一个节点，这就是我们定义DOM树层次结构的方式。

+
DOM 构建是增量的。 HTML 响应变成令牌（token），令牌变成节点，而节点又变成 DOM 树。 单个 DOM 节点以 startTag 令牌开始，以 endTag 令牌结束。 节点包含有关 HTML 元素的所有相关信息。 该信息是使用令牌描述的。 节点根据令牌层次结构连接到 DOM 树中。 如果另一组 startTag 和 endTag 令牌位于一组 startTag 和 endTag 之间，则您在节点内有一个节点，这就是我们定义 DOM 树层次结构的方式。

 
-
节点数量越多，关键渲染路径中的后续事件将花费的时间就越长。 测一下吧！ 几个额外的节点不会有什么区别，但“DIV癖”（divitis）可能会导致问题。

+
节点数量越多，关键渲染路径中的后续事件将花费的时间就越长。 测一下吧！ 几个额外的节点不会有什么区别，但“DIV 癖”（divitis）可能会导致问题。
CSS 对象模型

 
diff --git a/files/zh-cn/web/performance/css_javascript_animation_performance/index.html b/files/zh-cn/web/performance/css_javascript_animation_performance/index.html
index b271fb3b5d9d87..80a4439b28d027 100644
--- a/files/zh-cn/web/performance/css_javascript_animation_performance/index.html
+++ b/files/zh-cn/web/performance/css_javascript_animation_performance/index.html
@@ -12,65 +12,65 @@ 
CSS 过渡和动画
CSS 中过渡和动画都可以用于编写动画，它们都有各自的使用场景：
    
- 
  • CSS {{cssxref("transition","transitions")}} 提供了一个简单的的方式去创造当前样式与结束状态样式之间的动画，比如一个 button 的普通状态和 hover 状态。尽管一个元素处于过渡状态中，新的过渡动画也会立即从当前样式开始，而不是直接跳转到CSS的最终状态。浏览 Using CSS transitions 以获取更多细节。
    • 
- 
  • 另一方面，CSS {{cssxref("animation","animations")}}, 允许开发者去通过一个初始状态属性值集合与最终状态属性值集合创造动画，而不是单单的初始和最终状态。 CSS animations 由两部分组成: 一个描述 CSS 动画的样式, 以及一个指定动画初始状态，中间状态以及最终状态样式的关键帧集合。浏览 Using CSS animations 以获取更多细节.
    • 
+ 
  • CSS {{cssxref("transition","transitions")}} 提供了一个简单的的方式去创造当前样式与结束状态样式之间的动画，比如一个 button 的普通状态和 hover 状态。尽管一个元素处于过渡状态中，新的过渡动画也会立即从当前样式开始，而不是直接跳转到 CSS 的最终状态。浏览 Using CSS transitions 以获取更多细节。
    • 
+ 
  • 另一方面，CSS {{cssxref("animation","animations")}}, 允许开发者去通过一个初始状态属性值集合与最终状态属性值集合创造动画，而不是单单的初始和最终状态。 CSS animations 由两部分组成：一个描述 CSS 动画的样式，以及一个指定动画初始状态，中间状态以及最终状态样式的关键帧集合。浏览 Using CSS animations 以获取更多细节。
    • 
 

 
-
就性能方面来说, 无论通过CSS animations 还是 transitions 创造动画，都没有区别。在这篇文章中二者都归类为基于CSS的动画.

+
就性能方面来说，无论通过 CSS animations 还是 transitions 创造动画，都没有区别。在这篇文章中二者都归类为基于 CSS 的动画。
requestAnimationFrame

 
-
{{domxref("Window.requestAnimationFrame","requestAnimationFrame()")}}提供了一种用JavaScript代码制作动画的高效方式。本方法的回调函数在绘制下一帧之前由浏览器调用。与需要一个延迟参数的{{domxref("WindowTimers.setTimeout","setTimeout()")}}/{{domxref("WindowTimers.setInterval","setInterval()")}}相比，requestAnimationFrame()效率高得多。开发人员可以在requestAnimationFrame回调函数中通过简单地改变元素的样式(或者更新画布绘制，等等)来创建动画。

+
{{domxref("Window.requestAnimationFrame","requestAnimationFrame()")}}提供了一种用 JavaScript 代码制作动画的高效方式。本方法的回调函数在绘制下一帧之前由浏览器调用。与需要一个延迟参数的{{domxref("WindowTimers.setTimeout","setTimeout()")}}/{{domxref("WindowTimers.setInterval","setInterval()")}}相比，requestAnimationFrame() 效率高得多。开发人员可以在 requestAnimationFrame 回调函数中通过简单地改变元素的样式 (或者更新画布绘制，等等) 来创建动画。

-
注意:像CSS转换和动画一样，当页面在后台运行时，requestAnimationFrame()会暂停。

+
注意:像 CSS 转换和动画一样，当页面在后台运行时，requestAnimationFrame() 会暂停。

 
更多细节请阅读 animating with JavaScript from setinterval to requestAnimationFrame.

 
-
性能对比:

+
性能对比：

  transitions vs. requestAnimationFrame

 
-
事实上，大多数场景下, 基于 CSS 的 动画几乎是跟 JavaScript 动画表现一致 — 至少在 FireFox 上是如此. 一些基于 Javascript 的动画库, 像 GSAP and Velocity.JS, 甚至声称他们在性能上可以做得比 native CSS transitions/animations （原生的 CSS transitions/animations）更好. 这是可能的，因为在重绘事件发生之前，CSS transitions/animations 在主的 UI 线程仅仅是重新采集元素的样式, 这跟通过 requestAnimationFrame() 回调，获取重新采集元素样式是一样的, 也是在下一次重绘之前触发. 假如二者都是在主 UI 线程创建的动画，那它们在性能方面没有差异.

+
事实上，大多数场景下，基于 CSS 的 动画几乎是跟 JavaScript 动画表现一致 — 至少在 FireFox 上是如此。一些基于 Javascript 的动画库，像 GSAP and Velocity.JS, 甚至声称他们在性能上可以做得比 native CSS transitions/animations （原生的 CSS transitions/animations）更好。这是可能的，因为在重绘事件发生之前，CSS transitions/animations 在主的 UI 线程仅仅是重新采集元素的样式，这跟通过 requestAnimationFrame() 回调，获取重新采集元素样式是一样的，也是在下一次重绘之前触发。假如二者都是在主 UI 线程创建的动画，那它们在性能方面没有差异。
在这一节，我们将会使用 FireFox 通过一个性能测试，去看看哪种动画方式更好
启用 FPS 工具

 
-
在进行示例之前，请启用FPS工具先查看当前帧速率:

+
在进行示例之前，请启用 FPS 工具先查看当前帧速率：
    
- 
  1. 在地址栏中，输入about:config;点击" I’ll be careful, I promise!"按钮，以输入配置屏幕。
    
+ 
  2. 在地址栏中，输入 about:config;点击" I’ll be careful, I promise!"按钮，以输入配置屏幕。
    
   
    3. 
- 
  3. 在搜索栏中搜索layers.acceleration.draw-fps首选项
    4. 
- 
  4. 双击该条目将值设置为true。.现在您可以在Firefox窗口的左上角看到三个紫色的框。第一个框代表FPS。
    
+ 
  5. 在搜索栏中搜索 layers.acceleration.draw-fps 首选项
    6. 
+ 
  6. 双击该条目将值设置为 true。.现在您可以在 Firefox 窗口的左上角看到三个紫色的框。第一个框代表 FPS。
    
   
    7. 
 
运行性能测试

 
-
开始在下面的测试中，总共1000个{{htmlelement("div")}}元素通过css动画进行坐标转换。

+
开始在下面的测试中，总共 1000 个{{htmlelement("div")}}元素通过 css 动画进行坐标转换。
{{JSFiddleEmbed("https://jsfiddle.net/zt94oew2/1/","","480")}}
动画可以通过点击"toggle"按钮切换到 requestAnimationFrame() 。

 
-
试着两个都运行一下，比较两者的FPS值（第一个紫色框），可以看到CSS动画和requestAnimationFrame()是非常接近的。

+
试着两个都运行一下，比较两者的 FPS 值（第一个紫色框），可以看到 CSS 动画和requestAnimationFrame() 是非常接近的。
脱离主线程的动画

 
-
即使是上面给出的测试结果，我们仍然认为CSS动画是更好的选择。为什么？关键是只要动画涉及的属性不引起reflow（重新布局）（参考CSS triggers获得更多信息），我们可以把采用操作移出主线程。最常见的属性是CSS transform。如果一个元素被提升为一个layer，transform属性动画就可以在GPU中进行。这意味着更好地性能，特别实在移动设备上。在OffMainThreadCompositing上寻找更多细节。

+
即使是上面给出的测试结果，我们仍然认为 CSS 动画是更好的选择。为什么？关键是只要动画涉及的属性不引起 reflow（重新布局）（参考CSS triggers获得更多信息），我们可以把采用操作移出主线程。最常见的属性是 CSS transform。如果一个元素被提升为一个layer，transform 属性动画就可以在 GPU 中进行。这意味着更好地性能，特别实在移动设备上。在OffMainThreadCompositing上寻找更多细节。

 
-
要在火狐中激活OMTA (脱离主线程的动画) ，你需要前往about:config然后搜索  layers.offmainthreadcomposition.async-animations 。切换到 true.

+
要在火狐中激活 OMTA (脱离主线程的动画) ，你需要前往about:config 然后搜索  layers.offmainthreadcomposition.async-animations 。切换到 true.

 
-
激活之后，再次运行上面的例子。可以看到CSS动画的帧速率现在高多了。

+
激活之后，再次运行上面的例子。可以看到 CSS 动画的帧速率现在高多了。

-
注意: 在Nightly/Developer 版本，你可能看到OMTA缺省就是激活的，所以你需要反过来测试。（先测试激活OMTA的情况，然后是没有激活的情况）

+
注意: 在 Nightly/Developer 版本，你可能看到 OMTA 缺省就是激活的，所以你需要反过来测试。（先测试激活 OMTA 的情况，然后是没有激活的情况）

 
总结

 
-
浏览器可以优化渲染流程。总之，我们总是可以尽可能通过CSS过渡/动画创建动画。如果你的动画真的很复杂，你可能不得不依赖于JavaScript动画。

+
浏览器可以优化渲染流程。总之，我们总是可以尽可能通过 CSS 过渡/动画创建动画。如果你的动画真的很复杂，你可能不得不依赖于 JavaScript 动画。

diff --git a/files/zh-cn/web/performance/dns-prefetch/index.html b/files/zh-cn/web/performance/dns-prefetch/index.html
index 78eaa5486072b1..3a2fecce305487 100644
--- a/files/zh-cn/web/performance/dns-prefetch/index.html
+++ b/files/zh-cn/web/performance/dns-prefetch/index.html
@@ -36,23 +36,23 @@ 
最佳实践
请记住以下三点：

 
-
首先，dns-prefetch 仅对跨域域上的 DNS查找有效，因此请避免使用它来指向您的站点或域。这是因为，到浏览器看到提示时，您站点域背后的 IP 已经被解析。

+
首先，dns-prefetch 仅对跨域域上的 DNS 查找有效，因此请避免使用它来指向您的站点或域。这是因为，到浏览器看到提示时，您站点域背后的 IP 已经被解析。

 
-
其次，还可以通过使用 HTTP 链接字段将 dns-prefetch（以及其他资源提示）指定为 HTTP标头：

+
其次，还可以通过使用 HTTP 链接字段将 dns-prefetch（以及其他资源提示）指定为 HTTP 标头：
Link: <https://fonts.gstatic.com/>; rel=dns-prefetch

 
-
第三，考虑将 dns-prefetch 与 preconnect(预连接)提示配对。尽管 dns-prefetch 仅执行 DNS查找，但preconnect 会建立与服务器的连接。如果站点是通过 HTTPS 服务的，则此过程包括 DNS 解析，建立 TCP 连接以及执行 TLS 握手。将两者结合起来可提供进一步减少跨域请求的感知延迟的机会。您可以安全地将它们一起使用，如下所示：

+
第三，考虑将 dns-prefetch 与 preconnect(预连接)提示配对。尽管 dns-prefetch 仅执行 DNS 查找，但preconnect 会建立与服务器的连接。如果站点是通过 HTTPS 服务的，则此过程包括 DNS 解析，建立 TCP 连接以及执行 TLS 握手。将两者结合起来可提供进一步减少跨域请求的感知延迟的机会。您可以安全地将它们一起使用，如下所示：
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
 <link rel="dns-prefetch" href="https://fonts.gstatic.com/">
 

-
Note: 如果页面需要建立与许多第三方域的连接，则将它们预先连接会适得其反。 preconnect 提示最好仅用于最关键的连接。对于其他的，只需使用 <link rel="dns-prefetch"> 即可节省第一步的时间-DNS查找。

+
Note: 如果页面需要建立与许多第三方域的连接，则将它们预先连接会适得其反。 preconnect 提示最好仅用于最关键的连接。对于其他的，只需使用 <link rel="dns-prefetch"> 即可节省第一步的时间-DNS 查找。

 

 
-
配对这些提示的逻辑是因为对 dns-prefetch 的支持比对预连接的支持要好。不支持预连接的浏览器仍然可以通过回退到dns-prefetch来获得更多好处。由于这是HTML功能，因此非常容错。如果不支持的浏览器遇到 dns-prefetch 提示（或任何其他资源提示），则您的网站不会中断。您只是不会获得它提供的好处。

+
配对这些提示的逻辑是因为对 dns-prefetch 的支持比对预连接的支持要好。不支持预连接的浏览器仍然可以通过回退到 dns-prefetch 来获得更多好处。由于这是 HTML 功能，因此非常容错。如果不支持的浏览器遇到 dns-prefetch 提示（或任何其他资源提示），则您的网站不会中断。您只是不会获得它提供的好处。
一些资源（如字体）以匿名模式加载。在这种情况下，应使用预连接提示设置 crossorigin 属性。如果您省略它，则浏览器将仅执行 DNS 查找。

 
diff --git a/files/zh-cn/web/performance/how_browsers_work/index.md b/files/zh-cn/web/performance/how_browsers_work/index.md
index 39cdbd3a880b18..2a43ac7dc4c3c8 100644
--- a/files/zh-cn/web/performance/how_browsers_work/index.md
+++ b/files/zh-cn/web/performance/how_browsers_work/index.md
@@ -26,7 +26,7 @@ original_slug: Web/Performance/浏览器渲染页面的工作原理
 
 等待资源加载时间和大部分情况下的浏览器单线程执行是影响 Web 性能的两大主要原因。
 
-等待时间是需要去克服来让浏览器快速加载资源的主要威胁. 为了实现快速加载，开发者的目标就是尽可能快的发送请求的信息，至少看起来相当快。网络等待时间是在链路上传送二进制到电脑端所消耗的链路传输时间。Web 性能优化需要做的就是尽可能快的使页面加载完成。
+等待时间是需要去克服来让浏览器快速加载资源的主要威胁。为了实现快速加载，开发者的目标就是尽可能快的发送请求的信息，至少看起来相当快。网络等待时间是在链路上传送二进制到电脑端所消耗的链路传输时间。Web 性能优化需要做的就是尽可能快的使页面加载完成。
 
 大部分情况下，浏览器是单线程执行的。为了有流畅的交互，开发者的目标是确保网站从流畅的页面滚动到点击响应的交互性能。渲染时间是关键要素，确保主线程可以完成所有给它的任务并且仍然一直可以处理用户的交互。通过了解浏览器单线程的本质与最小化主线程的责任可以优化 Web 性能，来确保渲染的流畅和交互响应的及时。
 
@@ -96,7 +96,7 @@ TCP 的“三次握手”技术经常被称为“SYN-SYN-ACK”——更确切
 
 第一个响应数据包是 14KB 大小的。这是慢启动的一部分，慢启动是一种均衡网络连接速度的算法。慢启动逐渐增加发送数据的数量直到达到网络的最大带宽。
 
-在 {{glossary('TCP slow start', "TCP 慢启动")}} 中，在收到初始包之后, 服务器会将下一个数据包的大小加倍到大约 28KB。后续的数据包依次是前一个包大小的二倍直到达到预定的阈值，或者遇到拥塞。
+在 {{glossary('TCP slow start', "TCP 慢启动")}} 中，在收到初始包之后，服务器会将下一个数据包的大小加倍到大约 28KB。后续的数据包依次是前一个包大小的二倍直到达到预定的阈值，或者遇到拥塞。
 
 ![TCP 慢启动](congestioncontrol.jpg)
 
@@ -143,7 +143,7 @@ DOM 树描述了文档的内容。[``](/zh-CN/docs/Web/HTML/Element/html)
 
 ### 构建 CSSOM 树
 
-第二步是处理 CSS 并构建 CSSOM 树。CSS 对象模型和 DOM 是相似的。DOM 和 CSSOM 是两棵树. 它们是独立的数据结构。浏览器将 CSS 规则转换为可以理解和使用的样式映射。浏览器遍历 CSS 中的每个规则集，根据 CSS 选择器创建具有父、子和兄弟关系的节点树。
+第二步是处理 CSS 并构建 CSSOM 树。CSS 对象模型和 DOM 是相似的。DOM 和 CSSOM 是两棵树。它们是独立的数据结构。浏览器将 CSS 规则转换为可以理解和使用的样式映射。浏览器遍历 CSS 中的每个规则集，根据 CSS 选择器创建具有父、子和兄弟关系的节点树。
 
 与 HTML 一样，浏览器需要将接收到的 CSS 规则转换为可以使用的内容。因此，它重复了 HTML 到对象的过程，但对于 CSS。
 
@@ -205,7 +205,7 @@ CSSOM 树包括来自用户代理样式表的样式。浏览器从适用于节
 
 一旦主线程绘制页面完成，你会认为我们已经“准备好了”，但事实并非如此。如果加载包含 JavaScript（并且延迟到 [`onload`](/zh-CN/docs/Web/API/GlobalEventHandlers/onload) 事件激发后执行），则主线程可能很忙，无法用于滚动、触摸和其他交互。
 
-{{glossary('Time to Interactive')}}（TTI）是测量从第一个请求导致 DNS 查询和 SSL 连接到页面可交互时所用的时间——可交互是 {{glossary('First Contentful Paint')}} 之后的时间点，页面在 50ms 内响应用户的交互。如果主线程正在解析、编译和执行 JavaScript，则它不可用，因此无法及时（小于50ms）响应用户交互。
+{{glossary('Time to Interactive')}}（TTI）是测量从第一个请求导致 DNS 查询和 SSL 连接到页面可交互时所用的时间——可交互是 {{glossary('First Contentful Paint')}} 之后的时间点，页面在 50ms 内响应用户的交互。如果主线程正在解析、编译和执行 JavaScript，则它不可用，因此无法及时（小于 50ms）响应用户交互。
 
 在我们的示例中，可能图像加载很快，但 `anotherscript.js` 文件可能是 2MB，而且用户的网络连接很慢。在这种情况下，用户可以非常快地看到页面，但是在下载、解析和执行脚本之前，就无法滚动。这不是一个好的用户体验。避免占用主线程，如下面的网页测试示例所示：
 
diff --git a/files/zh-cn/web/performance/index.html b/files/zh-cn/web/performance/index.html
index bafbc9f83fbb84..234fd9e05e3096 100644
--- a/files/zh-cn/web/performance/index.html
+++ b/files/zh-cn/web/performance/index.html
@@ -28,23 +28,23 @@ 
初学者教程

  
Web 性能：概述

- 
Web性能学习路径概述。 在这里开始您的旅程。

- 
什么是 Web 性能?

+ 
Web 性能学习路径概述。 在这里开始您的旅程。

+ 
什么是 Web 性能？

  
该文从一个模块开始，很好地讲述了性能到底是什么——包括我们在考虑性能时需要考虑的工具、指标、API、网络和人群，以及如何使性能成为 Web 开发工作流程的一部分。

  
用户如何看待性能？

  
比网站在毫秒内响应速度更重要的是，用户对网站的感知速度有多快。这些感知受到页面实际加载时间、空闲、用户交互响应以及滚动和其他动画的平滑度的影响。在本文中，我们将随着最佳练习来提升用户感知（而不是实际时间）并讨论各种加载指标、动画和响应性指标。

  
Web 性能基础

- 
除了HTML，CSS，JavaScript和媒体文件这些前端模块之外，还有其他影响Web性能的因素，它们可能会导致应用程序变慢，或在主观和客观上使应用程序变快。有许多与Web性能相关的API、开发人员工具、最佳实践和不当做法。我们将在基础层面上介绍这些影响因素，并提供进阶优化其中每一项性能的链接。

+ 
除了 HTML，CSS，JavaScript 和媒体文件这些前端模块之外，还有其他影响 Web 性能的因素，它们可能会导致应用程序变慢，或在主观和客观上使应用程序变快。有许多与 Web 性能相关的 API、开发人员工具、最佳实践和不当做法。我们将在基础层面上介绍这些影响因素，并提供进阶优化其中每一项性能的链接。

  
HTML 性能特性

- 
标签的某些属性和顺序可能会影响网站性能。 通过最大程度地减少DOM节点的数量，确保使用最佳顺序和属性，包括样式、脚本、媒体和第三方脚本等内容，可以大大改善用户体验。 该文详细介绍了如何使用 HTML 来确保最佳性能。

+ 
标签的某些属性和顺序可能会影响网站性能。 通过最大程度地减少 DOM 节点的数量，确保使用最佳顺序和属性，包括样式、脚本、媒体和第三方脚本等内容，可以大大改善用户体验。 该文详细介绍了如何使用 HTML 来确保最佳性能。

  
多媒体：图像与视频

  
Web 性能的最小代价通常是媒体优化。基于每个用户代理的能力、大小和像素密度来服务不同的媒体文件已成为可能。另外，如从背景图像中删除音频轨迹，可进一步提升性能。该文讨论视频、音频和图像内容对性能的影响，以及确保影响尽可能小的方法。

  
CSS 性能特性

  
CSS 对于提高性能来说可能是一个不太重要的优化点，但是某些 CSS 特性对性能的影响比其他特性更大。在该文中，我们将研究一些影响性能的 CSS 属性，并提供样式处理的建议方法，以确保性能不受负面影响。

  
JavaScript 性能最佳实践

- 
如果正确使用JavaScript，则可以提供交互式和身临其境的 Web 体验——否则可能会严重损害下载时间、渲染时间、应用内性能、电池寿命和用户体验。 该文概述了一些值得思考的 JavaScript 最佳实践，以确保即使复杂的内容也尽可能地具有高性能。

+ 
如果正确使用 JavaScript，则可以提供交互式和身临其境的 Web 体验——否则可能会严重损害下载时间、渲染时间、应用内性能、电池寿命和用户体验。 该文概述了一些值得思考的 JavaScript 最佳实践，以确保即使复杂的内容也尽可能地具有高性能。

  
移动端性能

- 
随着移动设备上的Web访问普及，并且所有移动平台都具有功能完善的Web浏览器，但由于受限于带宽、CPU、电池续航等因素，因此考虑这些平台上Web内容的性能非常重要。 本文着眼于特定于移动设备的性能注意事项。

+ 
随着移动设备上的 Web 访问普及，并且所有移动平台都具有功能完善的 Web 浏览器，但由于受限于带宽、CPU、电池续航等因素，因此考虑这些平台上 Web 内容的性能非常重要。 本文着眼于特定于移动设备的性能注意事项。

 

 
@@ -55,11 +55,11 @@ 
Performance API
  
该指南介绍了如何使用 High-Resolution Time 标准中定义的 Performance 接口。

  
Resource Timing API

- 
资源加载和定时加载 这些资源，包括管理资源缓冲区和处理CORS

+ 
资源加载和定时加载 这些资源，包括管理资源缓冲区和处理 CORS

  
性能时间线

  
Performance Timeline 标准定义了对 Performance 接口的扩展，以支持应用程序中的客户端延迟测量。这些接口一起可以用来帮助识别应用程序的性能瓶颈。

  
User Timing API 

- 
使用创建特定于应用程序的时间戳 user timing API's “标记”和“度量”条目类型-它们是浏览器性能时间轴的一部分。

+ 
使用创建特定于应用程序的时间戳 user timing API's “标记”和“度量”条目类型 - 它们是浏览器性能时间轴的一部分。

  
Frame Timing API

  
PerformanceFrameTiming 接口提供有关浏览器事件循环的帧计时数据。

  
Beacon API

@@ -75,7 +75,7 @@ 
Waterfall, Call Tree, 和 Flame Charts.
  

  
使用内置分析器进行分析

- 
了解如何使用Firefox的内置分析器来分析应用程序性能。

+ 
了解如何使用 Firefox 的内置分析器来分析应用程序性能。

 
 
 
@@ -140,37 +140,37 @@ 
即将编写的文档

  
JavaScript 性能最佳实践

- 
JavaScript，如果使用得当，可以提供交互式和身临其境的web体验...或者它会严重影响下载时间、渲染时间、应用内性能、电池寿命和用户体验。本文概述了一些JavaScript最佳实践，这些实践可以确保即使是复杂内容的性能也是最高的。

+ 
JavaScript，如果使用得当，可以提供交互式和身临其境的 web 体验...或者它会严重影响下载时间、渲染时间、应用内性能、电池寿命和用户体验。本文概述了一些 JavaScript 最佳实践，这些实践可以确保即使是复杂内容的性能也是最高的。

  
移动端性能

- 
由于移动设备上的web访问非常流行，而且所有移动平台都有成熟的web浏览器，但带宽、CPU和电池寿命可能有限，因此考虑这些平台上web内容的性能非常重要。本文还讨论了移动设备特定的性能考虑因素。

+ 
由于移动设备上的 web 访问非常流行，而且所有移动平台都有成熟的 web 浏览器，但带宽、CPU 和电池寿命可能有限，因此考虑这些平台上 web 内容的性能非常重要。本文还讨论了移动设备特定的性能考虑因素。

  
Web 字体性能

- 
性能方面一个经常被忽视的方面是web字体。Web字体在Web设计中比以往任何时候都更加突出，然而许多开发人员只是简单地将它们从第三方服务中嵌入而不考虑它。在本文中，我们将介绍如何使用高效的文件格式和子设置使字体文件尽可能小。从那以后，我们将继续讨论浏览器如何文本，以及如何使用 CSS 和 JavaScript 功能，以确保您的字体快速呈现，并将对用户体验的干扰降到最低。

+ 
性能方面一个经常被忽视的方面是 web 字体。Web 字体在 Web 设计中比以往任何时候都更加突出，然而许多开发人员只是简单地将它们从第三方服务中嵌入而不考虑它。在本文中，我们将介绍如何使用高效的文件格式和子设置使字体文件尽可能小。从那以后，我们将继续讨论浏览器如何文本，以及如何使用 CSS 和 JavaScript 功能，以确保您的字体快速呈现，并将对用户体验的干扰降到最低。

  
性能瓶颈

  

  
理解带宽

  

  

- 
带宽是以兆位（Mb）或千位（Kb）为单位的每秒可发送的数据量。本文将解释带宽在富媒体internet应用程序中的作用，如何测量带宽，以及如何优化应用程序以最大限度地利用可用带宽。

+ 
带宽是以兆位（Mb）或千位（Kb）为单位的每秒可发送的数据量。本文将解释带宽在富媒体 internet 应用程序中的作用，如何测量带宽，以及如何优化应用程序以最大限度地利用可用带宽。

  

  

  
TLS 在性能中的作用

  

- 
TLS或HTTPS（我们通常称之为TLS）对于创建安全和安全的用户体验至关重要。虽然硬件降低了TLS对服务器性能的负面影响，但它仍然代表了我们等待浏览器连接到服务器所花费的大量时间。本文解释了TLS握手过程，并提供了一些减少时间的技巧，例如OCSP装订、HSTS预加载头，以及资源提示在为第三方屏蔽TLS延迟方面的潜在作用。

+ 
TLS 或 HTTPS（我们通常称之为 TLS）对于创建安全和安全的用户体验至关重要。虽然硬件降低了 TLS 对服务器性能的负面影响，但它仍然代表了我们等待浏览器连接到服务器所花费的大量时间。本文解释了 TLS 握手过程，并提供了一些减少时间的技巧，例如 OCSP 装订、HSTS 预加载头，以及资源提示在为第三方屏蔽 TLS 延迟方面的潜在作用。

  

  
阅读性能图表

  
开发人员工具提供有关性能、内存和网络请求的信息。知道如何阅读 waterfall charts, call trees, traces, flame charts ,和 allocations 在浏览器中，开发人员工具将帮助您理解其他性能工具中的瀑布图和火焰图。

  
其他媒体格式

  
当涉及到图像和视频时，有比你可能意识到的更多的格式。其中一些格式可以通过进一步减小文件大小来进一步优化富媒体页面。在本指南中，我们将讨论一些替代的媒体格式，如何负责任地使用它们，使不受支持的浏览器不被冷落，以及一些关于将现有资源转换为它们的高级指导。

  
分析 JavaScript bundle

- 
毫无疑问，JavaScript是现代web开发的重要组成部分。虽然您应该一直努力减少在应用程序中使用的JavaScript数量，但是很难知道从哪里开始。在本指南中，我们将向您展示如何分析应用程序的脚本捆绑包，以便您知道您在使用什么，以及如何检测应用程序在捆绑包之间是否包含重复的脚本。

+ 
毫无疑问，JavaScript 是现代 web 开发的重要组成部分。虽然您应该一直努力减少在应用程序中使用的 JavaScript 数量，但是很难知道从哪里开始。在本指南中，我们将向您展示如何分析应用程序的脚本捆绑包，以便您知道您在使用什么，以及如何检测应用程序在捆绑包之间是否包含重复的脚本。

  
延迟加载

- 
在初始页面加载时并不总是需要加载所有web应用程序资产。延迟加载是将页面上的资产（如脚本、图像等）的加载推迟到稍后的时间点，即实际需要这些资产的时候。

+ 
在初始页面加载时并不总是需要加载所有 web 应用程序资产。延迟加载是将页面上的资产（如脚本、图像等）的加载推迟到稍后的时间点，即实际需要这些资产的时候。

  
使用动态 import 延迟加载 JavaScript

- 
当开发人员听到术语“延迟加载”时，他们会立即想到当滚动到视口时加载的折叠图像下方。但是你知道你也可以延迟加载JavaScript吗？在本指南中，我们将讨论dynamic import（）语句，这是现代浏览器中按需加载JavaScript模块的功能。当然，由于这个特性不是到处都可用的，我们还将向您展示如何配置您的工具以广泛兼容的方式使用此特性。

+ 
当开发人员听到术语“延迟加载”时，他们会立即想到当滚动到视口时加载的折叠图像下方。但是你知道你也可以延迟加载 JavaScript 吗？在本指南中，我们将讨论 dynamic import（）语句，这是现代浏览器中按需加载 JavaScript 模块的功能。当然，由于这个特性不是到处都可用的，我们还将向您展示如何配置您的工具以广泛兼容的方式使用此特性。

  
使用资源提示（resource hints）控制资源传输

- 
浏览器通常比我们更了解资源的优先级和交付，但是他们离克莱里奥万特还很远。本机浏览器特性使我们能够在浏览器应该连接到另一个服务器时提示浏览器，或者在浏览器知道它需要资源之前预先加载资源。如果使用得当，这可以使快速体验看起来更快。在本文中，我们将介绍诸如rel=preconnect、rel=dns prefetch、rel=prefetch和rel=preload等本机浏览器功能，以及如何使用它们来发挥您的优势。

+ 
浏览器通常比我们更了解资源的优先级和交付，但是他们离克莱里奥万特还很远。本机浏览器特性使我们能够在浏览器应该连接到另一个服务器时提示浏览器，或者在浏览器知道它需要资源之前预先加载资源。如果使用得当，这可以使快速体验看起来更快。在本文中，我们将介绍诸如 rel=preconnect、rel=dns prefetch、rel=prefetch 和 rel=preload 等本机浏览器功能，以及如何使用它们来发挥您的优势。

  
性能预算

- 
营销、设计和销售需求，以及开发人员的经验，通常是广告膨胀、第三方脚本和其他会降低web性能的功能。为了帮助设置优先级，设置一个性能预算是很有帮助的：一组在开发阶段不能超过的限制。在本文中，我们将讨论创建和坚持绩效预算。

+ 
营销、设计和销售需求，以及开发人员的经验，通常是广告膨胀、第三方脚本和其他会降低 web 性能的功能。为了帮助设置优先级，设置一个性能预算是很有帮助的：一组在开发阶段不能超过的限制。在本文中，我们将讨论创建和坚持绩效预算。

  
Web 性能检查清单

  
一个在开发应用程序时要考虑性能清单，其中包含如何实现每个特性的教程链接，包括 Service Worker、性能问题诊断、字体加载最佳实践、客户端提示、创建高效的动画等。

  
Mobile 性能检查清单

diff --git a/files/zh-cn/web/performance/lazy_loading/index.html b/files/zh-cn/web/performance/lazy_loading/index.html
index 6af49ed96f7ad7..0b00648bb9216d 100644
--- a/files/zh-cn/web/performance/lazy_loading/index.html
+++ b/files/zh-cn/web/performance/lazy_loading/index.html
@@ -9,13 +9,13 @@
   - 懒加载
 translation_of: Web/Performance/Lazy_loading
 ---
-
延迟加载(懒加载) 是一种将资源标识为非阻塞（非关键）资源并仅在需要时加载它们的策略。 这是一种缩短关键渲染路径长度的方法，可以缩短页面加载时间。

+
延迟加载 (懒加载) 是一种将资源标识为非阻塞（非关键）资源并仅在需要时加载它们的策略。 这是一种缩短关键渲染路径长度的方法，可以缩短页面加载时间。

 
 
延迟加载可以在应用程序的不同时刻发生，但通常会在某些用户交互（例如滚动和导航）上发生。

 
 
概览

 
-
随着网络的发展，我们已经看到发送给用户的资产数量和规模都在急剧增加。从2011年到2019年，台式机的资源中位数从 ~100KB 增至 ~400KB，移动版的资源中位数从 ~50KB 增至~350KB。图像大小已从台式机上的~250KB 增至 ~900KB，而移动设备上的 ~100KB增至~850KB。

+
随着网络的发展，我们已经看到发送给用户的资产数量和规模都在急剧增加。从 2011 年到 2019 年，台式机的资源中位数从 ~100KB 增至 ~400KB，移动版的资源中位数从 ~50KB 增至~350KB。图像大小已从台式机上的~250KB 增至 ~900KB，而移动设备上的 ~100KB增至~850KB。

 
 
解决这个问题的方法之一是延迟加载对第一次渲染并不重要的资源来缩短关键渲染路径的长度。一个实际例子是，当用户打开一个电商网站的主页时，该页面有一个指向购物车页面/区域的链接，并且只有在用户导航到购物车页面/区域时才会下载其所有资源（JS、CSS、images……）。

 
@@ -40,7 +40,7 @@ 
    JavaScript

 
 
    CSS

 
-
默认情况下，CSS被视为渲染阻塞资源，因此，在 CSSOM 被构造完成之前，浏览器不会渲染任何已处理的内容。CSS 必须很薄，才能尽快交付，建议使用媒体类型和查询实现非阻塞渲染。

+
默认情况下，CSS 被视为渲染阻塞资源，因此，在 CSSOM 被构造完成之前，浏览器不会渲染任何已处理的内容。CSS 必须很薄，才能尽快交付，建议使用媒体类型和查询实现非阻塞渲染。

 
 
<link href="style.css"    rel="stylesheet" media="all">
 <link href="portrait.css" rel="stylesheet" media="orientation:portrait">
diff --git a/files/zh-cn/web/performance/optimizing_startup_performance/index.html b/files/zh-cn/web/performance/optimizing_startup_performance/index.html
index 4db51e5b7bd5f5..f2eae72e87ed4c 100644
--- a/files/zh-cn/web/performance/optimizing_startup_performance/index.html
+++ b/files/zh-cn/web/performance/optimizing_startup_performance/index.html
@@ -8,7 +8,7 @@
 translation_of: Web/Performance/Optimizing_startup_performance
 ---
 

-
一个在软件应用开发中经常被忽视的方面—即便在那些专注于性能优化的软件中—就是启动时的表现。你的应用需要花费多长时间启动？当应用加载时是否会卡住用户的设备或浏览器？这会让用户担心你的应用崩溃了，或者哪儿出错了。花时间确保你的应用能够更好地启动总是一个好主意。这篇文章提供了一些技巧和建议来帮助你达成这个目标，不管是在写一个新的应用还是从其他平台向Web移植一个应用。

+
一个在软件应用开发中经常被忽视的方面—即便在那些专注于性能优化的软件中—就是启动时的表现。你的应用需要花费多长时间启动？当应用加载时是否会卡住用户的设备或浏览器？这会让用户担心你的应用崩溃了，或者哪儿出错了。花时间确保你的应用能够更好地启动总是一个好主意。这篇文章提供了一些技巧和建议来帮助你达成这个目标，不管是在写一个新的应用还是从其他平台向 Web 移植一个应用。

 

 
 
更好地启动

@@ -23,7 +23,7 @@ 
如果有这样的打算...

 
 
如果你从头开始你的项目，通常很容易把所有的东西都写成“正确的方式”，使得代码片段具有合适的异步性。所有纯粹在启动时的计算应该在后台线程中执行，同时使主线程事件的运行时间尽可能缩短。应包含进度指示器，以便用户知道发生了什么以及他们将要等待多久。从理论上来说，无论如何，设计新的应用程序并能很好地启动应该很容易。

 
-
但是，另一方面，当您将现有应用程序移植到Web上时，问题会变得棘手。桌面应用程序不需要以异步方式编写，因为通常操作系统会为您处理该问题；或者应用程序当前是唯一正在运行的主要任务，而这具体取决于操作环境。源程序可能有一个主循环，可以被轻松地改成异步操作（通过分别运行每个主循环）；启动通常只是一个持续的整体过程，过程中可能会定期更新进度表。

+
但是，另一方面，当您将现有应用程序移植到 Web 上时，问题会变得棘手。桌面应用程序不需要以异步方式编写，因为通常操作系统会为您处理该问题；或者应用程序当前是唯一正在运行的主要任务，而这具体取决于操作环境。源程序可能有一个主循环，可以被轻松地改成异步操作（通过分别运行每个主循环）；启动通常只是一个持续的整体过程，过程中可能会定期更新进度表。

 
 
虽然您可以使用 Web workers 异步运行体积巨大，持续时间长的 JavaScript 代码块，但还是要给出一个重大警告：workers 不具备访问 WebGL 或音频的能力，亦不能向主线程发送同步消息，所以你甚至不能将这些 API 代理到主线程中。所有的这一切意味着，除非你够轻松地抽取启动过程中的“纯计算”代码块，加入到 workers 中，否则你最后还是得在主线程上运行大部分或全部的启动代码。

 
@@ -35,16 +35,16 @@ 
异步化

 
 
    
  
  • 启动时，在需要异步执行的脚本标签上使用 {{ htmlattrxref("defer") }} 或 {{ htmlattrxref("async") }} 属性 。这会允许 HTML 解析器更高效地处理文档。 Async scripts for asm.js 中有更多关于这方面的信息。
    • 
- 
  • 如果你需要解码资源文件（比如，解码JPEG文件并将其转换为原始纹理数据，以便随后在 WebGL 中使用），最好在 workers 里做这件事。
    • 
+ 
  • 如果你需要解码资源文件（比如，解码 JPEG 文件并将其转换为原始纹理数据，以便随后在 WebGL 中使用），最好在 workers 里做这件事。
    • 
  
  • 当处理浏览器支持的数据格式时（例如，解析图像数据），使用设备或浏览器内置的解码器而不是运行你自己的或者使用 or using one from the original codebase。预先提供的那个基本上一定会快得多，并且能够减小你的应用的启动体积。另外，浏览器可以自动并行化这些解码器的工作。
    • 
  
  • 所有能并行的数据处理都应该并行化。不要一团接一团地处理数据，如果可能的话，同时处理它们！ 
    • 
- 
  • 在你启动的HTML文件中，不要包含不会在关键路径下出现的脚本或样式表。只在需要时加载他们。 
    • 
- 
  • 不要强迫 Web 引擎构建不需要的 DOM，一种简单的“hack”的方式是把你的HTML留在文档里，但是在外层包裹注释。
+ 
  • 在你启动的 HTML 文件中，不要包含不会在关键路径下出现的脚本或样式表。只在需要时加载他们。 
    • 
+ 
  • 不要强迫 Web 引擎构建不需要的 DOM，一种简单的“hack”的方式是把你的 HTML 留在文档里，但是在外层包裹注释。
   
    <div id="foo"><!--
   <div> ...
 --></div>
    
  
    • 
- 
  • 当文档的一部分需要被渲染时，加载被注释的HTML
+ 
  • 当文档的一部分需要被渲染时，加载被注释的 HTML
   
    foo.innerHTML = foo.firstChild.nodeValue;
    
  
    • 
 

@@ -55,13 +55,13 @@ 
移植问题

 
 
一旦初始加载完成，应用的主程序开始运行，有可能你的应用一定会是单线程的，尤其当它是个移植的程序时。尝试改善主程序的启动过程时，最重要的事情是将代码重构为小片段。这些小片段可以在你应用的主循环中通过多个调用在分散的代码段中执行，这样主线程就能处理输入和类似的事件。

 
-
Emscripten 提供了一个API 帮助处理这种重构；比如你可以用 emscripten_push_main_loop_blocker() 创建一个函数，在主线程可以继续运行前执行。通过创建一个可以依序调用的函数队列，你可以更轻松地在不阻塞主线程地情况下管理代码的运行。

+
Emscripten 提供了一个 API 帮助处理这种重构；比如你可以用 emscripten_push_main_loop_blocker() 创建一个函数，在主线程可以继续运行前执行。通过创建一个可以依序调用的函数队列，你可以更轻松地在不阻塞主线程地情况下管理代码的运行。

 
 
但是这留下了不得不重构现有代码，使程序真正这样运行的问题。这可能需要一些时间。

 
 
我究竟要异步化到什么程度？

 
-
最好记住大多数浏览器，在你的代码阻塞主线程太长时间——大约10秒左右的时候，就会开始抱怨。理想情况下，你不会在任何地方阻塞那么长时间，但是只要你把时间保持在这之下，就不会有问题。不过要记住，如果有人有个比你更旧更慢的电脑，他们或许会比你经历更长的等待！

+
最好记住大多数浏览器，在你的代码阻塞主线程太长时间——大约 10 秒左右的时候，就会开始抱怨。理想情况下，你不会在任何地方阻塞那么长时间，但是只要你把时间保持在这之下，就不会有问题。不过要记住，如果有人有个比你更旧更慢的电脑，他们或许会比你经历更长的等待！

 
 
其他建议

 
@@ -70,8 +70,8 @@ 
其他建议

 

  
下载时间

  
一定要记住用户需要花多少时间下载你游戏的数据。如果你的游戏非常大，很受欢迎，或者需要频繁的重下内容，你应该考虑买个速度越快越好托管服务器。你还应该考虑压缩数据，尽可能缩小其体积。

- 
GPU因素

- 
编译着色器，以及将纹理传输到 GPU 会占用时间，特别是在比较复杂的游戏中。尽管这也会发生在本地(非 Web ) 游戏中，但还是会很恼人。不要不告诉用户游戏实际上还在启动中就这么做。

+ 
GPU 因素

+ 
编译着色器，以及将纹理传输到 GPU 会占用时间，特别是在比较复杂的游戏中。尽管这也会发生在本地 (非 Web ) 游戏中，但还是会很恼人。不要不告诉用户游戏实际上还在启动中就这么做。

  
数据大小

  
尽力优化游戏数据的体积，小一些的文件下载和处理都比大文件快。

  
主观因素

@@ -90,7 +90,7 @@ 
原
 
 
 
 
diff --git a/files/zh-cn/web/performance/rum-vs-synthetic/index.html b/files/zh-cn/web/performance/rum-vs-synthetic/index.html
index 9a2c923d6f89c8..a178ac34d3cc29 100644
--- a/files/zh-cn/web/performance/rum-vs-synthetic/index.html
+++ b/files/zh-cn/web/performance/rum-vs-synthetic/index.html
@@ -7,7 +7,7 @@
   - Web Performance
 translation_of: Web/Performance/Rum-vs-Synthetic
 ---
-
综合监控和真实用户监控 (RUM) 是两种监视和提供 Web性能见解的方法。RUM and synthetic monitoring provide for different views of performance and have benefits, good use cases and shortfalls. RUM is generally best suited for understanding long-term trends whereas synthetic monitoring is very well suited to regression testing and mitigating shorter-term performance issues during development. In this article we define and compare these two performance monitoring approaches.

+
综合监控和真实用户监控 (RUM) 是两种监视和提供 Web 性能见解的方法。RUM and synthetic monitoring provide for different views of performance and have benefits, good use cases and shortfalls. RUM is generally best suited for understanding long-term trends whereas synthetic monitoring is very well suited to regression testing and mitigating shorter-term performance issues during development. In this article we define and compare these two performance monitoring approaches.

 
 
合成监控

 
diff --git a/files/zh-cn/web/progressive_web_apps/add_to_home_screen/index.html b/files/zh-cn/web/progressive_web_apps/add_to_home_screen/index.html
index e414c6e2b2e2dd..451040b17330f3 100644
--- a/files/zh-cn/web/progressive_web_apps/add_to_home_screen/index.html
+++ b/files/zh-cn/web/progressive_web_apps/add_to_home_screen/index.html
@@ -7,7 +7,7 @@
   - 服务进程
   - 添加到主屏幕
   - 清单
-  - 渐进式Web应用
+  - 渐进式 Web 应用
 translation_of: Web/Progressive_web_apps/Add_to_home_screen
 original_slug: Web/Progressive_web_apps/添加到主屏幕
 ---
@@ -15,7 +15,7 @@
 
 
为什么选择 A2HS？

 
-
A2HS被认为是渐进式 Web 应用程序哲学的一部分——为 Web 应用程序提供与原生应用程序相同的用户体验优势，因此它们可以在当今的生态系统战争中竞争。这部分是通过访问主屏幕上的应用程序图标来访问应用程序，然后将其整齐地显示在自己的窗口中的简单手势。A2HS使这成为可能。

+
A2HS 被认为是渐进式 Web 应用程序哲学的一部分——为 Web 应用程序提供与原生应用程序相同的用户体验优势，因此它们可以在当今的生态系统战争中竞争。这部分是通过访问主屏幕上的应用程序图标来访问应用程序，然后将其整齐地显示在自己的窗口中的简单手势。A2HS 使这成为可能。

 
 
哪些浏览器支持 A2HS？

 
@@ -38,7 +38,7 @@ 
如何使用？

 
Mobile Chrome 上的 A2HS 提示

 
 

-
注意：您可以在“Web App安装横幅”一文中找到有关 Chrome 安装横幅的更多信息。

+
注意：您可以在“Web App 安装横幅”一文中找到有关 Chrome 安装横幅的更多信息。

 

 
 
如果您选择不将其添加到主屏幕，则可以稍后使用 Chrome 主菜单中的添加到主屏幕图标添加。

@@ -116,7 +116,7 @@ 
A2HS 不提供什么？

 
 
请记住，将应用程序添加到主屏幕时，它只会使该应用程序易于访问，而不会将应用程序的资料和数据下载到您的设备上，也不会使该应用程序脱机使用或类似的操作。为了使应用离线运行，你必须使用 Service Worker API 来离线存储资源，如果需要，还可以使用 Web Storage 或 IndexedDB 来存储其数据。

 
-
在示例应用程序中，我们仅使用了一个service worker来存储所有必需的文件。service worker使用index.js 文件中的最终的代码块在网站上注册。然后，我们使用 Cache API 缓存网站的所有资产，并使用 sw.js 文件中的代码从缓存而不是网络中为它们提供服务。

+
在示例应用程序中，我们仅使用了一个 service worker 来存储所有必需的文件。service worker 使用index.js 文件中的最终的代码块在网站上注册。然后，我们使用 Cache API 缓存网站的所有资产，并使用 sw.js 文件中的代码从缓存而不是网络中为它们提供服务。

 
 
桌面上的_A2HS

 
@@ -210,9 +210,9 @@ 
用于处理安装的_JavaScript

 
其他

 
 
 
diff --git a/files/zh-cn/web/progressive_web_apps/app_structure/index.html b/files/zh-cn/web/progressive_web_apps/app_structure/index.html
index 73e9afab74a09e..a826df22542c39 100644
--- a/files/zh-cn/web/progressive_web_apps/app_structure/index.html
+++ b/files/zh-cn/web/progressive_web_apps/app_structure/index.html
@@ -12,7 +12,7 @@ 
应用架构

 
渲染网站主要有两种方法 - 在服务器上或在客户端上。它们都有其优点和缺点，你可以适当地混合使用这两种方法

 
 
    
- 
  • 服务器端渲染（SSR）的意思是在服务器上渲染网页，因此首次加载会更快，但是在不同页面之间导航都需要下载新的HTML内容。它的跨浏览器兼容性良好，但代价是页间加载时间延长，也就是总体感知上的性能降低：每加载一个页面，都需要一个服务器请求往返的时间。
    • 
+ 
  • 服务器端渲染（SSR）的意思是在服务器上渲染网页，因此首次加载会更快，但是在不同页面之间导航都需要下载新的 HTML 内容。它的跨浏览器兼容性良好，但代价是页间加载时间延长，也就是总体感知上的性能降低：每加载一个页面，都需要一个服务器请求往返的时间。
    • 
  
  • 客户端渲染（CSR）允许在导航到不同页面时几乎立即在浏览器中更新网站，但在开始时需要更多的初始下载和客户端上的额外渲染。 首次访问时网站速度较慢，但后续访问速度要快得多。
    • 
 

 
@@ -52,13 +52,13 @@ 
另一种概念：流

 
 
Streams API 则允许开发人员直接访问来自服务器的数据流。如果您想对数据执行操作（例如给视频添加过滤器），不再需要等待所有数据流下载并转换为 blob（或者别的），而是可以立即开始。它提供精细的粒度控制，将数据流启动、与另一个流链接、取消、查错等等。

 
-
从理论上讲，数据流是更好的模型，但也更复杂。在撰写本文时（2018年3月），Streams API 的制订仍在进行，并且在任何主流浏览器都不完全可用。当它可用时，它将是提供内容的最快方式，在性能上会有巨大的好处。

+
从理论上讲，数据流是更好的模型，但也更复杂。在撰写本文时（2018 年 3 月），Streams API 的制订仍在进行，并且在任何主流浏览器都不完全可用。当它可用时，它将是提供内容的最快方式，在性能上会有巨大的好处。

 
 
有关可用实例和更多信息，请参阅 Streams API 文档。

 
 
示例应用的结构

 
-
js13kPWA 这个网站的结构比较简单：它包含一个HTML页面（index.html）、一个CSS样式表（style.css）、一些图片、JS 脚本和字体。它的文件结构如下所示：

+
js13kPWA 这个网站的结构比较简单：它包含一个 HTML 页面（index.html）、一个 CSS 样式表（style.css）、一些图片、JS 脚本和字体。它的文件结构如下所示：

 
 
Folder structure of js13kPWA.

 
@@ -103,7 +103,7 @@ 
HTML 页面

 
{{htmlelement("head")}} 一节包含一些基本信息，例如标题、描述、CSS 链接、描述文件、游戏内容的 JS 文件，以及 app.js，也就是我们这个 JavaScript 应用程序的入口点。{{htmlelement("body")}} 标签分为 {{htmlelement("header")}}（包含一张带链接的图片）、{{htmlelement("main")}} 页面主体（有标题、描述和放置内容的区域），以及 {{htmlelement("footer")}}（包含版权信息和链接）。

 

 
-
这个应用的唯一功能就是列出 js13kGames 2017 年比赛中的A-Frame（一个用来构建虚拟现实（VR）应用的网页开发框架，译者注）项目列表。如你所见，这是一个很普通的单页应用，目的是用一个简单的东西来展示 PWA 的真实功能。

+
这个应用的唯一功能就是列出 js13kGames 2017 年比赛中的 A-Frame（一个用来构建虚拟现实（VR）应用的网页开发框架，译者注）项目列表。如你所见，这是一个很普通的单页应用，目的是用一个简单的东西来展示 PWA 的真实功能。

 
 
CSS 部分

 
diff --git a/files/zh-cn/web/progressive_web_apps/index.html b/files/zh-cn/web/progressive_web_apps/index.html
index 58cbcb5f52a294..2b79123ad0c911 100644
--- a/files/zh-cn/web/progressive_web_apps/index.html
+++ b/files/zh-cn/web/progressive_web_apps/index.html
@@ -8,7 +8,7 @@
   - Progressive web apps
   - web app manifest
   - 渐进式增强
-  - 渐进式增强的Web应用程序
+  - 渐进式增强的 Web 应用程序
 translation_of: Web/Progressive_web_apps
 ---
 
PWA（Progressive Web Apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。这组文档和指南告诉您有关 PWA 的所有信息。

diff --git a/files/zh-cn/web/progressive_web_apps/introduction/index.html b/files/zh-cn/web/progressive_web_apps/introduction/index.html
index ad396414283051..4edf4f1b3a3926 100644
--- a/files/zh-cn/web/progressive_web_apps/introduction/index.html
+++ b/files/zh-cn/web/progressive_web_apps/introduction/index.html
@@ -25,7 +25,7 @@ 
什么使应用成为 PWA?

 
 
正如前文所述，PWA 不是只使用一种技术创建的。它代表了构建 Web 应用程序的新理念，涉及一些特定的模式，API 和其他功能。一眼是看不出来一个 Web App 是不是 PWA 的。如果应用程序满足某些要求，或者实现了一组特定的功能，例如离线工作、可安装、易于同步、可以发送推送通知等，我们就可以将其视为 PWA。

 
-
此外，还有一些工具可以按百分比衡量应用的完整性。（Lighthouse目前是最受欢迎的工具）通过实施各种技术优势，我们可以使应用程序更加渐进式，从而最终获得更高的Lighthouse 得分。但这只是一个粗略的指标。

+
此外，还有一些工具可以按百分比衡量应用的完整性。（Lighthouse目前是最受欢迎的工具）通过实施各种技术优势，我们可以使应用程序更加渐进式，从而最终获得更高的 Lighthouse 得分。但这只是一个粗略的指标。

 
 
辨别一个 Web 应用是否是 PWA 有一些关键原则。一个 PWA 应该具有以下特点：

 
@@ -45,15 +45,15 @@ 
这么做值得吗？

 
当然值得！只需要相对较小的代价就可以实现 PWA 的核心特性，而优势却是巨大的。例如：

 
 
    
- 
  • 减少应用安装后的加载时间, 通过 Service Workers 来进行缓存, 以此来节省带宽和时间。
    • 
+ 
  • 减少应用安装后的加载时间，通过 Service Workers 来进行缓存，以此来节省带宽和时间。
    • 
  
  • 当应用有可用的更新时，可以只更新发生改变的那部分内容。相比之下，对于一个原生应用而言，即便是最微小的改动也需要强制用户去再次下载整个应用。
    • 
  
  • 外观和使用感受与原生平台更加融为一体——应用图标被放置在主屏幕上，应用可以全屏运行等。
    • 
  
  • 凭借系统通知和推送消息与用户保持连接，对用户产生更多的吸引力，并且提高转换效率。
    • 
 

 
-
有许多知名的成功企业正在尝试PWA方案，选择增强的网站体验而不是原生应用。事实上它们也确实从中获得了显而易见的益处。PWA Stats 这个网站上分享了许多案例研究，可以证明以上提及的这些优势。

+
有许多知名的成功企业正在尝试 PWA 方案，选择增强的网站体验而不是原生应用。事实上它们也确实从中获得了显而易见的益处。PWA Stats 这个网站上分享了许多案例研究，可以证明以上提及的这些优势。

 
-
最著名的案例可能是印度最大的电子商务网站 Flipkart Lite，它在 2015 年重建为 PWA，转化率提高了70%。AliExpress PWA 也得到了比 Web 应用或原生应用更好的效果，新用户的转换率提高了104%。对比一下利润增长率和转换为 PWA 所需相对较少的工作量，PWA 的优势显而易见。

+
最著名的案例可能是印度最大的电子商务网站 Flipkart Lite，它在 2015 年重建为 PWA，转化率提高了 70%。AliExpress PWA 也得到了比 Web 应用或原生应用更好的效果，新用户的转换率提高了 104%。对比一下利润增长率和转换为 PWA 所需相对较少的工作量，PWA 的优势显而易见。

 
 
像 couponmoto 这样的早期新兴创业公司也开始使用 PWA 来推动更多的消费者参与，这表明 PWA 可以帮助小公司和大公司更有效地（重新）吸引用户。

 
diff --git a/files/zh-cn/web/progressive_web_apps/offline_service_workers/index.html b/files/zh-cn/web/progressive_web_apps/offline_service_workers/index.html
index 56d38c50e21002..793fb225d35cb4 100644
--- a/files/zh-cn/web/progressive_web_apps/offline_service_workers/index.html
+++ b/files/zh-cn/web/progressive_web_apps/offline_service_workers/index.html
@@ -17,7 +17,7 @@ 
Service Worker 解释

 
 
安全

 
-
因为它们非常强大，所以 Service Worker 只能在安全的上下文中执行（即 HTTPS）。如果您想在将代码推送到生产环境之前先进行实验，则可以始终在本地主机上进行测试或设置 GitHub Pages，这两者都支持HTTPS。

+
因为它们非常强大，所以 Service Worker 只能在安全的上下文中执行（即 HTTPS）。如果您想在将代码推送到生产环境之前先进行实验，则可以始终在本地主机上进行测试或设置 GitHub Pages，这两者都支持 HTTPS。

 
 
离线优先

 
@@ -27,7 +27,7 @@ 
PWA 中的 P（渐进，Progress
 
 
Service Worker 当正确地作为渐进功能实装时，可以为支持其 API 的现代浏览器用户提供离线支持使其受益，但也不会使用旧版浏览器的用户造成负面影响。

 
-
js13kPWA应用程序中的 Service worker

+
js13kPWA 应用程序中的 Service worker

 
 
理论看够了，让我们看一些源代码！

 
@@ -53,7 +53,7 @@ 
安装

     console.log('[Service Worker] Install');
 });

 
-
在 install 的监听函数中, 我们可以初始化缓存并添加离线应用时所需的文件，js13kPWA 应用确实也是这么做的。

+
在 install 的监听函数中，我们可以初始化缓存并添加离线应用时所需的文件，js13kPWA 应用确实也是这么做的。

 
 
首先，创建一个存储缓存名字的变量，App Shell 所需的文件也被记录在一个数组上：

 
@@ -190,7 +190,7 @@ 
其他用途

 
 
总结

 
-
在这篇文章中我们简单的了解了如何使用 Service Worker 让你的PWA实现离线功能。如果你想要学习更多关于 Service Worker API 的概念，以及使用 Service Worker 方面的相关细节，你可以进一步查阅我们的文档。

+
在这篇文章中我们简单的了解了如何使用 Service Worker 让你的 PWA 实现离线功能。如果你想要学习更多关于 Service Worker API 的概念，以及使用 Service Worker 方面的相关细节，你可以进一步查阅我们的文档。

 
 
Service Worker 在处理消息推送的时候也会经常被用到，这一部分我们将会在后面的章节进行讨论。

 
diff --git a/files/zh-cn/web/security/index.html b/files/zh-cn/web/security/index.html
index 85b4931fc442ba..146e3fbb32f6d4 100644
--- a/files/zh-cn/web/security/index.html
+++ b/files/zh-cn/web/security/index.html
@@ -18,7 +18,7 @@
  
信息安全基本原理

  
了解安全基本原理会帮助你理解在 web 开发生命周期中安全的角色和重要性。它将帮助你避免使用不必要的、允许攻击者利用缺陷获得经济收益或其他恶意目的非完全软件。以下文章提供了一些基本的 web 安全理论和定义。

  
不安全的密码

- 
HTTPS 协议旨在保护用户数据在网络上不被窃听（机密性） 和不被篡改（完整性）。处理用户数据的网站应该使用 HTTPS 协议保护他们的用户不受黑客的侵害。如果网站使用 HTTP 协议而不是 HTTPS 协议，窃取用户信息（比如他们的登录凭证）将会轻而易举。这曾经被 Firesheep 很好地演示过。

+ 
HTTPS 协议旨在保护用户数据在网络上不被窃听（机密性）和不被篡改（完整性）。处理用户数据的网站应该使用 HTTPS 协议保护他们的用户不受黑客的侵害。如果网站使用 HTTP 协议而不是 HTTPS 协议，窃取用户信息（比如他们的登录凭证）将会轻而易举。这曾经被 Firesheep 很好地演示过。

  
混合内容

  
当用户访问通过 HTTPS 协议传输的页面时，他们与 web 服务器的连接被 TLS 加密保护，因而免受嗅探器和中间人攻击。如果这个通过 HTTPS 访问的页面包含通过定期的明文 HTTP 获取的内容，那么该连接就只是部分加密；没有加密的内容可以被嗅探器获取、被中间人攻击篡改，因此该连接不受安全保证。当网页表现出这样的行为，就称为混合内容页面。

 

diff --git a/files/zh-cn/web/security/same-origin_policy/index.html b/files/zh-cn/web/security/same-origin_policy/index.html
index 1dc87a44ca7348..9ffd83e0c1f585 100644
--- a/files/zh-cn/web/security/same-origin_policy/index.html
+++ b/files/zh-cn/web/security/same-origin_policy/index.html
@@ -14,9 +14,9 @@
 
 
同源的定义

 
-
如果两个 URL 的 {{Glossary("protocol")}}、{{Glossary("port")}} (如果有指定的话)和 {{Glossary("host")}} 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。（“元组” 是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）。

+
如果两个 URL 的 {{Glossary("protocol")}}、{{Glossary("port")}} (如果有指定的话) 和 {{Glossary("host")}} 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。（“元组” 是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）。

 
-
下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例:

+
下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例：

 
 
   

    Color depth (bit depth)颜色位深越高，视频中颜色保真度质量就越高。除此之外，在图像饱和部分（颜色纯而强烈的，例如明亮纯红色［rgba(255,0,0,1)），低于每分量10色深(10bits色彩)允许条带化，其中，如果没有可见色阶跃就无法表示渐变。颜色位深越高，视频中颜色保真度质量就越高。除此之外，在图像饱和部分（颜色纯而强烈的，例如明亮纯红色［rgba(255,0,0,1)），低于每分量 10 色深 (10bits 色彩) 允许条带化，其中，如果没有可见色阶跃就无法表示渐变。
    Depending on the codec, higher color depths may result in larger compressed file sizes. The determining factor is what internal storage format is used for the compressed data.
   

   

  
  
  
  
  
  
  
  
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

@@ -43,7 +43,7 @@ 
同源的定义

-   
+   
@@ -78,7 +78,7 @@ 
IE 中的特例
  • 端口：IE 未将端口号纳入到同源策略的检查中，因此 https://company.com:81/index.html 和 https://company.com/index.html  属于同源并且不受任何限制。
    • 
 
-
    这些差异点是不规范的，其它浏览器也未做出支持，但会助于开发基于window RT IE的应用程序。
    
+
    这些差异点是不规范的，其它浏览器也未做出支持，但会助于开发基于 window RT IE 的应用程序。
    源的更改
    
 
@@ -91,7 +91,7 @@ 
    源的更改
    这条语句执行之后，页面将会成功地通过与 http://company.com/dir/page.html 的同源检测（假设http://company.com/dir/page.html 将其 document.domain 设置为“company.com”，以表明它希望允许这样做 - 更多有关信息，请参阅 {{domxref("document.domain")}} ）。然而，company.com 不能设置 document.domain 为 othercompany.com，因为它不是 company.com 的父域。
    
 
-
    端口号是由浏览器另行检查的。任何对document.domain的赋值操作，包括 document.domain = document.domain 都会导致端口号被重写为 null 。因此 company.com:8080 不能仅通过设置 document.domain = "company.com" 来与company.com 通信。必须在他们双方中都进行赋值，以确保端口号都为 null 。
    
+
    端口号是由浏览器另行检查的。任何对 document.domain 的赋值操作，包括 document.domain = document.domain 都会导致端口号被重写为 null 。因此 company.com:8080 不能仅通过设置 document.domain = "company.com" 来与company.com 通信。必须在他们双方中都进行赋值，以确保端口号都为 null 。
    
 
    注意：使用 document.domain 来允许子域安全访问其父域时，您需要在父域和子域中设置 document.domain 为相同的值。这是必要的，即使这样做只是将父域设置回其原始值。不这样做可能会导致权限错误。
    
@@ -102,7 +102,7 @@ 
    跨源网络访问
    
 
    同源策略控制不同源之间的交互，例如在使用{{domxref("XMLHttpRequest")}} 或 {{htmlelement("img")}} 标签时则会受到同源策略的约束。这些交互通常分为三类：
    
 
 
      
- 
    • 跨域写操作（Cross-origin writes）一般是被允许的。例如链接（links），重定向以及表单提交。特定少数的HTTP请求需要添加 preflight。
      • 
+ 
    • 跨域写操作（Cross-origin writes）一般是被允许的。例如链接（links），重定向以及表单提交。特定少数的 HTTP 请求需要添加 preflight。
      • 
  
    • 跨域资源嵌入（Cross-origin embedding）一般是被允许（后面会举例说明）。
      • 
  
    • 跨域读操作（Cross-origin reads）一般是不被允许的，但常可以通过内嵌资源来巧妙的进行读取访问。例如，你可以读取嵌入图片的高度和宽度，调用内嵌脚本的方法，或availability of an embedded resource.
      • 
 
    
@@ -111,8 +111,8 @@ 
    跨源网络访问
    
 
 
      
  
    • <script src="..."></script> 标签嵌入跨域脚本。语法错误信息只能被同源脚本中捕捉到。
      • 
- 
    • <link rel="stylesheet" href="..."> 标签嵌入CSS。由于CSS的松散的语法规则，CSS的跨域需要一个设置正确的 HTTP 头部 Content-Type 。不同浏览器有不同的限制： IE, Firefox, Chrome, Safari (跳至CVE-2010-0051)部分 和 Opera。
      • 
- 
    • 通过 {{htmlelement("img")}} 展示的图片。支持的图片格式包括PNG,JPEG,GIF,BMP,SVG,...
      • 
+ 
    • <link rel="stylesheet" href="..."> 标签嵌入 CSS。由于 CSS 的松散的语法规则，CSS 的跨域需要一个设置正确的 HTTP 头部 Content-Type 。不同浏览器有不同的限制： IE, Firefox, Chrome, Safari (跳至 CVE-2010-0051) 部分 和 Opera。
      • 
+ 
    • 通过 {{htmlelement("img")}} 展示的图片。支持的图片格式包括 PNG,JPEG,GIF,BMP,SVG,...
      • 
  
    • 通过 {{htmlelement("video")}} 和 {{htmlelement("audio")}} 播放的多媒体资源。
      • 
  
    • 通过 <object>、 <embed> 和 <applet> 嵌入的插件。
      • 
  
    • 通过 @font-face 引入的字体。一些浏览器允许跨域字体（cross-origin fonts），一些需要同源字体（same-origin fonts）。
      • 
@@ -126,12 +126,12 @@ 
      如何允许跨源访问
      
 
      如何阻止跨源访问
      
 
 
        
- 
      • 阻止跨域写操作，只要检测请求中的一个不可推测的标记(CSRF token)即可，这个标记被称为 Cross-Site Request Forgery (CSRF) 标记。你必须使用这个标记来阻止页面的跨站读操作。
        • 
+ 
      • 阻止跨域写操作，只要检测请求中的一个不可推测的标记 (CSRF token) 即可，这个标记被称为 Cross-Site Request Forgery (CSRF) 标记。你必须使用这个标记来阻止页面的跨站读操作。
        • 
  
      • 阻止资源的跨站读取，需要保证该资源是不可嵌入的。阻止嵌入行为是必须的，因为嵌入资源通常向其暴露信息。
        • 
- 
      • 阻止跨站嵌入，需要确保你的资源不能通过以上列出的可嵌入资源格式使用。浏览器可能不会遵守 Content-Type 头部定义的类型。例如，如果您在HTML文档中指定 <script> 标记，则浏览器将尝试将标签内部的 HTML 解析为JavaScript。 当您的资源不是您网站的入口点时，您还可以使用CSRF令牌来防止嵌入。
        • 
+ 
      • 阻止跨站嵌入，需要确保你的资源不能通过以上列出的可嵌入资源格式使用。浏览器可能不会遵守 Content-Type 头部定义的类型。例如，如果您在 HTML 文档中指定 <script> 标记，则浏览器将尝试将标签内部的 HTML 解析为 JavaScript。 当您的资源不是您网站的入口点时，您还可以使用 CSRF 令牌来防止嵌入。
        • 
 
      
 
-
      跨源脚本API访问
      
+
      跨源脚本 API 访问
      
 
 
      JavaScript 的 API 中，如 iframe.contentWindow、 {{domxref("window.parent")}}、{{domxref("window.open")}} 和 {{domxref("window.opener")}} 允许文档间直接相互引用。当两个文档的源不同时，这些引用方式将对 Window 和 Location对象的访问添加限制，如下两节所述。
      
 
@@ -175,39 +175,39 @@ 
      Window
      
  
    
-   
+   
-   
+   
-   
+   
-   
+   
-   
+   
-   
+   
-   
+   
-   
+   
-   
+   
    
  
   
    
    http://store.company.com:81/dir/etc.html
    失败端口不同 ( http:// 默认端口是80)端口不同 ( http:// 默认端口是 80)
   
    
   
    
    http://news.company.com/dir/other.html
  
 
 
 
 
 
 
 
    
   
    
    {{domxref("window.closed")}}只读.只读。
   
    
   
    
    {{domxref("window.frames")}}只读.只读。
   
    
   
    
    {{domxref("window.length")}}只读.只读。
   
    
   
    
    {{domxref("window.location")}}读/写.读/写。
   
    
   
    
    {{domxref("window.opener")}}只读.只读。
   
    
   
    
    {{domxref("window.parent")}}只读.只读。
   
    
   
    
    {{domxref("window.self")}}只读.只读。
   
    
   
    
    {{domxref("window.top")}}只读.只读。
   
    
   
    
    {{domxref("window.window")}}只读.只读。
   
    
      
 
    
@@ -241,7 +241,7 @@ 
    Location
    
  
   
    {{domxref("URLUtils.href")}}
-   只写.
+   只写。
   
  
 
@@ -252,7 +252,7 @@ 
    跨源数据存储访问
    
 
 
    访问存储在浏览器中的数据，如 localStorage 和 IndexedDB，是以源进行分割。每个源都拥有自己单独的存储空间，一个源中的 JavaScript 脚本不能对属于其它源的数据进行读写操作。
    
 
-
    {{glossary("Cookie", "Cookies")}}  使用不同的源定义方式。一个页面可以为本域和其父域设置 cookie，只要是父域不是公共后缀（public suffix）即可。Firefox 和 Chrome 使用 Public Suffix List 检测一个域是否是公共后缀（public suffix）。Internet Explorer 使用其内部的方法来检测域是否是公共后缀。不管使用哪个协议（HTTP/HTTPS）或端口号，浏览器都允许给定的域以及其任何子域名(sub-domains) 访问 cookie。当你设置 cookie 时，你可以使用 Domain、Path、Secure、和 HttpOnly 标记来限定其可访问性。当你读取 cookie 时，你无法知道它是在哪里被设置的。 即使您只使用安全的 https 连接，您看到的任何 cookie 都有可能是使用不安全的连接进行设置的。
    
+
    {{glossary("Cookie", "Cookies")}}  使用不同的源定义方式。一个页面可以为本域和其父域设置 cookie，只要是父域不是公共后缀（public suffix）即可。Firefox 和 Chrome 使用 Public Suffix List 检测一个域是否是公共后缀（public suffix）。Internet Explorer 使用其内部的方法来检测域是否是公共后缀。不管使用哪个协议（HTTP/HTTPS）或端口号，浏览器都允许给定的域以及其任何子域名 (sub-domains) 访问 cookie。当你设置 cookie 时，你可以使用 Domain、Path、Secure、和 HttpOnly 标记来限定其可访问性。当你读取 cookie 时，你无法知道它是在哪里被设置的。 即使您只使用安全的 https 连接，您看到的任何 cookie 都有可能是使用不安全的连接进行设置的。
    
 
 
    参见
    
 
diff --git a/files/zh-cn/web/security/secure_contexts/index.html b/files/zh-cn/web/security/secure_contexts/index.html
index 7941750f069a36..18c5d22b2786e6 100644
--- a/files/zh-cn/web/security/secure_contexts/index.html
+++ b/files/zh-cn/web/security/secure_contexts/index.html
@@ -3,16 +3,16 @@
 slug: Web/Security/Secure_Contexts
 translation_of: Web/Security/Secure_Contexts
 ---
-
    安全上下文是 Window 与 Worker 中的概念满足了最低标准的身份验证和机密性. 许多Web APIs的访问仅能在安全上下文中. 安全上下文的主要目标是防止 {{interwiki("wikipedia", "man-in-the-middle attack", "MITM attackers")}} 强大的APIs被坏人利用.
    
+
    安全上下文是 Window 与 Worker 中的概念满足了最低标准的身份验证和机密性。许多 Web APIs 的访问仅能在安全上下文中. 安全上下文的主要目标是防止 {{interwiki("wikipedia", "man-in-the-middle attack", "MITM attackers")}} 强大的 APIs 被坏人利用。
    
 
-
    为什么要限制某些功能?
    
+
    为什么要限制某些功能？
    
 
-
    有些APIs是非常强大的, 能给攻击者更强的能力以及更多的操作:
    
+
    有些 APIs 是非常强大的，能给攻击者更强的能力以及更多的操作：
    
 
 
      
- 
    • 侵犯用户隐私.
      • 
- 
    • 获得对用户计算机的低级访问权限.
      • 
- 
    • 获得对数据的访问权限，例如用户凭证.
      • 
+ 
    • 侵犯用户隐私。
      • 
+ 
    • 获得对用户计算机的低级访问权限。
      • 
+ 
    • 获得对数据的访问权限，例如用户凭证。
      • 
 
    
 
 
    When is a context considered secure?
    
diff --git a/files/zh-cn/web/security/securing_your_site/index.html b/files/zh-cn/web/security/securing_your_site/index.html
index 0d4c93c9251fda..73c71f36c8b449 100644
--- a/files/zh-cn/web/security/securing_your_site/index.html
+++ b/files/zh-cn/web/security/securing_your_site/index.html
@@ -17,22 +17,22 @@ 
    用户信息安全
    
 
 
    
  
    如何关闭表单的自动完成功能
    
- 
    在Gecko中表单字段支持自动完成功能; 因此他们的值可以被记住，并且在下一次用户访问你的网站时自动被填充. 对于某些特定类型的数据, 你可能希望禁止这个功能.
    
- 
    隐私和:visited选择器
    
- 
    这篇文章讨论对于getComputedStyle()方法的改动, 消除恶意站点获取用户浏览历史的能力.
    
+ 
    在 Gecko 中表单字段支持自动完成功能; 因此他们的值可以被记住，并且在下一次用户访问你的网站时自动被填充。对于某些特定类型的数据，你可能希望禁止这个功能。
    
+ 
    隐私和:visited 选择器
    
+ 
    这篇文章讨论对于getComputedStyle()方法的改动，消除恶意站点获取用户浏览历史的能力。
    
 
    
 
 
    内容安全
    
 
 
    
  
    正确配置服务器的 MIME 类型
    
- 
    不正确的 MIME 类型有几种方式可以对您的站点造成潜在的安全问题. 这篇文章解释了其中的几种方式, 并且向您展示如何配置您的服务器，以让它使用正确的 MIME 类型提供文件服务.
    
+ 
    不正确的 MIME 类型有几种方式可以对您的站点造成潜在的安全问题。这篇文章解释了其中的几种方式，并且向您展示如何配置您的服务器，以让它使用正确的 MIME 类型提供文件服务。
    
  
    HTTP Strict Transport Security
    
- 
    Strict-Transport-Security:  这个HTTP头允许站点只能使用 HTTPS。
    
+ 
    Strict-Transport-Security:  这个 HTTP 头允许站点只能使用 HTTPS。
    
  
    HTTP 访问控制
    
  
    跨源资源共享标准提供了一种指定可从其他域加载的内容的方法。 您可以使用它来防止您的网站被不正当地使用; 此外，您可以使用它来建立明确允许其他站点使用的资源。
    
  
    内容安全策略
    
- 
    一种附加的安全层，有助于检测和减轻某些类型的攻击，包括跨站脚本(XSS) 以及数据注入攻击。 这些攻击用于从数据窃取到站点破坏或恶意软件分发的所有内容。
    
+ 
    一种附加的安全层，有助于检测和减轻某些类型的攻击，包括跨站脚本 (XSS) 以及数据注入攻击。 这些攻击用于从数据窃取到站点破坏或恶意软件分发的所有内容。
    
  
    X-Frame-Options 响应头
    
  
    
  
    X-Frame-Options:该HTTP 响应头可用于指示是否应允许浏览器在{{HTMLElement("frame")}}中呈现页面。站点可以通过确保其内容未嵌入到其他站点中来避免点击劫持攻击。
    
@@ -42,5 +42,5 @@ 
    内容安全
    
 
    另外参考
    
 
 
diff --git a/files/zh-cn/web/security/securing_your_site/turning_off_form_autocompletion/index.html b/files/zh-cn/web/security/securing_your_site/turning_off_form_autocompletion/index.html
index 736645bc9916ab..98d214a3007383 100644
--- a/files/zh-cn/web/security/securing_your_site/turning_off_form_autocompletion/index.html
+++ b/files/zh-cn/web/security/securing_your_site/turning_off_form_autocompletion/index.html
@@ -16,7 +16,7 @@
 
 
    这些功能通常是默认启用的，但可能涉及用户的隐私，因此浏览器允许用户禁用这些功能。然而，一些数据可能会在将来失效（例如一次性密码）或包含敏感信息（例如唯一的政府身份识别码或信用卡安全码）。作为网站作者，你可能更希望浏览器不去记住这些字段的值，即使浏览器的自动填充功能已开启。
    
 
-
    重要的是，如果你关闭了自动填充，你就违反了这一条规则，1.3.5: Identify Input Purpose in WCAG 2.1。如果你制作的网站应该遵守WCAG，你就应该使用自动填充和自动补全。
    
+
    重要的是，如果你关闭了自动填充，你就违反了这一条规则，1.3.5: Identify Input Purpose in WCAG 2.1。如果你制作的网站应该遵守 WCAG，你就应该使用自动填充和自动补全。
    
 
 
    禁用自动填充
    
 
@@ -68,6 +68,6 @@ 
    使用 autocomplete
 
 
    如果你定义了一个用户管理页面，其中用户可以为其他人指定新的密码，因此你想阻止密码字段的自动填充，你可以使用 autocomplete="new-password"。
    
 
-
    这只是一个提示，浏览器不一定要遵守。但现代浏览器都已停止在设置了 autocomplete="new-password" 的 <input> 元素上使用自动填充。例如，Firefox 67 版（见 {{bug(1119063)}}）在这种情况下会停止自动填充；而 Firefox 70版（见 {{bug(1565407)}}）则可以建议一个安全生成的密码，而不自动填充已保存的密码。更多细节参见  autocomplete compat table。
    
+
    这只是一个提示，浏览器不一定要遵守。但现代浏览器都已停止在设置了 autocomplete="new-password" 的 <input> 元素上使用自动填充。例如，Firefox 67 版（见 {{bug(1119063)}}）在这种情况下会停止自动填充；而 Firefox 70 版（见 {{bug(1565407)}}）则可以建议一个安全生成的密码，而不自动填充已保存的密码。更多细节参见  autocomplete compat table。
    
 
 
    {{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}
    
diff --git a/files/zh-cn/web/security/subresource_integrity/index.html b/files/zh-cn/web/security/subresource_integrity/index.html
index 825d29d9a80381..852990fb918b9a 100644
--- a/files/zh-cn/web/security/subresource_integrity/index.html
+++ b/files/zh-cn/web/security/subresource_integrity/index.html
@@ -10,11 +10,11 @@
 translation_of: Web/Security/Subresource_Integrity
 original_slug: Web/Security/子资源完整性
 ---
-
    子资源完整性(SRI)是允许浏览器检查其获得的资源（例如从 CDN 获得的）是否被篡改的一项安全特性。它通过验证获取文件的哈希值是否和你提供的哈希值一样来判断资源是否被篡改。
    
+
    子资源完整性(SRI) 是允许浏览器检查其获得的资源（例如从 CDN 获得的）是否被篡改的一项安全特性。它通过验证获取文件的哈希值是否和你提供的哈希值一样来判断资源是否被篡改。
    
 
 
    SRI 如何工作
    
 
-
    使用 {{Glossary("CDN", "内容分发网络 (CDNs)")}} 在多个站点之间共享脚本和样式表等文件可以提高站点性能并节省带宽。然而，使用CDN也存在风险，如果攻击者获得对 CDN 的控制权，则可以将任意恶意内容注入到 CDN 上的文件中 （或完全替换掉文件)
    
+
    使用 {{Glossary("CDN", "内容分发网络 (CDNs)")}} 在多个站点之间共享脚本和样式表等文件可以提高站点性能并节省带宽。然而，使用 CDN 也存在风险，如果攻击者获得对 CDN 的控制权，则可以将任意恶意内容注入到 CDN 上的文件中（或完全替换掉文件)
    
  ），因此可能潜在地攻击所有从该 CDN 获取文件的站点。
    
 
 
    子资源完整性通过确保 Web 应用程序获得的文件未经第三方注入或其他任何形式的修改来降低这种攻击的风险。
    
@@ -22,7 +22,7 @@ 
    SRI 如何工作
    
 
 
 
    
-
    Note: SRI并不能规避所有的风险。第三方库经常会自己请求额外的信息，这就有可能会携带用户的账号密码等关键信息。这些经常需要js功能的支持，比如一个地图库会需要取<svg>数据来渲染，但是包含点击事件。
    
+
    Note: SRI 并不能规避所有的风险。第三方库经常会自己请求额外的信息，这就有可能会携带用户的账号密码等关键信息。这些经常需要 js 功能的支持，比如一个地图库会需要取<svg>数据来渲染，但是包含点击事件。
    
 
    
 
 
    如何使用 SRI
    
diff --git a/files/zh-cn/web/security/transport_layer_security/index.html b/files/zh-cn/web/security/transport_layer_security/index.html
index 72a208fa48b2b7..f6c6da9f8d8b35 100644
--- a/files/zh-cn/web/security/transport_layer_security/index.html
+++ b/files/zh-cn/web/security/transport_layer_security/index.html
@@ -8,12 +8,12 @@
 translation_of: Web/Security/Transport_Layer_Security
 original_slug: Web/Security/传输层安全协议
 ---
-
    使用传输层安全性协议（TLS）进行的任何连接的安全性在很大程度上取决于密码套件和所选的安全性参数。 本文的目的是帮助您确保客户端和服务器之间的机密性和完整性通信。Mozilla运营安全团队（OpSec）维护了 服务器端TLS参考配置的Wiki条目。
    
+
    使用传输层安全性协议（TLS）进行的任何连接的安全性在很大程度上取决于密码套件和所选的安全性参数。 本文的目的是帮助您确保客户端和服务器之间的机密性和完整性通信。Mozilla 运营安全团队（OpSec）维护了 服务器端 TLS 参考配置的 Wiki 条目。
    
 
-
    传输层安全性协议（Transport Layer Security protocol，TLS）是使两个联网应用程序或设备能够安全可靠地交换信息的标准。使用TLS的应用程序可以自行选择安全性参数，这可能会对数据的安全性和可靠性产生重大影响。本文对TLS进行了概述，并提供了多种在保护内容时需要做出的决策。
    
+
    传输层安全性协议（Transport Layer Security protocol，TLS）是使两个联网应用程序或设备能够安全可靠地交换信息的标准。使用 TLS 的应用程序可以自行选择安全性参数，这可能会对数据的安全性和可靠性产生重大影响。本文对 TLS 进行了概述，并提供了多种在保护内容时需要做出的决策。
    
 
 
    另请参阅
    
 
 
      
- 
    • Cipherli.st's 此网站为各种各样的软件产品列出了强大的TLS配置信息供参考。
      • 
+ 
    • Cipherli.st's 此网站为各种各样的软件产品列出了强大的 TLS 配置信息供参考。
      •