简介
如今，您可以对网站采取的最重要的措施就是确保网站在用户通过手机或平板电脑访问时能够获得良好的效果。请继续阅读，了解如何使用 Chrome 开发者工具和 Android 设备针对移动浏览器优化您的网站。
为什么说针对移动网络进行优化如此重要？
性能
随着我们从 2G 和 3G 转换到 4G，移动设备会获得更快的 CPU、更多的 RAM、更快的 GPU 和更快的网络访问速度。尽管取得了一些进展，但与我们的计算机相比，移动设备仍欠缺性能。更具体地说，加载网络资源需要更长的时间，解压缩图片需要更长的时间，绘制页面需要更长的时间，执行脚本则需要更长的时间。不妨大胆假设网页在移动设备上的运行速度会减慢 5 到 10 倍。
电池
移动设备完全由电池供电。移动设备用户希望尽可能延长电池续航时间。不太理想的网站耗电速度会比所需的时间要快得多。最大限度地减少网络流量并减少绘制次数，以减少耗电量。当您提取资源时，Wi-Fi 或手机无线装置必须处于开启状态，这会消耗电池电量。当浏览器绘制元素时，CPU 和 GPU 使用率会达到峰值，这也会消耗电池电量。
互动
效果就是为了增加对您最重要的指标。在 Facebook 中，我们注重滚动操作。在 A/B 测试中，我们将滚动速度从 60fps 降低到 30fps。互动已收起。我们说过，因此滚动非常重要。
Facebook 在 Edge Conference 上
移动用户希望他们能够快速进入和离开。速度最快的网站带来的互动度最高。
管理性能
Chrome 附带了一套功能强大的开发者工具。 本文将向您介绍如何使用这些工具分析您的移动网站的性能。如果您已熟悉 Chrome 开发者工具，那就太棒了！如果没有，请查看以下实用教程：
现在，您已了解全部内容，让我们来看看如何使用开发者工具加速您的移动网站开发工作。如果您是第一次使用 Android 版 Chrome 开发者工具，请查看本文底部的入门指南。
远程使用 Chrome 开发者工具
将 Android 设备与计算机共享网络。在桌面版 Chrome 中，导航到 http://localhost:9222，然后在 Android 设备上打开您的网站。系统会将您转到您在 Android 设备上打开的标签页的列表。 从“可检查的网页”列表中选择您的网页。
系统会将您转到 Chrome 开发者工具页面。
没错，熟悉的 Chrome 开发者工具工具栏就在那里。 关于远程 Chrome 开发者工具，最重要的一点是，它们与您当前在桌面设备上使用的开发者工具相同。 唯一的区别是，您的 Android 设备仅对页面负责，而桌面设备对开发者工具负责。在后台，系统会收集相同的数据，并提供相同的功能。
例如，我在手机上访问了 www.sfgate.com/movies。在桌面设备上使用 Chrome 开发者工具，我在元素工具中将鼠标悬停在某个 div 上，就像在桌面设备上一样，div 在 Android 设备上会突出显示。
元素工具还可用于开启和关闭样式，这在我们尝试调查绘制时间时派上用场。
分析网络访问
网络性能至关重要，在移动网络上更是如此。 与台式机和笔记本电脑相比，移动设备的连接速度通常较慢。为了确保您的操作正确，请转到网络工具并按“录制”，截取网络快照。
该屏幕截图显示了 Google 搜索带来的网络流量。 观察您的网站发出的网络请求，并设法尽可能减少请求。 如果您的网站向服务器发出轮询请求，您可能需要注意用户活动，避免在用户空闲时进行轮询。您可以使用网络工具查看原始 HTTP 标头，这在移动网络完全修改了标头的情况下很有用。
优化绘制时间
移动网络浏览器的最大瓶颈之一是绘制网页。 绘制是指使用指定样式在网页上绘制元素的过程。如果某个元素的绘制开销高昂，则会减慢整个网页的绘制速度。Chrome 会尝试将之前绘制的元素缓存在屏幕外缓冲区中。但是，在移动设备上，可用的 GPU RAM 容量有限，从而限制了可缓存到屏幕之外的元素数量。其副作用是绘制次数增多，每次绘制速度比桌面速度慢。 为了实现自适应滚动，您必须最大限度地缩短绘制时间。
Chrome 25 包含连续页面重绘模式。连续页面重绘模式从不缓存已绘制的元素，而是在每个帧中绘制所有元素。通过强制为每一帧绘制所有元素，可以通过开启和关闭元素以及开启和关闭样式来执行绘制时间的 A/B 测试。虽然该过程需要手动完成，但它对于跟踪页面上每个元素绘制的成本非常有用。优化俱乐部的第一条规则是衡量您尝试优化的内容以获得基准。我们通过一个简单的示例来进行说明。
首先，启用连续页面重绘模式：
启用后，Android 设备的右上角会显示一个图表。图表的 x 轴表示时间，可分成多个帧。图表的 Y 轴测量绘制时间（以毫秒为单位）。您可以看到，在我的设备上 网页的绘制时间是 14 毫秒系统还会显示最短和最长绘制时间以及所用的 GPU 内存。
作为实验，我将所选元素的样式设为 display: none。我们来看一下页面现在的绘制开销有多高。
绘制时间从每帧约 14 毫秒减少到每帧 4 毫秒。换句话说，绘制一个元素大约需要 10 毫秒。通过遵循开启和关闭元素以及开启和关闭样式的流程，您可以快速缩小网页上开销部分。请注意，绘制时间越短意味着卡顿现象就越长，电池续航能力更强，用户互动度也就越高。当您准备好深入了解后，请务必阅读这篇介绍连续页面重绘模式的精彩文章。
高级功能
about:跟踪
桌面版 Chrome 中提供的许多更高级的开发者功能在 Android Chrome 中也可用。例如，可以使用 about:gpu-internals、about:appcache-internals 和 about:net-internals。 在调查特别棘手的问题时，您有时需要更多数据来缩小问题原因的范围。在桌面设备上，您可能正在使用 about:tracing。如果您还不熟悉 about:tracing，请观看我的视频，了解如何使用和探索 about:tracing 性能剖析工具。您可以从 Android Chrome 中捕获相同的数据，如需开始使用，请按以下步骤操作：
- 下载 adb_trace.py
- 从命令行运行 adb_trace.py
- 在 Android 设备上使用 Chrome
- 在命令行上按 Enter 键，关闭 adb_trace.py 脚本。
adb_trace.py 完成后，您会得到一个 JSON 文件，该文件可在桌面版 Chrome 的 about:tracing 中加载。
入门指南
我们已经了解了远程 Chrome 开发者工具的功能，下面我们将介绍如何在远程调试会话中开始使用。如果您之前未使用过这些工具，请阅读详细的使用入门说明。如果您已经使用过它们，但忘记了如何使用它们，我也在此处列出了简明说明。
1. 安装 Android SDK
您可能想知道，在开发 Web 应用时，为什么必须安装 Android SDK。SDK 中包含 adb（Android 调试桥）。桌面版 Chrome 需要能够与您的 Android 设备通信。 Chrome 不会直接与 Android 设备通信，而是通过 adb 进行通信。
2. 在您的设备上启用 USB 调试
您可以在 Android 设置中找到用于启用 USB 调试的选项。启用它。
3. 连接到设备
通过 USB 将 Android 设备连接到桌面（如果尚未连接）。 如果这是您第一次使用 USB 调试，您会看到以下提示：
如果您经常进行远程调试会话，建议您选中“始终允许使用这台计算机进行调试”。
4. 验证您的设备是否已正确连接
在命令提示符中运行 adb devices。您应该会看到您的设备被列出。
5. 在 Chrome 中启用 USB 调试
依次打开设置 > 高级 > 开发者工具，然后选中启用 USB 网页调试选项，如下所示：
6. 与 Android 设备建立开发者工具连接
运行以下命令：
adb forward tcp:9222 localabstract:chrome_devtools_remote
通过 adb 创建桌面设备与 Android 设备之间的连接桥。如果您在操作之前遇到任何问题，请在此处阅读详细的设置说明。
7. 正在验证可以出发
在桌面设备上打开 Chrome 并转到 http://localhost:9222，以验证您的设备是否已正确连接。如果您收到 404、其他错误，或未看到以下内容：
请点击此处，阅读详细的设置说明。
总结
移动用户通常很着急，需要快速从您的网页中获取那段重要信息。作为移动网站开发工具，您的职责是确保网页在移动设备上快速加载并取得良好效果。否则用户互动度将会下降。远程 Chrome 开发者工具的功能与桌面设备上的开发者工具等效。界面非常相似，您无需学习一套新工具即可。换言之，系统会沿用您的工作流程。请注意，Facebook 并非无懈可击的效果问题，您的网站也是如此。性能出色的网站可提高用户互动度。