性能调试 -- Chrome Performance

序

在前端开发过程中，性能优化基本是一个必要的学习点，本文主要来讲讲使用

chrome

的

performance

来进行性能调优。

使用

打开chrome浏览器，使用

F12

弹出开发者工具，找到

Performance

这里我先创建一个网页例子，两个元素块，点击可以改变宽高：

然后点击右侧开始录制按钮，或者

ctrl + e

运行录制，录制结束后，可以在性能界面中查看里面交互阶段的性能报告内容

• 在最上层是界面渲染的概览部分，可以通过图片帧查看之前每一步的过程，时间精确到了毫秒。

• 性能面板：（这里由好几个部分的数据组成）

• Network 网络，这里我的例子中是没有的

• Frames帧

• Main 主要，主线程活动，是Performance工具中比较重要的部分，记录了渲染进程中主线程的执行记录，点击可以看到某个任务执行的具体情况

• Raster 光栅，用来让GPU执行光栅化的任务

• GPU，GPU进程主线程的执行过程记录，可以直观看到何时启动GPU加速

• 内存面板，可以看到过程中JS等内容所占用的内存曲线

• Summary 摘要，用来统计在检测性能的时间范围内，都做了什么事情

参考文章：

Chrome的Performance面板

重排位置

在上面点击方块后，会发生重排和重绘，这里发生的具体流程也可以查看到。

这里后面的两个绿色小块代表了

绘制

和

复合图层

关于重排可参考

《HTML 回流与重绘》 

以上就是对于界面DOM元素改变的性能监听，接下来可以看看如果是JS脚本，会出现怎样的task过程

下面的JavaScript代码，因为有

settimeout

，结果应该是

fn1 fn3 fn2

let f1 = ()=>{
 console.log('fn1');
}
let f2 = ()=> {
 setTimeout(() => {
 console.log('fn2');
 });
}
let f3 = ()=>{
 console.log('fn3');
}

let fun = ()=>{
 f1();
 f2();
 f3();
}

性能分析：

这里因为f2中有settimeout，所以task任务分成了两块，第一块中包含了f1、f2、f3。第二块中是f2的settimeout匿名函数执行。

此外，在摘要的区域中存在一个Call Tree调用树，能够对你的方法进行很好的分析判断