Chrome 开发者工具 performance 标签页的用法

Analyze runtime performance

运行时性能是您的页面在运行时的表现,而不是加载。 就 RAIL 模型而言,本文介绍的方法对于分析页面的响应、动画和空闲阶段非常有用。

在隐身模式下打开谷歌浏览器。 隐身模式可确保 Chrome 以干净的状态运行。 例如,如果您安装了很多扩展,这些扩展可能会在您的性能测量中产生干扰。

在您的隐身窗口中加载以下页面。 这是您要分析的演示。 该页面显示了一堆上下移动的蓝色小方块。

https://googlechrome.github.io/devtools-samples/jank/

Simulate a mobile CPU

移动设备的 CPU 能力远低于台式机和笔记本电脑。 每当您分析页面时,请使用 CPU 节流来模拟您的页面在移动设备上的表现。

下列选项,CPU 4x slowdown, 模拟出运算速度只有当前 1/4 的 CPU:

Set up the demo

很难为所有读者创建一个始终如一的运行时性能演示。 因此 Google 准备了一个允许自定义屏幕上出现元素数量的 web 应用,以确保您的体验与您在本教程中看到的屏幕截图和描述相对一致,而不管您的计算机的硬件配置如何。

(1) 继续单击 Add 10,直到蓝色方块的移动速度明显比以前慢。 在高端机器上,可能需要大约 20 次点击。

(2) 单击优化。 蓝色方块应该移动得更快更平稳。

如果您没有看到优化和未优化版本之间的明显差异,请尝试多次单击“减去 10”并重试。 如果添加太多蓝色方块,只会使 CPU 使用率最大化,并且不会看到两个版本的结果有很大差异。

Record runtime performance

当您运行页面的优化版本时,蓝色方块移动得更快。 这是为什么? 两个版本都应该在相同的时间内将每个方格移动相同的空间。 在性能面板中进行录制,了解如何检测未优化版本中的性能瓶颈。

点击 Performance 面板的 Record 图标,开始录制:

等几秒钟后,点击 Stop:

下面介绍如何解读 Performances 面板生成的统计数据。

Analyze frames per second

衡量任何动画性能的主要指标是每秒帧数 (FPS)。当动画以 60 FPS 运行时,意味着较好的用户体验。

查看 FPS 图表。 每当您看到 FPS 上方的红色条时,就意味着帧率下降得太低,可能会损害用户体验。 一般来说,绿色条越高,FPS 越高。

如下图所示,我开启了 recording,然后重复点击 Add 10,在此过程中,能看到代表 FPS 低于 60 的红线逐渐升高,然后在 CPU 栏,代表 Rendering 的紫色图例越来越多。

将鼠标悬停在 FPS、CPU 或 NET 图表上。 DevTools 显示了当时页面的屏幕截图。 左右移动鼠标可重播录音。 这称为擦洗(scrubbing),它对于手动分析动画的进程很有用。

看这个 frames 栏:

在框架部分,将鼠标悬停在其中一个绿色方块上。 DevTools 会向您显示该特定帧的 FPS。 每帧可能远低于 60 FPS 的目标。

Bonus: Open the FPS meter

我们还可以使用 FPS meter 观测一个网页实时的 FPS 数据。

快捷键:Control+Shift+P 选择 show rendering:

在渲染选项卡中,启用 FPS Meter。即下图这个 checkbox:

视口的右上角会出现一个新的叠加层。能显示实时的 FPS 数据:

我们在 summary 标签页里看到,该 web 应用的瓶颈在 rendering:

展开 main 部分。 DevTools 会向您显示主线程上随时间变化的活动火焰图。 x 轴表示随时间的记录。 每个条形代表一个事件。

更宽的条形意味着该事件花费的时间更长。 y 轴代表调用堆栈。 当您看到事件堆叠在一起时,这意味着较高的事件导致较低的事件。

recording 中有很多数据。 通过单击、按住并将鼠标拖动到“概览”(包括 FPS、CPU 和 NET 图表的部分)上,放大单个动画帧触发事件。 主要部分和摘要选项卡仅显示所选 recording 部分的信息。

请注意 Animation Frame Fired 事件右上角的红色三角形。 每当您看到红色三角形时,即表示可能存在与此事件相关的问题的警告。

每当执行 requestAnimationFrame() 回调时,就会发生 Animation Frame Fired 事件。

单击动画帧触发事件。 “摘要”选项卡现在显示有关该事件的信息。 注意揭示链接。 单击它会导致 DevTools 突出显示启动 Animation Frame Fired 事件的事件。 另请注意 app.js:94 链接。 单击它会将您跳转到源代码中的相关行。

