简介
如今，您能为网站做的最重要的事情就是确保其在通过手机或平板电脑访问时表现良好。请继续阅读，了解如何使用 Chrome 开发者工具和 Android 设备针对移动浏览器优化您的网站。
为什么针对移动网络进行优化如此重要？
性能
随着我们从 2G 和 3G 过渡到 4G，移动设备正在获得更快的 CPU、更多的 RAM、更快的 GPU 和更快的网络访问速度。尽管技术不断进步，但与计算机相比，移动设备的性能仍然不足。更具体地说，加载网络资源、解压图片、绘制网页和执行脚本都需要更长时间。可以合理地假设，您的网页在移动设备上的运行速度会慢 5 到 10 倍。
电池
移动设备完全由电池供电。移动设备用户希望电池续航时间尽可能长。不理想的网站会比所需更快地耗尽电池电量。最大限度地减少网络流量并减少绘制，以降低电池耗电量。提取资源时，Wi-Fi 或手机无线装置必须处于开启状态，这会消耗电池电量。当浏览器绘制元素时，CPU 和 GPU 使用率会激增，这也会消耗电池电量。
互动
效果最大化广告系列旨在提升对您最重要的指标。在 Facebook，我们非常关注滚动。在一项 A/B 测试中，我们将滚动速度从 60fps 降到了 30fps。互动已收起。我们认为，滚动很重要。
Facebook at Edge Conference
移动用户希望能够快速进入和退出。网站速度越快，互动度就越高。
管理性能
Chrome 附带了一套出色的开发者工具。 本文将介绍如何使用这些工具来分析移动网站。如果您已经熟悉 Chrome 开发者工具，那就太棒了！如果没有，请查看以下精彩教程：
现在，您已经了解了相关背景，接下来我们看看如何使用开发者工具提升移动网站的速度。如果您是首次使用 Chrome 开发者工具 for Android，请参阅本文底部的入门指南。
远程使用 Chrome 开发者工具
将 Android 设备连接到计算机。在桌面版 Chrome 中，导航到 http://localhost:9222，然后在 Android 设备上打开您的网站。 系统会带您前往 Android 设备上已打开的标签页列表。 从“可检查的网页”列表中选择您的网页。
系统会将您转到该网页的 Chrome 开发者工具。
Aww… that familiar Chrome DevTools toolbar is right there. 关于远程 Chrome 开发者工具，最重要的一点是，它们与您目前在桌面设备上使用的开发者工具完全相同。 唯一的区别是，Android 设备仅负责网页，而桌面设备负责开发者工具。在后台，系统会收集相同的数据，并提供相同的功能。
例如，我在手机上访问了 www.sfgate.com/movies。在桌面设备上使用 Chrome 开发者工具时，我将鼠标悬停在元素工具中的 div 上，就像在桌面设备上一样，div 在我的 Android 设备上直观地突出显示。
Elements 工具还可用于切换样式，这在我们尝试调查绘制时间时会派上用场。
揭秘网络访问
网络性能非常重要，在移动网络上更是如此。 移动设备的连接速度通常比桌面设备和笔记本电脑慢。为确保您执行的操作正确无误，请前往网络工具并按“录制”来拍摄网络快照。
此屏幕截图显示了 Google 搜索产生的网络流量。 观察网站发出的网络请求，并设法尽可能减少这些请求。 如果您的网站向服务器发出轮询请求，您可能需要注意用户活动，并避免在用户处于空闲状态时进行轮询。 Network 工具可让您查看原始 HTTP 标头，这在移动网络更改标头时非常有用。
优化绘制时间
移动网络浏览器中最大的瓶颈之一是绘制网页。 绘制是指使用指定样式在网页上绘制元素的过程。如果一个元素的绘制成本很高，就会拖慢整个网页的绘制速度。Chrome 会尝试将之前绘制的元素缓存在屏幕外缓冲区中。但在移动设备上，可用的 GPU RAM 数量有限，这限制了可在屏幕外缓存的元素数量。副作用是绘制次数更多，并且每次绘制都比桌面设备慢。为了实现响应式滚动，您必须尽可能缩短绘制时间。
Chrome 25 包含连续页面重绘模式。连续页面重绘模式从不缓存已绘制的元素，而是在每一帧中绘制所有元素。通过强制在每一帧中绘制所有元素，可以通过切换元素和样式的开关来对绘制时间进行 A/B 测试。虽然该过程是手动的，但对于跟踪页面上每个元素的绘制成本来说，它是一个非常有价值的工具。优化俱乐部的第一条规则是衡量您要优化的内容以获得基准。我们来看一个简单的示例。
首先，启用连续页面重绘模式：
启用后，Android 设备的右上角会显示一个图表。图表的 X 轴是时间，以帧为单位。图表的 y 轴表示绘制时间（以毫秒为单位）。您可以看到，在我的设备上，该网页需要 14 毫秒才能绘制完成。此外，系统还会显示最短和最长绘制时间以及所用的 GPU 内存。
作为实验，我将所选元素的样式设置为 display: none。我们来看看现在绘制网页的开销有多大。
绘制时间从每帧约 14 毫秒缩短到每帧 4 毫秒。换句话说，绘制该元素大约需要 10 毫秒。通过切换元素和样式的开关，您可以快速缩小范围，找出网页中开销较大的部分。请记住，绘制时间越短，意味着卡顿越少、电池续航时间越长，用户参与度越高。如果您想深入了解，请务必阅读这篇关于连续页面重绘模式的精彩文章。
高级功能
about:tracing
桌面版 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 设备的 DevTools 连接
运行以下命令：
adb forward tcp:9222 localabstract:chrome_devtools_remote
通过 adb 在桌面设备和 Android 设备之间建立桥梁。 如果您在执行到此步骤时遇到任何问题，请参阅此处的详细设置说明。
7. 正在验证您是否可以继续
在桌面设备上打开 Chrome 并前往 http://localhost:9222，验证您的设备是否已正确连接。如果您收到 404 或其他错误，或者没有看到类似以下内容：
请点击此处阅读详细设置说明。
总结
移动用户通常时间紧迫，需要快速从您的网页中获取重要信息。作为移动网站开发者，您有责任确保网页在移动设备上快速加载并顺畅运行。否则，用户互动度将会下降。远程 Chrome 开发者工具在功能上等同于其桌面版。界面非常相似，因此您无需学习一套新工具。换句话说，您的工作流程会延续。请记住，Facebook 并非不会出现性能问题，您的网站也是如此。性能出色的网站能吸引更多用户互动度。