recursal/MDN huggingface dataset:
发布网站
====

* 上一页
* Overview: Getting started with the web
* 下一页

在你已经写好了代码并且整理好了你网站的全部文件后，你需要将它们全部上线，这样别人才能看到。这篇文章将向你展示如何轻松地将你简单的示例代码传到网上。

有哪些方法可供选择？
----------

发布一个网页并不是三言两语就能简单说明的，这主要是因为我们有很多种方法去完成它。在这篇文章里我们并不准备讲述所有方法，而是从初学者的视角讨论以下三种常见的方式的利弊，然后带你看看我们将要使用的一种方法。

### 获取主机服务和域名

如果你想要完全控制你发布的网页，那么你将需要花钱购置：

* 主机服务——在主机服务提供商的 Web 服务器上租用文件空间。将你网站的文件上传到这里，然后服务器会提供 Web 用户需求的内容。
* 域名——一个可以让人们访问的独一无二的地址，比如 `http://www.mozilla.org` 或 `http://www.bbc.co.uk`。你可以从**域名注册商**租借域名。

许多专业的网站通过这种方法接入互联网。

此外，你将需要一个 文件传输协议 程序 ( 点击钻研在网络上做某些事情要花费多少：软件查看详细信息 ) 来将网站文件上传到服务器。不同的 FTP 程序涵盖了不同的范围，但是你通常需要使用主机服务提供商给你的详细信息（比如用户名、密码、主机名）登录到 Web 服务器。然后程序在两个窗口里分别显示本地文件和服务器文件，这样你就可以在它们之间进行传输：

![](/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website/ftp.jpg)

#### 寻找主机服务和域名的建议

* 我们不会推荐任何商业化的主机公司。要找到主机公司和域名注册商，只需要搜索 "网络主机服务" 和 "域名" 来找到一家出售域名的公司。所有这种类型的公司都允许你查看你想要的域名是否可用。
* 你的家庭或办公 网络服务提供商 可能会提供一些受限制的的小型主机空间。它们的能使用的功能都会受到限制，但是它们会非常适合你的第一个实验的——联系一下他们！
* 有一些免费服务比如 Neocities ， Blogspot ，和 Wordpress 。重复一遍，一分钱一分货，不过它们对于你的初次实验可能会是很理想的。免费服务大部分也不需要 FTP 软件来上传文件——你只需要将文件拖入到它们网页的界面里。
* 有时公司会打包提供主机服务和域名。
### 使用在线工具如 GitHub 或 Google App Engine

有一些工具能使你在线发布网站 :

* GitHub 是一个“社交编程”网站。它允许你上传代码库并储存在 Git 版本控制系统里。然后你可以协作代码项目，系统是默认开源的，也就是说世界上任何人都可以找到你 GitHub 上的代码。去使用 GitHub，从中学习并且提高自己吧！你也可以对别人的代码那样做！这是一个非常重要、有用的社区，而且 Git/GitHub 是非常流行的 版本控制系统 — 大部分科技公司在工作中使用它。GitHub 有一个非常有用的特点叫 GitHub pages，允许你将网站代码放在网上。
* Google App Engine 是一个让你可以在 Google 的基础架构上构建和运行应用的强劲平台——无论你是需要从头开始构建多级 web 应用还是托管一个静态网站。参阅How do you host your website on Google App Engine?以获取更多信息。

不同于大部分其他托管服务，这类工具通常是免费的，不过你只能使用有限的功能。

### 使用像 CodePen 这样基于 Web 的集成开发环境

有许多 web 应用能够仿真一个网站开发环境。你可以在这种应用——通常只有一个标签页——里输入 HTML、CSS 和 JavaScript 代码然后像显示网页一样显示代码的结果。通常这些工具都很简单，对学习很有帮助，而且至少有免费的基本功能，它们在一个独特的网址显示你提交的网页。不过，这些应用的基础功能很有限，而且应用通常不提供空间来存储图像等内容。

使用一下以下几种工具，看看你最喜欢哪一个：

* JSFiddle
* Glitch
* JSBin
* CodePen

![](/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website/jsbin-screen.png)

通过 GitHub 发布
------------

现在，让我们通过 Github 页面告诉你公布的你的代码是如此的简单。

1. 首先， 注册一个 GitHub 账号， 并确认你的邮箱地址。
2. 接下来，你需要创建一个新的资源库 ( repository ) 来存放你的文件。
3. 在这个页面上，在 *Repository name* 输入框里输入 *username*.github.io，username 是你的用户名。比如，我们的朋友 bobsmith 会输入 *bobsmith.github.io。同时勾选* *Initialize this repository with a README*，然后点击 *Create repository*。
 ![](/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website/github-create-repo.png)
4. 然后，将你的网站文件夹里的内容拖拽到你的资源库 ( repository )，再点击 *Commit changes*。

**备注：** 确保你的文件夹有一个 *index.html* 文件。
5. 现在将你的浏览器转到 *username*.github.io 来在线查看你的网站。比如，*如果用户名为 chrisdavidmills*, 请转到 chrisdavidmills.github.io。

**备注：** 你的网站可能需要几分钟的时间才能投入使用。如果它不能立即工作，你可能需要等待几分钟，然后再试一次。

想要了解更多，请看 GitHub Pages Help.

延展阅读
----

* 什么是网络服务器？
* 什么是域名？
* 钻研在网络上做某些事情要花费多少？
* Deploy a Website（英文）：来自 Codeacademy 的一个很好的教程，它比本教程更进一步，并展示了一些其他技术。
* Scott Murray 的 Cheap or free static web hosting （价格低廉或免费的静态 Web 主机服务）包含一些对可用的 Web 主机服务的建议。
* 上一页
* Overview: Getting started with the web
* 下一页
MathML 入门概述
===========

MathML 是用于在网页中编写数学公式的标记语言。本单元将为你提供一个轻松的开始，帮助你掌握 MathML 的基本原理、语法和如何在 HTML 中开始使用它。

#### 想成为前端开发人员吗？

我们提供了一门课程，包含了你实现此目标所需的所有基本信息。

**开始学习**

前提
--

在开始本单元之前，你应具备以下知识：

1. 对使用计算机和被动使用 Web（即查看内容）有基本熟悉。
2. 已完成基本的工作环境设置，详见安装基本软件，并了解如何创建和管理文件，详见处理文件。
3. 熟悉 HTML 的基本知识，详见 HTML 入门。

