开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

作用/应用场景

在进行前端开发时，尤其是在页面元素多，动画多等情况会出现页面卡顿或者动画不流畅的现象，借助Performance面板可以帮助我们发现问题。

实践

此处我们借助google提供的项目进行介绍 Performance调试项目 打开该项目，F12选择Performance我们会看到如下面板

一些重点功能已经用红框画出

步骤

1. 点击“Add 10”直到页面上的动画明显卡顿（选择右侧的设置按钮，CPU选项卡选择4X Slow Down可加速这一现象），然后点击调试面板的录制按钮（黑色的实心圆点），过几秒后点击stop,如图

2. 当浏览器分析完之后会出现如下面板

其中 1 表示帧数，2表示CPU的使用情况，3表示帧页面上的样子，4为CPU各颜色表意义以及使用概况。 1 出现红色代表页面上的帧数率太低，会影响用户体验，一般情况下，此处颜色越绿则代表帧数越好。

分析

1. 从上图可看出此时页面上帧数率很低（查看具体ctrl + shift + p 输入rendering 然后选择frame rendering stats），且cpu占用很大
2. 从上图3的位置可以选择某一时间段页面的运行情况，我们缩小时间段，查看某一时间段页面主函数的运行情况，如下图

可以看到主函数上运行着很多任务，并且有些任务的右上角有红色的三角形，一般有该三角形的任务代表该任务执行耗时过长，点击某个三角任务，查看其Summary后边的Call Tree面板

可看出该任务基本在运行app.update方法，且主要耗时在布局和重新计算样式，点击右侧蓝色链接进入到具体位置

通过分析 该脚本在读取元素offsetTop之前去改变了元素的样式，这导致了浏览器要首先强制应用样式，再布局，才能返回正确的offsetTop导致资源消耗。 优化思路为在改变样式之前，提前读取，如图

以上则为Performance的基本使用场景。