使用 Chrome DevTools 分析移动 HTML5 应用程序

Question

今天，您可以为您的网站做的最重要的事情就是确保它从手机或平板电脑访问时表现良好。 继续阅读并了解如何使用 Chrome DevTools 和一个针对移动浏览器优化您的网站安卓设备。

为什么要针对移动 Web 进行优化很重要？

表现

移动设备正在获得更快的 CPU、更多的 RAM、更快的 GPU 和更快的速度我们从 2G 和 3G 过渡到 4G 时的网络访问。 尽管鼓点与我们相比，移动设备的动力不足电脑。 更具体地说，加载网络资源需要更长的时间，解包图像需要更长的时间，绘制页面需要更长的时间，执行脚本需要更长的时间。 可以安全地假设您的页面运行 5 到 10 在移动设备上慢几倍。

电池

移动设备完全由电池供电。 移动设备用户希望电池要尽可能长的时间。 次优站点将消耗电池比需要的快得多。 最小化网络流量并减少油漆以减少电池消耗。 当您获取资源时，WiFi 或蜂窝无线电
必须打开，这会耗尽电池电量。 当浏览器绘制一个元素时，CPU 和 GPU 使用高峰，这也会耗尽电池。

订婚

“绩效是为了增加对您最重要的指标。 在Facebook 我们关心滚动。 在 A/B 测试中，我们放慢了速度从 60fps 滚动到 30fps。 订婚崩溃了。 我们说好的，因此滚动很重要。” – 边缘会议上的 Facebook 移动用户希望能够快速进出。 最快的网站将获得最多的参与度。

管理绩效

Chrome 附带了一个很棒的

一组开发人员工具。

本文教您如何使用这些工具来分析您的移动网站。 如果您已经熟悉 Chrome DevTools，那就太好了！ 如果没有，请查看这些很棒的教程：

• Profiling long paint times
• DevTools Tips and Tricks.

现在您已经赶上了，让我们看看如何使用 DevTools 加速您的移动网站。 如果这是您第一次使用适用于 Android 的 Chrome DevTools，请查看获取 文章底部的开始指南。

远程使用 Chrome DevTools

将您的 Android 设备连接到计算机。 在桌面 Chrome 中，导航到 http://localhost:9222 并在您的 Android 设备，打开您的网站。
您将被带到 Android 设备上打开的选项卡列表。
从“可检查页面”列表中选择您的页面。

您将被带到该页面的 Chrome DevTools。

哇.. 熟悉的 Chrome DevTools 工具栏就在那里。

了解远程 Chrome DevTools 的重要一点是它们是您今天在桌面上使用的相同 DevTools。
唯一的区别是您的 Android 设备只负责该页面，而您的桌面负责开发工具。 在引擎盖下，收集相同的数据并提供相同的功能。

例如，我访问了 www.sfgate.com/movies 在我的手机上。
在我的桌面上使用 Chrome DevTools 我将鼠标悬停在 div 中的 元素工具 而且，就像在桌面上一样， div 在我的视觉上突出显示安卓设备。

 

元素工具也可用于 打开和关闭样式，当我们尝试 调查油漆时间。

了解网络访问

网络性能很重要，它在移动网络上更为重要。
移动设备的连接速度通常比我们的台式机慢，并且 笔记本电脑。 为确保您做的是正确的事情，请采取 网络快照通过转到 网络工具和紧迫的记录。

屏幕截图显示了 Google 搜索产生的网络流量。
观察您的站点发出的网络请求，并找到将它们最小化的方法。
如果您的站点向服务器发出轮询请求，您可能需要付费 注意用户活动并避免在用户空闲时进行轮询。
网络工具允许您查看 原始 HTTP 标头，在移动网络完全改变它们的情况下很有用。

优化油漆时间

移动 Web 浏览器的最大瓶颈之一是绘制页面。
绘画是在页面上以指定的方式绘制元素的过程 造型。 当一个元素的绘制成本很高时，它会减慢该元素的绘制速度 整个页面。 Chrome 尝试将以前绘制的元素缓存在
一个离屏缓冲区。 但是，在移动设备上，可用的 GPU RAM 数量是有限的， 限制可以在屏幕外缓存的元素数量。 副作用
是更多的油漆和 每个油漆都比桌面慢。
为了获得响应式滚动，您必须尽量减少绘制时间。

Chrome 25 包括
连续页面重绘模式。
连续页面重绘模式从不缓存绘制的元素，相反， 绘制每一帧的所有元素。 经过 强制每帧绘制所有元素，可以执行 A/B 通过打开和关闭元素以及打开和关闭样式来测试绘制时间。
虽然该过程是手动的，但它是追踪如何 绘制页面上的每个元素都是昂贵的。 优化的第一条规则 club 是衡量您要优化的内容 获得基线。 让我们看一个简单的例子。

首先，启用连续页面重绘模。

启用后，您的右上角会出现一个图表 安卓设备。 图表的 x 轴是时间，分为帧。 这 图表的 y 轴测量绘制时间，以毫秒为单位。 你可以看到， 在我的设备上，绘制页面需要 14 毫秒。 最小值和最大值 绘制时间也与使用的 GPU 内存一起显示。

作为一个实验，我将所选元素的样式设置为 “display: none” 看看有多贵 该页面现在要绘制。

绘制时间从每帧约 14 毫秒降至 4 毫秒 每帧。 换句话说，一个元素大约需要 10 毫秒。 通过遵循打开和关闭元素的过程以及 样式打开和关闭，您可以快速缩小您的昂贵部分页。 请记住，更快的喷漆时间意味着更少的卡顿、更长的电池等等 来自您的用户的参与。 当您准备好深入挖掘时，请务必阅读 this great article on continuous page repaint mode.

高级功能

关于：追踪

桌面 Chrome 中提供的许多更高级的开发人员功能是 也可在 Android Chrome 中使用。 例如，

about:gpu-internals,
about:appcache-internals, and
about:net-internals are available.

当调查一个特别棘手的 有时您需要更多数据才能缩小问题的原因 你的问题。 在桌面上，您可能正在使用 about:tracing。 如果你不是 已经熟悉 about:tracing, watch
我关于使用和探索的视频关于：跟踪分析工具 。 它是 可以从 Android Chrome，请按照以下步骤开始：

1. 下载 adb_trace.py
2. 从命令行运行 adb_trace.py
3. 在 Android 上使用 Chrome
4. 在命令行上按 enter，关闭 adb_trace.py 脚本。

adb_trace.py 完成后，您将拥有一个可以加载的 JSON 文件 桌面 Chrome 的 about:tracing。

入门指南

现在我们已经回顾了远程 Chrome DevTools 可以做什么，让我们来看看如何 开始您的远程调试会话。 如果你还没有使用它们 前，
阅读有关如何开始的详细说明 。 如果你已经 使用它们，但忘记了如何使用它们，我列出了缩短的 这里也有说明。

1.安装安卓SDK

你可能想知道为什么你必须 安装 Android SDK 当您为 Web 开发时。 SDK 中包含 adb（Android 调试桥）。
桌面 Chrome 需要能够与您的 Android 设备通信。
Chrome 不直接与 Android 设备对话，而是路由 通过 adb 进行通信。

 

2.在您的设备上启用 USB 调试

启用 USB 调试的选项可以在 Android 设置中找到。

3.

连接设备

如果您还没有，请通过 USB 将您的 Android 设备连接到您的桌面。
如果这是您第一次使用 USB 调试，您将获得 以下提示：

如果您要经常进行远程调试会话，
我建议选中“始终允许来自这台计算机”。

4. 验证您的设备是否已正确连接

从命令提示符运行 adb devices。
您应该会看到您的设备已列出。

5. 在 Chrome 中启用 USB 调试

打开设置 > 高级 > DevTools 和 检查启用 USB Web 调试选项，如下所示：

6.创建到您的 Android 设备的 DevTools 连接

运行以下命令：

adb forward tcp:9222 localabstract:chrome_devtools_remote

通过 adb 在您的台式机和您的 Android 设备之间建立一座桥梁。
如果您遇到任何问题，请阅读详细设置 说明 这里 。

7. 确认您一切顺利

通过在您的设备上打开 Chrome 来验证您的设备是否已正确连接 桌面和导航到 http://localhost:9222” 。 如果你得到一个
404，另一个错误，或者看不到类似以下内容：

阅读详细的设置说明：here.

结论

移动用户通常很匆忙，需要从您的页面快速获取重要信息。 作为移动网站建设者，您有责任确保页面快速加载并在移动设备上运行良好。 否则，用户参与度将会下降。 远程 Chrome DevTools 在功能上等同于它们的桌面对应物。 UI 非常相似，您无需学习一套新工具。 换句话说，您的工作流程会延续。 记住， Facebook 对性能问题并非无敌，您的网站也不是。 高性能网站获得更多用户参与。