**备注：** 如果你在计算机/平板电脑/其他设备上工作，但这些设备上你无法创建自己的文件，那么可以尝试在在线编程平台（如 JSBin 或 Glitch）中运行代码示例。

指南
--

本单元包含以下文章，将带你了解 MathML 的基本理论，并提供机会让你测试练习技能。

开始使用 MathML

在本文中，我们将使用一个简单的 HTML 文档，看看如何在其中添加 MathML 公式，并逐步介绍一些元素。

文本容器

现在你对 MathML 有了更好的了解，我们将介绍文本容器（变量、数字、运算符等），它们是 MathML 公式的构建模块。

分数和根号

在文本容器的基础上，本文介绍了如何通过嵌套分数和根号来构建更复杂的 MathML 表达式。

附加符号

我们继续回顾基本数学符号，并重点介绍如何使用附加符号构建 MathML 元素。

表格

在掌握所有基本数学符号后，我们需要考虑表格布局，它可用于矩阵式表达式和其他高级数学布局。

评估
--

以下评估将测试你对上述指南中介绍的 MathML 基础知识的理解程度。

三个著名数学公式

学完之前的几篇文章后，你已经能够编写相对复杂的 MathML 公式。本评估将给你一个机会展示这一能力。
三个著名的数学公式
=========

* 上一页
* Overview: First steps

|  |  |
| --- | --- |
| 前提： | 在尝试本测验之前，你应该已经完成本单元中的所有文章，并且对 HTML 基础知识有所了解（请参阅 HTML 简介）。 |
| 目标： | 尝试使用 MathML 并测试你的新技能。 |

一篇数学小文章
-------

目标是使用 HTML 和 MathML 重写以下数学文章：

![通过 XeLaTeX 生成的 PDF 输出的屏幕截图](/zh-CN/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas/xelatex-output.png)

尽管你不需要熟悉 LaTeX，但知道生成它的 LaTeX 源代码可能会对你有帮助：


```latex
\documentclass{article}

\usepackage{amsmath}
\usepackage{amssymb}

\begin{document}

要解决三次方程 $t^3 + pt + q = 0$（其中实数 $p, q$ 满足 ${4p^3 + 27q^2} > 0$），可以使用卡尔达诺公式：

\[
 \sqrt[{3}]{
 -\frac{q}{2}
 +\sqrt{\frac{q^2}{4} + {\frac{p^{3}}{27}}}
 }+
 \sqrt[{3}]{
 -\frac{q}{2}
 -\sqrt{\frac{q^2}{4} + {\frac{p^{3}}{27}}}
 }
\]

对于任意 $u\_1, \dots, u\_n \in \mathbb{C}$ 和 $v\_1, \dots, v\_n \in \mathbb{C}$，柯西—布尼亚科夫斯基—施瓦茨不等式可以写成如下形式：

\[
 \left| \sum\_{k=1}^n {u\_k \bar{v\_k}} \right|^2
 \leq
 {
 \left( \sum\_{k=1}^n {|u\_k|} \right)^2
 \left( \sum\_{k=1}^n {|v\_k|} \right)^2
 }
\]

最后，范德蒙行列式可以使用以下表达式计算：

\[
 \begin{vmatrix}
 1 & x\_1 & x\_1^2 & \dots & x\_1^{n-1} \\
 1 & x\_2 & x\_2^2 & \dots & x\_2^{n-1} \\
 1 & x\_3 & x\_3^2 & \dots & x\_3^{n-1} \\
 \vdots & \vdots & \vdots & \ddots & \vdots \\
 1 & x\_n & x\_n^2 & \dots & x\_n^{n-1} \\
 \end{vmatrix}
 = {\prod\_{1 \leq {i,j} \leq n} {(x\_i - x\_j)}}
\]

\end{document}
```

起始点
---

要开始这个测验，你可以使用我们常用的 HTML 模板。默认情况下，它使用 UTF-8 编码，在 `<body>` 和 `<math>` 标签上使用特殊的 Web 字体（具有与 LaTeX 输出类似的界面外观）。目标是将问号 `???` 替换为实际的 MathML 内容。


```html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>三个著名的数学公式</title>
    <link
 rel="stylesheet"
 href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body class="htmlmathparagraph">
    <p>
      要解决三次方程 ???（其中实数 ??? 满足 ???），可以使用卡尔达诺公式：???
    </p>

    <p>
      对于任意 ??? 和 ???，柯西—布尼亚科夫斯基—施瓦茨不等式可以写成如下形式：???
    </p>

    <p>最后，范德蒙行列式可以使用以下表达式计算：???</p>
  </body>
</html>
```

提示和技巧
-----

* 首先插入空的 `<math>` 标签，并决定它们是否应该有 `display="block"` 属性。
* 检查所使用的文本，并找到它们的 Unicode 字符（“−”、“ℂ”、“∑”等）。
* 分析每个文本部分的语义（变量？运算符？数字？），并确定每个部分应使用的正确的标记元素。
* 查找高级结构（分数？根号？上下标？矩阵？），并确定每个结构应使用的正确的 MathML 元素。
* 别忘了使用 `<mrow>` 对子表达式进行分组。
* 注意可伸缩和大型运算符！
* 使用 W3C 验证器检查你的 HTML/MathML 标记中是否有意外的错误。
* 如果你陷入困境，或感到手动编写 MathML 有多么痛苦，请随时使用编写 MathML 的工具（如 TeXZilla）。
* 上一页
* Overview: First steps
测量性能
====

* 上一页
* Overview: Performance
* 下一页

测量性能提供了一个重要的指标，以帮助你评估应用程序、网站或 web 服务的成功程度。

例如，你可以使用性能指标来确定你的应用程序与竞争对手相比如何表现，或者你可以比较应用程序在各个版本之间的性能。你选择的度量指标应与你的用户、网站和业务目标相关。它们应以一致的方式收集和测量，并以非技术利益相关者可以使用和理解的格式进行分析。

本文介绍了可以用来获取网站性能指标的工具，这些工具可以用来衡量和优化你的网站性能。

|  |  |
| --- | --- |
| 前提： | 基本计算机素养，已安装基本软件，以及客户端网络技术的基本知识。 |
| 目标： | 提供关于可以通过不同的 web 性能 API 和工具来收集的性能指标的信息，并介绍可以用来展示这些数据的工具。 |