app.update = function (timestamp) {
    for (var i = 0; i < app.count; i++) {
      var m = movers[i];
      if (!app.optimize) {
        var pos = m.classList.contains('down') ?
            m.offsetTop + distance : m.offsetTop - distance;
        if (pos < 0) pos = 0;
        if (pos > maxHeight) pos = maxHeight;
        m.style.top = pos + 'px';
        if (m.offsetTop === 0) {
          m.classList.remove('up');
          m.classList.add('down');
        }
        if (m.offsetTop === maxHeight) {
          m.classList.remove('down');
          m.classList.add('up');
        }
      } else {
        var pos = parseInt(m.style.top.slice(0, m.style.top.indexOf('px')));
        m.classList.contains('down') ? pos += distance : pos -= distance;
        if (pos < 0) pos = 0;
        if (pos > maxHeight) pos = maxHeight;
        m.style.top = pos + 'px';
        if (pos === 0) {
          m.classList.remove('up');
          m.classList.add('down');
        }
        if (pos === maxHeight) {
          m.classList.remove('down');
          m.classList.add('up');
        }
      }
    }
    frame = window.requestAnimationFrame(app.update);
  }

使用键盘上下箭头切换事件的显示:

在 app.update 事件下,有一堆紫色事件。 如果它们更宽,看起来好像每个上面都有一个红色三角形。 现在单击紫色布局事件之一。 DevTools 在摘要选项卡中提供了有关事件的更多信息。 事实上,有一个关于强制回流的警告(布局的另一种说法)。

先选中 app.update, 然后按键盘下箭头,再左右移动,找到这些 forced reflow 的代码,同样可以点击超链接看到引起回流的准确代码行数:

比如第 71 行的 m.offsetTop 引起回流:

这段代码的问题在于,在每个动画帧中,它会更改每个方块的样式,然后查询每个方块在页面上的位置。 因为样式改变了,浏览器不知道每个方块的位置是否改变,所以它必须重新布局方块以计算它的位置。 请参阅避免强制同步布局以了解更多信息。

(0)

相关推荐

  • Chrome开发者工具使用指南

    前言 工欲善其事,必先利其器. 在前端工作中,我们常常使用到Chrome开发者工具去做各种各样的事情. 但是您真的了解这些开发者工具吗? 官方文档还是挺详细的:chrome-devtools文档. 但 ...

  • Chrome性能调优技巧

    在开发大型Web应用或复杂交互的网站,不免会遇到一些页面性能瓶颈的问题.本篇介绍一下如何利用Chrome的性能面板分析网站的性能瓶颈,应该对你有所帮助. 注意,为了减少一些Chrome插件对性能评估产 ...

  • web调试优化

    web调试优化

  • Chrome DevTools 使用详解

    [转自:https://segmentfault.com/a/1190000007877846] 基本够调试用了!有这么详细文章,真实很感谢作者! 写在前面:Chrome DevTools 系列文章正 ...

  • Chrome开发者工具详解

    面板组成 包括控制器.过滤器.概览.请求列表.概要. 控制器--控制面板的外观与功能. 过滤器--过滤请求列表中显示的资源,按住Command(Mac)或Ctrl(Window/Linux),然后点击 ...

  • Chrome开发者工具详解(2)

    Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...

  • Chrome开发者工具不彻底指南:(3、性能篇)

    卤煮在前面已经向你们介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于通常的网站项目来讲,其实就是须 ...

  • Chrome 开发者工具无法显示服务器正常返回的 HTTP 请求 - Failed to load response data

    今天做开发时遇到一个问题,Chrome 开发者工具 network 标签里,虽然一个 HTTP 请求已经成功从服务器端返回,但是 Chrome 开发者工具里,仍然显示 Failed to load r ...

  • Google Chrome浏览器在新标签页打开网页的五个设置/方法

    坐看云起 发布于 2020-03-31 在谷歌浏览器的搜索结果列表页,或者从书签栏内打开新网页的链接时,默认是覆盖当前页面,在同一个标签页内打开.那么,如何设置让Google Chrome在新的标签页 ...

  • Chrome 开发者工具 workspace 的概念

    Edit files with Workspaces 本教程提供设置和使用工作区的实践练习,以便您可以在自己的项目中使用工作区. 工作区使您能够将在 DevTools 中所做的更改保存到存储在计算机上 ...

  • Chrome 开发者工具里的 CSS grid editor

    Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置.但是,它们也存在重大区别. Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一 ...

  • 使用 Chrome 开发者工具分析内存问题

    DevTools 显示了按功能划分的内存分配细目. 默认视图是 Heavy (Bottom Up),它在顶部显示分配最多内存的函数. Fix memory problems 内存泄漏很容易定义. 如果 ...