6

Chrome Performance 页面性能调试

 2 years ago
source link: https://www.geekjc.com/post/5e8c2b277218567f439db6d0
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Chrome Performance 页面性能调试

时间: 04/07/2020作者: ll浏览量: 1367

1. 了解performance

performance 的前世就是之前的 timeline

在 Chrome 中，我们打开 Chrome 调试面板，进入 performance 界面。如下所示，按照步骤来 2020040701.png

解释下： 第二步：screenshots 是对你的屏幕进行截图，后面会生成相关的比较直观的截图 第四步：模拟 CPU 速度，更加方便你重现问题，如果 4x slowdown 不行，你可以选择 6x slowdown

我们可以看到左上侧的位置有几个重要按钮，其作用如下： 2020040702.png

我们点击重新录制，就会出现： 2020040703.png

完成之后就会出现以下的界面，这里都是我们应该重点关注的内容

先来看看有哪些部分： 2020040704.png

  • 第一部分： controls，上面已介绍

  • 第二部分：重要参数，这一部分我们称之为 Overview 窗格，我们可以看到 FPS，CPU，NET在页面加载时候的变化。

    1. FPS：每秒帧数，绿色竖线越高， FPS 越高，我们应该关注红色部分，这说明我们的页面很可能出现卡顿现象，另外 60 是一个比较理想的值
    2. CPU: CPU 资源
    3. NET: 每条彩色横杆代表一种资源，横杆越长，检索资源所需要的事件越长

  • 第三部分：火焰图

    1. 横轴表示加载的时间
    2. 纵轴表示事件（线程）的执行顺序，先是上面的执行再到下面的，我们要特别注意红色的三角行部分

  • 第四部分：Summary 部分，可以看到 CPU 中中的资源分配，比如下图中的 Rendering（渲染）占比就很大

使用小提示：第二、三、四部分都是联动的，比如你选择火焰图中的某个部分，下面的 Summary 就会显示这个部分的总结 2020040705.png 蓝色(Loading)：网络通信和HTML解析 黄色(Scripting)：JavaScript执行 紫色(Rendering)：样式计算和布局，即重排 绿色(Painting)：重绘 灰色(other)：其它事件花费的时间 白色(Idle)：空闲时间(空闲等待时间总和)

2. 使用 Performance 定位性能问题

上面简单介绍了一下 Performance，在我们得到数据之后，怎么分析？

具体的步骤如下： 2020040706.png

点击一下具体的执行代码，我们就可以看到相关的问题代码了 2020040707.png

相关文章:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK