序

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

使用

打开 chrome 浏览器，使用F12弹出开发者工具，找到Performance

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

然后点击右侧开始录制按钮，或者ctrl + e运行录制，录制结束后，可以在性能界面中查看里面交互阶段的性能报告内容

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

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

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

4. Frames 帧

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

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

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

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

9. 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 调用树，能够对你的方法进行很好的分析判断