通过网页检查器了解 CPU 使用情况

大家好 我是 Jonathan Davis Web 技术的传播者 来自 Safari 和 WebKit 团队 欢迎观看“使用网页检查器 了解 CPU 使用率”

众所周知 用户很在乎电池续航 或许你们仅凭直觉就能猜到 在我们的设备上 网页浏览器是最常使用的 App 之一 但除此之外 网页内容 也出现在许多流行的 iOS App 和 macOS App 里 这意味着网页内容 会显著影响用户的电池续航 所以使它更节能 会有很大影响

Safari 浏览器和 Webkit 早就提供了这种功能 也就是尽可能地 自动为用户节能 例如 当一个网页在后台运行时 会调用节流定时器 加上内容拦截插件的支持 用户得以自行 拦截不想加载的内容 那些内容往往是垃圾信息 拖慢浏览器速度 甚至会追踪用户行为

然而 即使 Safari 浏览器 有内置的节能特性 仍然有很多事 是网页开发者能做的 这对我们大家来说都是一个好机会 来改善网页表现 为用户构建节能的网页

好消息是 你所知道的所有 优化网页表现的做法 同时也是最好的节能手段 我们听说过的所有 关于提升网页加载速度 优化 JavaScript 使用 CSS 动画属性与过渡属性 都有助于延长电池续航

无论你对所有这些 提升网页表现的 最优做法烂熟于心 还是刚刚入门 我都会向你们展示 网页检查器里的一款强大的新工具 它会赋予你超能力 便于你找出哪些表现尚有不足 并以此延长电池续航 我们叫它 CPU 使用率时间线 它是网页检查器的一项新功能 你会在 macOS 上的 Safari 13 里找到它 它有一个电量使用窗口 使你能轻易发现 那些导致 CPU 高使用率的 行为带来的影响

今天 我将向你们展示 如何使用新的 CPU 使用率时间线 发现 CPU 使用时的耗电问题 接着我会简述一些策略 使你的基于网页的项目变得更节能

在你使用这个时间线之前 你需要启用“开发”菜单 来访问网页检查器

只需打开 Safari 浏览器的偏好设置 点击 高级 点击 在菜单栏中显示“开发”菜单来启用它

接着 打开一个网页 从“开发”菜单中打开 网页检查器 或者使用快捷键 Command 加 Option 加 I 接下来我会使用新的 CPU 使用率时间线来寻找 webkit.org 上 有哪些可以改善能耗的地方 主页非常简单 但也挺有趣 还是有一些动态元素 比如背景里不显眼的 logo 动画

现在网页检查器已经打开 点击时间线标签页

左上角是不同时间线的列表 也有其他时间线可用 但是默认时间线下寻找 如何改善 CPU 使用率就够了

要想开始录制 你可以点这个红色的“录制”按钮 或者按下“空格”键 但我会点击“刷新”按钮 它会自动开始录制 并且捕获页面加载情况

当检查 CPU 使用率时 一定要记住录制至少 15 秒 以得到一次有效的测量 我会让这次录制稍长一些 来获取足够的数据

在时间线上滚动滚轮 来放大一些 我就能看到所有细节

点击 CPU 时间线 你可以看到该网页 CPU 使用率的细节 只瞟一眼 我就能判断 该网页表现不错 能耗保持得很低 加载时间短很有用 如果页面闲置 时间线显示该网页 基本上什么都没有运行 很棒 因为这意味着 即使用户把网页开一天 CPU 使用率也会掉到 一个非常低的状态 网页内容带来的功耗可忽略不计

网页内容中许多有趣的事情 都发生在主线程 主线程图表显示了 在主线程上完成的 不同种类的工作 包含 JavaScript 处理 绘制 布局 以及 布局服务内的 例如页面重绘 基于这些 我们能看到 大多数工作 都花在了绘制上 在指示器的中间 显示了主线程 完成工作所花的时间 整个录制时间大概有 20 秒 但是主线程只花了 100 毫秒 就完成了工作

在主线程图表的下方 是 CPU 使用率的详解 含括了所有 为网页内容工作的线程 要了解详细信息的话 你可以在时间线上点击 拖拽 来选择完成任务时的时间范围

在 CPU 使用率图的下方 这个窄条是主线程指示器 显示了在不同时间点 主线程上处理过的各种工作 在这片逐渐活跃的区域 这里有一些 红色的布局事件 后面 跟着大量的绘制工作 就像上面的图表 但是这里显示了发生的时间

但功耗影响计量表把这些 统统算了进来 它的数值基于 所有 CPU 核心在这段时间内的 总体平均使用率

能耗计量表 是可交互的 而且作为总平均数 会根据选择的时间范围变化 在页面加载期间 计量表显示出中等能耗 但是加载本就是一个相当耗能的过程 所以结果可以预期 至少没有达到高能耗 那原本可能会有问题 但双击时间线区域 选择整条录制 这里显示总体的 CPU 均值还是很低 我可以通过点击和拖拽 时间线来选定 录制中的某段时间 观察均值的变化

现在 当我点击并抓取所选区域 将它滑动到 网页闲置期间 能耗降到极低 这真的很棒 当网页闲置时 我们不希望用户 为没有在使用的内容耗能