性能工具
----

有几种不同的工具可用于帮助你测量和改进性能。这些工具通常可以分为两类：

* 表明或测量性能的工具，比如 PageSpeed Insights 或 Firefox 的网络监视器和性能监视器。这些工具展示了你的网站加载的快慢。它们也指出了你的 Web 应用程序中可以优化的区域。
* 你可以用来构建自定义性能工具的性能 API。
通用性能报告工具
--------

像 PageSpeed Insights 这样的工具可以衡量网站的性能。你可以输入一个 URL，并在几秒钟内获得一份性能报告。报告包含有关你的网站在移动设备和桌面设备上的表现的分数。这是了解你已经做得很好的地方以及可以改进的地方的良好开始。

撰写本文时，MDN 的性能报告摘要看起来类似于以下内容：

![Mozilla 主页的 PageSpeed Insights 报告截图。](/zh-CN/docs/Learn/Performance/Measuring_performance/pagespeed-insight-mozilla-homepage.png)

性能报告包含有关用户在页面上显示任何内容之前需要等待多长时间、显示页面需要下载多少字节等信息。它还会让你知道测量的值是否被认为是好的或坏的。

webpagetest.org 是另一个可以自动测试你的网站并返回有用指标的工具示例。

尝试现在使用这些工具运行你最喜欢的网站，查看分数如何。

网络监视工具
------

大多数浏览器都有可用的工具，你可以使用这些工具来针对已加载的页面进行运行，以确定它们的性能如何，大多数工具的工作方式都很类似。例如，Firefox 的网络监视器返回有关从网络下载的所有素材的详细信息，并以瀑布图的形式显示每个素材的下载时间。

![Firefox 网络监视器显示已加载的素材列表以及每个素材的加载时间](/zh-CN/docs/Learn/Performance/Measuring_performance/network-monitor.png)

你还可以查看 Chrome 的网络监视器文档

性能监视工具
------

你也可以使用浏览器性能监测工具，比如 Firefox 性能监测器来测量在执行不同操作时一个 web 应用或网站的用户界面性能。这可以指出可能拖慢你的 web 应用或网站速度的特性。

![开发者工具性能面板显示录制 #1. 的瀑布图](/zh-CN/docs/Learn/Performance/Measuring_performance/perf-monitor.png)

另见 Chrome 性能工具文档。

性能 API
------

编写 web 代码时，有大量的 web API 可用，使你可以创建自己的性能测量工具。

你可以使用导航计时 API 来测量客户端 web 性能，包括卸载上一个页面所需的时间、域名查询所需的时间、执行窗口加载处理程序所花费的总时间等。你可以将该 API 用于与下图中显示的所有导航事件相关的度量。

![导航计时 API 可处理的各种处理器（包括 Navigation Timing API 度量）：unload 提示、redirect、unload、应用缓存、DNS、TCP、请求、相应、处理、onLoad，以及 navigationStart、redirectStart、redirectEnd、fetchStart、domainLookupEnd、domainLookupStart、connectStart（secureConnectionStart）、connectEnd、requestStart、responseStart、responseEnd、unloadStart、unloadEnd、domLoading、domInteractive、domContentLoaded、domComplete、loadEventStart、loadEventEnd](/zh-CN/docs/Learn/Performance/Measuring_performance/navigationtimingapi.jpg)

性能 API 为当前页面提供了访问性能相关信息的能力，包括性能时间轴 API、导航计时 API、用户计时 API 和资源计时 API。这些接口允许准确测量 JavaScript 任务完成所需的时间。

PerformanceEntry 对象是*性能时间轴*的一部分。*性能条目*可以通过在应用程序的显式点创建性能 *`mark` (en-US)* 或 *`measure` (en-US)*（例如，通过调用 `mark()` 方法直接创建）。性能条目还可以通过间接方式创建，例如加载图像等资源。

PerformanceObserver API 可用于观察性能测量事件，并在浏览器的性能时间轴中记录新的性能条目时通知你。

虽然本文并没有深入介绍这些 API 的使用，但了解它们的存在是有用的。你还可以参考导航和计时 (en-US)文章，以获取有关使用性能 web API 的更多示例。

结语
--

本文简要介绍了 web 性能指标，以帮助你了解可以在 web 应用程序或网站上测量的内容。接下来，你将了解如何优化网站上的图片以优化其性能。

* 上一页
* Overview: Performance
* 下一页
Web 性能的重要性
==========

* Overview: Performance
* 下一页

Web 性能关乎网站的快速加载，以及让缓慢过程*看起来*更快。本文将介绍 web 性能对于网站访问者和你的业务目标的重要性。

|  |  |
| --- | --- |
| 预备条件： | 
 基本计算机素养、基本软件已安装，以及
 客户端网络技术的基本知识。
  |
| 目标： | 了解 web 性能对良好用户体验的重要性。 |

Web 性能是指网站内容在网页浏览器中的**加载**和**渲染**速度，以及对用户交互的响应。性能不佳的网站显示和响应输入速度缓慢。性能不佳的网站会增加用户放弃访问的概率。在最糟糕的情况下，性能不佳会导致内容完全无法访问。一个很好的 web 性能目标是让用户注意不到性能。虽然个人对网站性能的感知是主观的，但加载和渲染可以进行测量。良好的性能可能对大多数网站访问者来说并不明显，但大多数人会立即意识到一个网站的响应是否迟缓。这就是为什么我们关心 web 性能。

为什么关心性能？
--------

Web 性能及其相关的最佳实践对于网站访问者拥有良好的体验至关重要。从某种意义上说，web 性能可以被认为是 web 无障碍的一个子集。在性能和无障碍方面，你需要考虑网站访问者使用的设备以及设备的连接速度。

以 CNN.com 的加载体验为例，截至撰写本文时，该网站有超过 400 个 HTTP 请求，文件大小超过 22.6MB。

* 想象一下在连接光纤网络的台式电脑上加载这个网站。这将相对较快，文件大小基本无关紧要。
* 想象一下在通勤回家的公共交通工具上，通过用了 9 年的 iPad 使用移动数据加载相同的网站。根据蜂窝网络覆盖情况，该网站将加载缓慢，甚至可能无法使用。在加载完成之前，你可能已经放弃了。
* 想象一下在印度农村使用覆盖有限或无覆盖的 35 美元华为设备加载同样的网站。加载速度会非常慢，还可能因为阻塞脚本而超时。即使加载能成功，不良的 CPU 也可能导致浏览器崩溃。

在 3G 网络上，一个 22.6 MB 的网站可能需要长达 83 秒才能加载，`DOMContentLoaded`（即网站的基本 HTML 结构）为 31.86 秒。

不仅仅下载所需时间是主要问题。很多国家的互联网连接仍然按兆字节计费。以我们的例子，22.6 MB 的 CNN.com 体验可能需要印度平均工资的 11% 才能下载。在西北非洲的移动设备上，可能需要两天的平均工资。如果这个网站在美国运营商的国际漫游计划上加载呢？费用会让任何人都流泪。（参见下载你的网站需要多少费用。）

### 提高转化率

减少网站的下载和渲染时间可以提高转化率和用户留存。

**转化率**是指网站访问者执行某种测量或期望操作的比率。例如，这可能是购买商品、阅读文章或订阅时事通讯。被视为转化率的操作取决于网站的业务目标。

性能影响转化；提高 web 性能就能提高转化。网站访问者期望一个网站在两秒内或更短的时间内加载；有时在移动设备上甚至更短（通常需要更长时间）。从 3 秒开始，这些网站访问者就会开始放弃缓慢的网站。

网站加载速度是一个因素。如果网站对用户交互的反应慢，或者看起来不流畅，这会导致访问者失去兴趣和信任。

以下是一些现实世界中的性能改进示例：

* Tokopedia 将 3G 连接的渲染时间从 14 秒减少到 2 秒，访问者增加了 19%，总会话数增加了 35%，新用户增加了 7%，活跃用户增加了 17% ，每位用户的会话数增加了 16%。
* Pinterest 页面重建以提高性能，导致等待时间减少了 40%，SEO 流量增加了 15%，注册转化率增加了 15%。

要构建人们愿意使用的网站和应用程序；要吸引和留住网站访问者，你需要创建一个易于访问且提供良好用户体验的网站。构建网站需要 HTML、CSS 和 JavaScript，通常还包括诸如图像和视频等二进制文件类型。你在构建网站时所作的决策和选择的工具在很大程度上会影响完成后的性能。

良好的性能是一种资产，糟糕的性能是一种负担。网站速度直接影响跳出率、转化、收入、用户满意度和搜索引擎排名。已经证明，性能优良的网站能够提高访问者留存和用户满意度。加载缓慢的内容已经被证明会导致网站被放弃，有些访问者离开后可能永远不会回来。减少客户端和服务器之间传输的数据量可降低各方的成本。减小 HTML/CSS/JavaScript 和媒体文件大小可以降低网站的加载时间和功耗（请参阅性能预算 (en-US)）。

跟踪性能非常重要。多种因素，包括网络速度和设备性能，都会影响性能。没有单一的性能指标；不同的业务目标和用户需求需要不同的性能度量。要提高网站性能，你需要了解用户体验、加载和渲染性能，以及如何将性能度量与业务指标结合起来。通过对性能的了解，你可以为你的网站和应用程序提供更快、更顺畅的体验。

结论
--

Web 性能对于可访问性以及服务于组织或企业目标的其他网站指标非常重要。网站性能的好坏与用户体验以及大多数网站的整体效果密切相关。这就是为什么你应该关心 web 性能。

* Overview: Performance
* 下一页
多媒体：视频
======

* 上一页
* Overview: Performance
* 下一页  (en-US)

正如我们在前一节中了解到的，媒体（即图片和视频）占了一般网站下载量的 70% 以上。我们已经学过了如何优化图片。本文将研究如何优化视频来提高 web 性能。

|  |  |
| --- | --- |
| 前提： | 
 基本的计算机知识，
 已安装基本软件，以及客户端 web 技术的基本知识。
  |
| 目标： | 了解各种视频格式及其对性能的影响，以及如何在为每个浏览器提供最小的视频文件类型的同时减少视频对整个页面加载时间的影响。 |

为什么优化你的多媒体？
-----------

对于一般网站来说，25% 的带宽来自视频。优化视频有望带来巨大的带宽节省，而这又可以转化为更好的网站性能。

优化视频传输
------

下面的小节描述了以下优化技术：

* 压缩所有视频
* 优化 `<source>` 顺序
* 视频自动播放
* 从静音的视频中移除音频
* 优化视频预加载
* 考虑流媒体
### 压缩所有视频

大多数视频压缩工作都是比较视频内相邻帧之间的细节，目的是移除两帧中相同的细节。压缩视频并导出多种视频格式，包括 WebM、MPEG-4/H.264 和 Ogg/Theora。

你的视频编辑软件可能有减小文件大小的功能。如果没有，有在线工具，比如 FFmpeg（将在后面的小节讨论）可以对视频进行编码、解码、转换以及其他优化功能。

### 优化 `<source>` 顺序

按从小到大的顺序排序视频源。例如，给定三种分别压缩为 10 MB、12 MB 和 13 MB 的不同格式的视频，先声明最小的，最后声明最大的：


```html
<video width="400" height="300" controls="controls">
  <!-- WebM: 10 MB -->
  <source src="video.webm" type="video/webm" />
  <!-- MPEG-4/H.264: 12 MB -->
  <source src="video.mp4" type="video/mp4" />
  <!-- Ogg/Theora: 13 MB -->
  <source src="video.ogv" type="video/ogv" />
</video>
```


浏览器会下载它所理解的第一个格式。这样做的目的是优先提供较小的版本。对于最小的版本，应确保压缩程度最高的视频质量仍然可以。有一些压缩算法可以使视频看起来（很糟糕）像动画 GIF。尽管一个 128 Kb 视频相比 10 MB 在下载方面貌似可以提供更好的用户体验，但是模糊的 GIF 似的视频可能会对品牌或项目产生不好的影响。

参阅 CanIUse.com 了解当前浏览器对视频和其他媒体类型的支持。

### 视频自动播放

要确保背景视频自动循环播放，你必须在视频标签中添加几个属性：`autoplay`、`muted` 和`playsinline`。


```html
<video
 autoplay=""
 loop=""
 muted="true"
 playsinline=""
 src="backgroundvideo.mp4"></video>
```


虽然 `loop` 和 `autoplay` 足以使视频循环和自动播放，但想要在移动浏览器中自动播放的话，`muted` 属性是必需的。

`Playsinline` 对于移动 Safari 浏览器来说是必需的，它允许视频播放时不强制全屏模式。

### 从静音的 hero 视频中移除音频

对于 hero 视频或者其他没有音频的视频，移除音频是明智的选择。


```html
<video autoplay="" loop="" muted="true" playsinline="" id="hero-video">
  <source src="banner\_video.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="web\_banner.mp4" type="video/mp4" />
</video>
```


这段 hero 视频代码（上面）常用于会议网站和企业主页。它包含了一个自动播放、循环和静音的视频。没有控制按钮，所以无法听到声音。音频通常是无声的，但仍然存在，而且仍然占用带宽。没有理由在永远静音的视频中提供音频。**删除音频可以节省 20% 的带宽。**

根据你选择的软件，你可能可以在导出和压缩过程中移除音频。如果不能，一个名为 FFmpeg 的免费工具可以帮你做到。这是用 FFmpeg 移除音频的命令字符串：


```bash
ffmpeg -i original.mp4 -an -c:v copy audioFreeVersion.mp4
```

### 视频预加载

预加载属性有三个可用选项：`auto`|`metadata`|`none`。默认设置是 `metadata`。这些设置控制了在页面加载时下载多少视频文件。你可以通过延迟下载较少受欢迎的视频来节省数据。

设置 `preload="none"` 的结果是在播放开始之前，视频不会被下载。这会延迟启动，但对于播放概率较低的视频，可以节省大量数据。

为了更适度的带宽节省，可以设置 `preload="metadata"`，这可能会在页面加载时下载视频的 3%。这对于一些小型或中等大小的文件来说是一个有用的选项。

将设置改为 `auto` 告诉浏览器自动下载整个视频。只有当播放可能性非常高时才这样做。否则，这将浪费大量的带宽。

### 考虑流媒体

视频流媒体允许适当的视频大小和带宽（基于网络速度）被传送到最终用户。类似于响应式图像，正确大小的视频被传送到浏览器，确保视频快速启动、缓冲少以及播放优化。

结论
--

优化视频有可能显著提高网站性能。视频文件相比其他网站文件相对较大，因此始终值得关注。本文解释了如何通过减少文件大小、使用（HTML）下载设置和流媒体来优化网站视频。

* 上一页
* Overview: Performance
* 下一页  (en-US)
web 性能的商业案例
===========

* 上一页
* Overview: Performance
* 下一页

我们已经讨论了 web 性能的重要性。你已经了解了如何优化 web 性能。但是如何说服你的客户和/或管理层优先考虑并投资于性能呢？在本节中，我们将讨论如何创建一个清晰的商业案例，以说服决策者进行投资。

|  |  |
| --- | --- |
| 前提： | 基本的计算机素养，对客户端 web 技术有基本的了解，以及对 web 性能优化有基本的理解。 |
| 目标： | 增强使客户和管理层将 web 性能作为优先事项。 |

将性能作为商业优先事项
-----------

我们已经讨论了优先考虑性能如何改善用户体验，从而增加收入。我们知道了，不优先考虑 web 性能可能导致业务收入的损失。本文讨论了某些业务指标与用户的 web 性能体验直接相关，并介绍了如何应用服务设计来提升用户对 web 性能的体验。它强调了理解累积体验如何影响转化率和留存率的重要性。

### 性能预算

设定一个 web 性能预算可以帮助你确保团队维护网站性能，避免性能衰退。性能预算是一组限制条件，用于指定必须保持的性能指标，例如允许的最大 HTTP 请求数量、所有资源的最大总大小、在特定设备上的最低可接受帧率等。预算可以应用于单个文件、文件类型、页面上加载的所有文件、特定的性能指标或一段时间内的阈值。预算反映了可达到的目标，无论是基于时间、数量还是规则。

定义和推广预算有助于性能倡导者为用户体验和其他利益相关方，比如市场营销、销售或者想要添加视频、第三方脚本或者框架的开发者之间进行平衡。性能预算 (en-US)可以帮助开发团队保护用户的最佳性能，同时使业务能够开拓新市场并提供定制化的体验。

### 关键绩效指标

将关键绩效指标（KPI）设定为目标可以突出既是业务目标又是性能目标的绩效目标。KPI 既可以是衡量用户体验和性能对企业收入影响的一组重要业务指标，也可以是展示优先考虑性能的好处的一种方式。以下是一些值得考虑的 KPI：

**转化率**

你的流量中采取有意义行动（例如完成购买或订阅 newsletter）的百分比。当企业网站运行缓慢时，可能会阻止用户完成所需的任务，从而导致转化率低。

**停留在网站上的时间**

用户在你的网站上平均停留的时间。当网站运行缓慢时，用户更有可能提前离开网站，导致停留时间指标较低。

**净推荐值**

净推荐值（NPS）是评估公司品牌、产品或服务的客户忠诚度的指标。用户体验较差的性能可能导致品牌声誉不佳。

将转化率、停留时间和/或净推荐值设定为 KPI，为 web 性能方面的努力赋予财务和其他业务目标的价值，并通过指标证明这些努力的价值，以提高支持度。

* 上一页
* Overview: Performance
Web performance basics
======================

有很多的理由告诉你为什么你的网站需要尽可能好的性能。下面是关于最佳实践，工具，API 以及链接的简明介绍，它为每个主题提供了更多的信息。意识到对用户来说什么是真正重要的也至关重要，他可能不是绝对意义上的时间而是用户感知的时间。

#### 最佳实践

* 从学习浏览器的关键渲染路径开始。了解这些会帮助你通晓如何提升浏览器的性能。
* 使用resource hints例如`rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload`
* 压缩 Js 代码至最小。只为当前页面加载需要使用到的 js 代码
* CSS性能因素
* 在你的服务器（或者 CDN）上使用 HTTP/2协议
* 使用 CDN 托管静态资源，这样可以显著减少加载时间
* 使用gzip, Brotli 或者 Zopfli压缩你的资源
* 图片优化（如果可以，尽可能使用 css 动画或者 svg）
* 在超出应用视口范围的部分使用懒加载，如果你这么做了，为 SEO 制定一个后备计划（例如为 bot traffic 渲染整个页面）

#### 工具

* 学习使用Firefox Dev Tools来分析你的网站。
* Pagespeed Insights 可以分析你的页面并且给出一些通用的建议来提升网站性能。
* Lighthouse 可以给你一份有关你网站的包括性能，SEO 和无障碍等多个方面的详细分类。
* 使用 Webpagetest.org检测页面在不同真实设备类型和地点时候的速度。trics.
* 定义一个绩效预算（performance budget）。

#### APIs

* 收集用户指标通过 https://github.com/akamai/boomerang 。
* 或者通过window.performance.timing 直接收集。

#### 不该做的事（坏的实践）

* 将任何东西都下载下来
* 使用未经压缩的媒体文件
什么是 web 性能？
===========

* 上一页
* Overview: Performance
* 下一页

Web 性能就是让网站变得更快，以及让缓慢过程*看起来*更快。网站加载速度是否很快，是否允许用户快速开始与之交互，是否在某些东西需要时间加载时提供可靠的反馈（例如，一个“加载中”的旋转指示器）？网页的滚动和动画是否流畅？本文简要介绍了客观、可衡量的网络性能\*，涵盖了网络优化所涉及的技术、方法和工具。

|  |  |
| --- | --- |
| 预备条件： | 基本计算机素养、基本软件已安装，以及客户端网络技术的基本知识。 |
| 目标： | 为了了解网络性能所涉及的基础知识。 |

*\*对比下一篇文章中介绍的主观感知性能*

什么是 web 性能？
-----------

Web 性能是对网站或应用程序的客观度量和用户的体验。这包括以下主要方面：

* **减少总体负载时间**：需要多长时间才能将渲染网站所需的文件下载到用户的计算机上？这往往受到延迟 (en-US)、文件大小、文件数量以及其他因素的影响。一般策略是使文件尽可能小，尽可能减少 HTTP 请求的次数，并采用巧妙的加载技术（例如 preload）使文件更快可用。
* **尽快使网站可用**：简单来说就是以合理的顺序加载你的网站资源，以便用户能够更快地开始使用。在用户继续执行主要任务的同时，任何其他资源都可以在后台继续加载。有时我们也会在实际需要时才加载资源（这被称为懒加载）。网站从开始加载，到达到可用状态为止所需的时间被称为交互等待时间 (en-US)。
* **流畅性和交互性**：应用程序是否可靠，使用起来是否愉快？滚动是否流畅？按钮是否可点击？弹出窗口是否能够快速打开，并且在打开时动画是否流畅？在制作流畅的应用程序时，有很多优秀实践可以参考。例如使用 CSS 动画而不是 JavaScript 来制作动画，并尽量减少由于 DOM 变化而引起重绘 UI 的次数。
* **感知性能**：用户所体验到的，是网站看起来有多快，而不是网站实际有多快。用户感受到的性能与任何客观统计数据一样重要，甚至可能更重要。但这种主观的感受不容易测量。感知性能是用户的感受，而不是度量标准。即使操作将花费很长时间（因为延迟或其他原因），也可以通过显示“加载中”的旋转指示器或一系列有用的提示和技巧（或笑话，以及其他你认为合适的内容）来保持用户在等待期间的参与度。这种方法比什么都不显示要好得多。因为什么都不显示会让用户觉得等待了更长的时间，可能会让你的用户认为网站坏了，然后放弃使用。
* **性能测量**：Web 性能包括测量应用程序的实际速度和感知速度，在可能的情况下进行优化，然后监视性能，以确保已经优化过的内容保持优化状态。这涉及到许多度量标准（可以指示成功或失败的可度量指标）和测量这些度量标准的工具，我们将在本节中讨论这些度量标准。

总而言之，许多特性都会影响性能。包括延迟、应用程序大小、DOM 节点数量、资源请求数量、JavaScript 性能、CPU 负载等等。重要的是尽量缩短加载和响应时间，并通过增加额外的功能来隐藏延迟：先使网站变得可以交互，同时在后台加载用户体验中的次要部分。

**备注：** Web 性能既包括客观测量，如加载时间、每秒帧数和交互等待时间 (en-US)，也包括主观体验，如内容加载所需的时间。

内容如何渲染
------

为了有效地理解 web 性能、背后的问题以及我们上面提到的主要部分，你需要先了解一些关于浏览器如何工作的细节。这包括：

* **浏览器的工作原理**。当你请求一个 URL 并敲击
 `Enter`
 或
 `Return`
 按键时，浏览器会找出保存该网站文件的服务器的位置，与之建立连接，并请求文件。请参阅渲染页面：浏览器的工作原理。
* **源顺序**。HTML 索引文件的源顺序会显著影响性能。从索引文件链接到的附加资源的下载通常基于引用的顺序。这是可以调整的，需要进行优化。请注意：一些资源在被解析和执行完成之前，会阻塞其他的下载。
* **关键路径**。这是从服务器下载文件后，浏览器用来构建 web 文档的过程。浏览器按照明确定义的步骤进行操作，优化关键渲染路径以优先显示与当前用户操作相关的内容，将显著改善内容呈现时间。有关更多信息，请参见关键渲染路径。
* **文档对象模型**。文档对象模型（DOM）是一种树状结构，它将 HTML 的内容和元素表示为节点树。这包括所有的 HTML 属性和节点之间的关系。加载页面后的大量 DOM 操作（例如添加、删除或移动节点）可能会影响性能。因此有必要了解 DOM 的工作原理，以及如何减轻此类问题。有关更多信息，请参见文档对象模型。
* **延迟**。我们之前简要地提到过延迟。简单来说，延迟是你的网站信息从服务器传输到用户计算机所需的时间。建立 TCP 和 HTTP 连接需要消耗系统资源，并且在网络上来回传输请求和响应字节时不可避免地存在延迟。但是有一些方法可以减少延迟（例如，通过下载更少的文件来减少 HTTP 请求的数量，使用 CDN 使你的站点在全球范围内具有更普遍的性能，并使用 HTTP/2 协议提高传输的效率）。你可以在了解延迟 (en-US)上阅读有关此主题的所有内容。
结论
--

目前就是这些。我们希望我们对 web 性能主题的简要概述可以帮助你理解它的全部内容，并使你想要知道更多。接下来，我们将研究感知性能，以及如何使用一些巧妙的技术使某些不可避免的性能影响对用户来说不那么严重，或者被完全忽视。

* 上一页
* Overview: Performance
* 下一页
Web 游戏开发简介
==========

现代的 web 已经高速发展成为一个可行可靠的平台，它不仅能够用来创建高质量的酷炫游戏，同时也能够用来发布和传播这些游戏。

采用现代网页技术和较新的浏览器，完全有可能做出令人印象深刻的顶级页面游戏。它能够制作的游戏种类可以和桌面端以及原生系统相当。我们这里所说的，并不是很久之前就采用 Flash® 制作出的简单卡牌游戏或者多人社交游戏。而是牛逼的 3D 动作射击游戏，RPG 游戏等等。得益于 JavaScript 实时编译技术性能的大幅提升，以及新开放的 API。在制作运行在浏览器（或者是基于类似 Firefox OS 的 HTML5技术支持的设备）上的游戏时，我们不用妥协。

HTML5 游戏平台
----------

你可以真正地为你的游戏考虑下 Web 来作为更好的目标平台。我们总是喜欢说，"the Web is the platform." 让我们浏览下 Web 平台的核心部分：

| 功能 | 技术 |
| --- | --- |
| **音频** | Web Audio API |
| **图形** | WebGL (OpenGL ES 2.0) |
| **输入** | Touch events, Gamepad API, 设备传感器，WebRTC (en-US), Full Screen API, Pointer Lock API |
| **语言** | JavaScript (或是 C/C++ 使用 Emscripten 来编译成 JavaScript) |
| **网络** | WebRTC (en-US) 和/或 WebSockets |
| **存储** | IndexedDB 或是 "云 (存储)" |
| **Web** | HTML, CSS, SVG, Social API (还有其他很多很多东西！) |

商业案例
----

作为一名游戏开发者，无论你是独立的个人还是大型游戏工作室，你想知道你的下一个游戏项目瞄准 Web 是有意义的。让我们看看 Web 是如何帮到你的。

1. Web 触手可及；它无处不在。如今可以看到，用 HTML5 构建的游戏运行在智能手机，平板，个人电脑和智能电视。
2. 提高营销和曝光度。你不限于在某商店推广你的游戏。相反，你可以像其他媒体一样在 Web 宣传和推广你的游戏，利用网络的固有性和共享性接触新客户。
3. 你可以掌握最重要的事项：支付。你不必交付超过收入的 30% 给他人，仅仅就因为你的游戏在他们的生态系统。相反，你可以管理任何你想要的和使用任何你喜欢的付款处理服务。
4. 拥有更多控制权的是，只要你愿意，你可以随时更新游戏。不必着急等待审核通过，仅当其他公司的某某人决定你的关键 bug 修复是否会在今天或明天交付。
5. 掌握你的数据分析！不必依靠别人作出所有决定，你需要什么分析，你可以收集自己的——或选择你最喜欢的第三方平台，来收集有关你的销售和游戏产生的信息。
6. 你可以用你的方式更密切地管理你的客户关系。再也不用苦苦等待只能通过应用商店有限的机制来过滤客户的反馈。用你想要的方式与客户交流，没有中间人。
7. 你的玩家可以随时随地玩你的游戏。因为 Web 是无处不在的，你的顾客可以在手机，平板，家庭手提，个人电脑或其他设备上关注游戏动态。
针对游戏开发者的 Web 技术
---------------

技术同行们，让我们发掘出所有关于 Web 的 APIs，将它们呈现给所有的游戏开发者们。下面是一个比较完整的列表，可以一窥 Web 究竟能够做些什么：

Full Screen API

这个简单的 API 能够让你的游戏占据整个屏幕，从而使玩家沉浸在动作中

Gamepad API

如果你想你的用户能够使用游戏手柄或其他游戏控制器来控制游戏，你需要这个 API

HTML and CSS

二者合璧，可以构建，设计并对你的游戏界面布局，HTML 有一个提供 2D 图形的元素，即`<canvas>`

HTML audio

`<audio>` 元素可以用来播放一些简单的音效和音乐。如果你想要更多的参与，可以学习Web Audio API 来深入了解音频处理的力量！

IndexedDB

一个强大的数据存储 API，用来在电脑或者设备上保存用户自己的数据。一个很好的方法用来保存游戏的状态和其他最近的信息，这样在需要的时候不用每次重新下载。也可以用来让你的游戏即使用户没有链接到网络也能继续玩（例如在飞机上的数小时）。

JavaScript

JavaScript 是网络上使用的编程语言，在现代浏览器中正在快速发展，而且一直在快速发展。使用它的力量为你的游戏编写代码，或者使用Emscripten或Asm.js等技术轻松移植你现有的游戏。

Pointer Lock API

指针锁定 API 允许你在游戏界面中锁定鼠标或其他指针设备，以便你不用绝对定位光标就可以获得坐标变化值，从而准确地判断用户正在做什么，并且还可以防止用户意外地进入另一块屏幕或别的什么地方，从而导致误操作。

SVG (可缩放矢量图形)

无论用户显示器的大小或分辨率如何，都可以构建平滑缩放的矢量图形。

Typed Arrays

JavaScript 中的类型数组可以让你访问原始二进制数据；这使你可以操纵 GL 纹理，游戏数据或其他任何东西，即使它不是原生 JavaScript 数据格式。

Web Audio API

这个 API 用于控制 JavaScript 代码中的音频的回放，合成和处理，使你可以创建出色的音效，以及实时播放和操作音乐。

WebGL

允许你从 Web 内容创建高性能，硬件加速的 3D（和 2D）图形。这是一个 Web 支持的OpenGL ES 2.0 实现。

WebRTC (en-US)

WebRTC（实时通信）API 使你能够控制音频和视频数据，包括远程会议以及两个用户之间来回传输其他应用程序数据。希望你的玩家能够在殴打怪物的同时互相交流？这是你的 API，快使用它吧。

WebSockets

WebSocket API 使你可以将你的应用程序或站点连接到服务器，实时传输数据。构建完美的多人游戏动作，聊天服务等必备。

Web Workers

Workers API 能够让你生成运行 JavaScript 代码的后台线程，以充分利用现代的多核 CPU。

XMLHttpRequest 和 File API

XMLHttpRequest 和 File API 的组合使你可以从 Web 服务器发送和接收任何类型的数据。比如下载新的游戏关卡，文件，以及传递非实时游戏状态信息等。
游戏开发技术
======

这个页面为想要使用开放的 web 技术来开发游戏的人列举出了必要的核心技术。

使用 asm.js 中的异步脚本

尤其在制作中大型游戏时，异步脚本是一项必备技术，它可以让游戏的 JavaScript 脱离主线程进行编译，并在以后运行游戏时缓存起来，从而显著提高用户的性能。本文将介绍如何使用异步脚本。

优化启动性能

如何确保游戏启动快速、流畅，并且不会占用用户的浏览器或设备太久。

使用 WebRTC 点对点数据通道 (en-US)

除了支持音频和视频通信外，WebRTC 还能建立点对点数据通道，在播放器之间主动交换文本或二进制数据。本文将解释 WebRTC 的功能，并介绍如何使用库来轻松实现这一功能。

Web 游戏音频 (en-US)

音频是任何游戏的重要组成部分——它能增加反馈，活跃气氛。基于 web 的音频技术正在迅速成熟，但仍有许多浏览器差异需要解决。本文提供了实现 web 游戏音频的详细指南，尽可能广泛地介绍了目前在各种平台上都能使用的音频。

2D 碰撞检测

简明介绍 2D 游戏中的碰撞检测。

平铺贴图 (en-US)

在 2D 游戏中，贴图是一种非常流行的构建游戏世界的技术。这些文章介绍了平铺贴图是什么，以及如何使用 Canvas API 实现平铺贴图。
发布游戏
====

HTML5 游戏在发布和分发上具有极大的优势--你可以通过网络自由地发布，推广，获利，并且不受分发商的限制。你可以实现通过多种平台获利。这一系列的案例关注在当你想要发布，推广你的游戏，并当游戏变得有名时获取一些回报。

游戏发布
----

你按照一个或两个教程（1 (en-US)，2 (en-US)）制作了一个 HTML5 游戏。Game distribution提供了你发布游戏时所需的一切知识。包括如何在线托管游戏，提交游戏到开放的游戏市场，或封闭的游戏市场，如 Google Play，iOS App Store.

游戏推广
----

开发完成游戏并不是结束。你必须让世界知道你制作了一些有趣的东西能使他们乐在其中。这些游戏推广技术— 有些是免费的 — 即使你作为一名 0 预算的独立开发者为生活奔波，你依旧可以让很多人知道你制作的这个新游戏。推广游戏或许能够使你获得收入。高效的推广非常重要。

游戏获利
----

当你开发，发布并推广你的游戏后，你可以考虑通过游戏来获得收入。游戏获利对于考虑从业余转为全职并以此为生的开发者来说是必要的一个手段。现在来看看你的选择，技术已经足够成熟，现在只差一个合适的机会了。
HTML5 游戏开发简介
============

优点
--

1. 使用 HTML5 构建的游戏可以在智能手机，平板电脑，个人电脑和智能电视上工作。
2. 通过网络以及其他媒体广告宣传你的游戏。
3. 付款。收取你想要的，并使用任何你喜欢的付款处理服务。
4. 随时更新游戏。
5. 收集你自己的分析！
6. 更密切地与客户联系。
7. 玩家可随时随地玩游戏。
网络技术
----

| **Function** | **Technology** |
| --- | --- |
| **Audio** | Web Audio API (en-US) |
| **Graphics** | WebGL (OpenGL ES 2.0) |
| **Input** | Touch events, Gamepad API (en-US), device sensors, WebRTC (en-US), Full Screen API (en-US), Pointer Lock API (en-US) |
| **Language** | JavaScript (or C/C++ using Emscripten to compile to JavaScript) |
| **Networking** | WebRTC (en-US) and/or WebSockets (en-US) |
| **Storage** | IndexedDB or the "cloud" |
| **Web** | HTML, CSS, SVG, Social API (and much more!) |

Full Screen API (en-US)

全屏游戏。

Gamepad API (en-US)

使用游戏手柄或其他游戏控制器。

HTML and CSS

构建，样式和布局游戏的用户界面。

HTML audio

轻松播放简单的音效和音乐。

IndexedDB

将用户数据存储在他们自己的计算机或设备上。

JavaScript

快速的网页编程语言为你的游戏编写代码。轻松移植你现有的游戏 Emscripten 或 Asm.js。

Pointer Lock API (en-US)

在游戏界面中锁定鼠标或其他指针设备。

SVG (Scalable Vector Graphics)

构建能够顺利扩展的矢量图形，无论用户显示器的大小或分辨率如何。

Typed Arrays

从 JavaScript 中访问原始二进制数据; 操纵 GL 纹理，游戏数据或其他任何东西。

Web Audio API (en-US)

实时控制音频的播放，合成和操纵。

WebGL

创建高性能，硬件加速的 3D（和 2D）图形。OpenGL ES 2.0.

WebRTC (en-US)

实时通讯控制音频和视频数据，包括电话会议，并在两个用户之间来回传送其他应用数据，如聊天。

WebSockets (en-US)

将你的应用程序或站点连接到一个服务器以实时传输数据。适合多人游戏动作，聊天服务等。

Web Workers

生成后台线程为多核处理器运行自己的 JavaScript 代码。

XMLHttpRequest and File API

从一个 Web 服务器发送和接收任何你想要的数据，如下载新的游戏级别和艺术品，以便来回传送非实时游戏状态信息。
教程
==

本页面包含多个教程系列，重点介绍高效创建不同类型的 Web 游戏的不同工作流程。

使用纯 JavaScript 实现 2D 打砖块游戏

在该手把手教程中，你将使用纯 JavaScript 来实现一个简单的打砖块游戏。在这个过程中，你将学习使用 `<canvas>` 元素来实现基本的游戏机制，如渲染和移动图像、碰撞检测、控制机制以及获胜和失败状态。

使用 Phaser 实现 2D 打砖块游戏

在该手把手教程中，你将实现与之前的教程系列中相同的打砖块游戏，只不过这次你将使用 Phaser HTML 游戏框架来实现。这里的想法是教授一些使用框架的基础知识（及优势），以及基本的游戏机制。

使用设备方向的 2D 迷宫游戏 (en-US)

该教程展示如何使用 HTML，结合碰撞检测及在 `<canvas>` 中放置精灵的基础知识来创建一个 2D 迷宫游戏。这是一个移动端游戏，它使用设备方向 (en-US)和振动 **API** 来增强游戏体验，并使用 Phaser 框架构建。

使用 Phaser 构建 2D 平台游戏

本教程系列展示了如何使用 Phaser 创建一个简单的平台游戏，涵盖了精灵、碰撞、物理、收集物品等基础知识。