在前端性能优化的过程中，我们除了各自框架、算法的优化外，最常用的还是借助chrome的performance对项目进行性能分析，以此更好的定位、优化性能问题。
关于performance
作为前端开发者来说，我们最常用的就是chrome浏览器。performance是chrome浏览器提供给开发者的devtools中的一项。
我们打开juejin.cn使用performance记录下其中一页的渲染情况。
根据性能图，我们可以看到具体什么时刻，执行了什么方法，加载了什么图片，耗时是多少。
设置面板
FPS
代表页面渲染时的帧数，如果页面越流畅，上面一栏应该是绿色的，如果存在红色条且红色条很连续很长，就要注意了，这时候页面加载十分卡顿，严重影响用户体验。
CPU
这里的图形，根据下面summary的数据进行绘制，如果这行颜色叠层很多并且很长，说明CPU被一直占用，需要查看代码，检查下是否有哪个递归在超栈的边缘来回试探。
Network
代表网络请求需要的速度，条越长说明请求时间越久，超过一定时间（例如：500ms），跟后端大哥确认这个接口的时间是否正常，跟产品确认是否需要loading动画。
火焰图中
包括：
- Network 网络
- Frames 帧
- Timings
- FP（first paint）：指的是首个像素开始绘制到屏幕上的时机，例如一个页面的背景色
- FCP（first contentful paint）：指的是开始绘制内容的时机，如文字或图片
- LCP（Largest Contentful Paint）：视口内可见的最大内容元素的渲染时间
- FMP（First Meaningful Paint）：首次有意义的绘制
- DCL（DOMContentLoaded）：表示 HTML 已经完全被加载和解析
- L（Onload）:页面所有资源加载完成事件
- Main 主线程的执行过程，记录了渲染进程中主线程的执行记录，点击可以看到某个任务执行的具体情况
- Raster 光栅，GPU执行光栅化的任务
- GPU，GPU进程主线程的执行过程，可以查看具体什么时候启动GPU加速
统计面板
Summary
每个任务task都可以查看到在每个指标下的耗时统计。
每个指标分别表示：
-
Idle(空闲): Idle Time指程序空闲时间
-
System(系统): 浏览器内部处理时间
-
loading(正在加载)
事件 描述 Parse HTML 浏览器执行 HTML 解析 Finish Loading 网络请求完毕事件 Receive Data 请求的响应数据到达事件，如果响应数据很大（拆包），可能会多次触发该事件 Receive Response 响应头报文到达时触发 Send Request 发送网络请求时触发 -
Painting(绘制): 页面绘制时间
事件 描述 Composite Layers Chrome 的渲染引擎完成图片层合并时触发 Image Decode 一个图片资源完成解码后触发 Image Resize 一个图片被修改尺寸后触发 Paint 合并后的层被绘制到对应显示区域后触发 -
Rendering(渲染): 样式渲染计算时间
事件 描述 Invalidate layout 当 DOM 更改导致页面布局失效时触发 Layout 页面布局计算执行时触发 Recalculate style Chrome 重新计算元素样式时触发 Scroll 内嵌的视窗滚动时触发 -
Scripting(正在执行的脚本): JS的执行&处理各种事件的时间
事件 描述 Cancel Animation Frame 取消一个动画帧时触发 GC Event 垃圾回收时触发 DOMContentLoaded 当页面中的 DOM 内容加载并解析完毕时触发 Evaluate Script A script was evaluated Eventjs 事件 Function Call 只有当浏览器进入到 js 引擎中时触发 Install Timer 创建计时器（调用 setTimeout()和 setInterval()）时触发 Request Animation FramerequestAnimationFrame（） 调用预定一个新帧 Remove Timer 当清除一个计时器时触发 Time 调用console.time()触发 Time End 调用 console.timeEnd()触发 Timer Fired 定时器激活回调后触发 XHR Ready State Change 当一个异步请求为就绪状态后触发 XHR Load 当一个异步请求完成加载后触发
一般情况下，我们可以通过调整当前javascript方法查看Scripting的耗时，以此判定哪种写法性能更佳。
Bottom-Up(自上而下)
通过这个图表，我们可以看到在当前任务中，每个活动的耗时。
- Self Time（自身耗时）：指除去子事件这个事件本身消耗的时间
- Total Ttime（总时间）：这个事件从开始到结束消耗的时间（包含子事件）
- Activity（活动）：当前事件名称
Call-Tree(调用树)
通过这个图表，我们可以看到当前任务中，每个活动内的调用顺序。
Event-Log(事件日志)
通过这个图表，我们可以看到当前任务下所有活动发生的先后顺序以及耗时情况。