闲置时 CPU 的使用率保持在较低范围 即使页面背景上 有个旋转的 logo 动画 那是因为它使用了 简单的 CSS 动画属性 能在低功耗下运行 同时让网页有良好的视觉表现

Webkit.org 到现在为止都表现得不错 当你检查功耗问题时 推荐优先检查 加载和闲置 为了顾及所有方面 我们也需要获得一些 交互时的数据

Webkit 特性状态网页 能够让你了解到 WebKit 对于你最喜欢的 网页特性的最新支持情况 你可以用它筛选和搜索 这用来捕获交互数据 再完美不过了 我会录制一段时间线 然后与网页进行一些交互 下滑到底部

接着快速搜索 到处点几下 重申 我们至少 要录 15 秒 既然我们在一个新的网页上 所以也应该包括一段闲置期 我让它继续录制 直到获得足够的闲置时间的数据

好了 这样看起来不错 我选中整段录制 滚动光标 将时间线缩小一些 这样就能看到完整的 CPU 使用率细节了

我们开始分析这些区域 从加载开始

在快速加载期间 网页成功避开了高功耗区域 这里没问题

接下来我们来看交互时的功耗 功耗影响保持在中等区域 即使有这么多进程正在处理 你可以从 JavaScript 与事件 时间线上看到 滚动和交互时 有许多脚本被触发 让 CPU 在滚动时做无用功 是我们想极力避免的 因为滚动非常耗能 让我们看看是否有必要 进行这项工作 统计与源数据 这两块区域可以告诉我们一些事 在选中的录制时间里 有超过 1200 个 JavaScript 里的条目 有 594 个请求动画的定时器被启动 还有 647 个滚动事件 我知道减少定时器的数量 和不滚动 能有更好的功耗表现 但是我们需要看看代码 来了解是否必要或者是否能够提升 在统计区域 你可以点击计时器或事件 来筛选右边的数据源 从而找到触发它的代码 点击数据源 会直接让你在 JavaScript 调试器里 看到代码

好 看起来 请求动画帧的定时器 在调用 updateImages 会在所有图片上重复应用 检查它们是否在视图中 如果在的话 就加载 这是个非常基本的 减少加载图像的特性 但是在调试器里的暗色代码 告诉我们 inView 和 loadImage 从来没有被调用

即使我们滚动到 页面底部 又回到顶部 但这很合理 因为该页面基本没有图片 所以延迟加载图片的代码 在该页面根本不该被触发 我们切回代码看看 图像和事件 处理器在这里

所以看一眼代码 它在这段时间里 一直在设置 处理滚动和调整大小的处理器 为了避免这种事情 我们只需添加一个条件防护器

好了 来试试吧

我们来录制一条 经过修改的时间线 接下来我点回到 时间线标签 开始新的录制 我会快速滚动一下

你可以看到在时间线里 没有任何 JavaScript 条目 全部都只是绘制 所以我们的防护器 有效在没有任何延迟加载的页面上 滚动的时候 阻止了额外的 JavaScript 工作

这样一来能耗就降低了 主线程的所有工作只有 对滚动的绘制 但是我们 需要确保那些 用了延迟加载图像的网页仍然正常

再一次 有了这个修改 我会在一个底部有 MotionMark 图标的网页上录制 一条新的时间线 这次应该会用到延迟加载

完美 MotionMark 图片加载成功 我会继续滚动 得到新行为的 CPU 测量 然后点击 CPU 时间线 看看怎么样 我们减少了定时器和事件 让页面刚好够用 这很棒 但是对于有延迟加载的图像的网页 仍然有很多条目在 Script 里 Safari 中有一个可用的 API 我们可以用它来 完善这种解决方案 我们可以替换掉 请求动画帧的相关实现 使用 Intersection Observer

Intersection Observer 可以告诉我们 一个元素什么时候进入视图 这样你可以把工作 限制在仅当元素可见的时候 一旦不在屏幕上显示 你可以立即让它停止工作 使 CPU 回到低功耗状态 从而实现节能

当 Intersection Observer 生效后 我们再来 录制一段时间线 做一些滚动来观察 这种方案的表现

当我开始滚动 这里只有一个单独的条目进入了 JavaScript 而其余的时间里 当我滚动的时候 只有绘制

最终 Intersection Observer 的 方案使 CPU 平均使用率 从 16.3% 降到了 9.5% 一点一滴都有所帮助 得到的提升非常可观 综上 有许多方法可以 为网页内容节能

使用 CPU 使用率时间线来 观察网页内容 在交互与闲置时的表现 来改善网页的功耗

请记得降低 CPU 使用率 就等同于为用户节能和减少 电量消耗

CSS 动画属性与过渡属性 能够在低功耗下 提供动态效果 在滚动时免除了一些工作 使用 Intersection Observer API 作为替代

用户想要的是一种有吸引力的 动态的 网页内容体验 但是最佳的体验 是那种尽可能 少占用 CPU 的做法

在 Webkit Blog 上还有更多 提供给网页开发者的 节能小技巧 你们可以在视频附带的 资源区找到链接

希望你们会在自己的网页内容上 试试这些工具 并将本视频给出的建议 作为起步 寻求如何优化 你的网页内容 和我们一起 通过使网页更节能 来使其更强大