Performance
Performance 工具的侧重点则在于前端渲染过程，它拥有帧率条形图、CPU 使用率面积图、资源瀑布图、主线程火焰图、事件总揽等模块，它们和渲染息息相关，善用它们可以清晰地观察整个渲染阶段。
首先我们打开 Chrome 匿名窗口，在匿名环境下，浏览器不会有额外的插件、用户特性、缓存等影响实验可重复性的因素。
打开网页，打开Performance，有两个选项，立即记录和重载页面并记录
点击掘金页面的reload收集渲染数据
关于图中内容介绍：
juejin.im #3这边是切换每一次的检测报告；Screenshots是用来查看在每个时间段界面的变化；Memory存储调用栈的大小，在不同时间段的不同大小；
Disable Javascript samples禁用javascript调用栈；Enable advanced paint instrumentation (slow)记录渲染事件的细节；Network用来修改检测在不同的网络环境下，界面的渲染；CPU用来查看电脑的性能问题；
- Network：资源加载的一个顺序情况，什么时间加载了什么资源
- Frames：查看我们在什么时间，界面发生了改变，它和第一部分的区别就是在界面没有改变的时候，它是不做记录的，但是概览部分是会做记录的
- Timings
- Main：俗称 火焰图 , 这里是一个由下而上的事件执行图
- Raster：在前端部分一共使用了几条浏览器渲染线程
- GPU：网站在什么时间有
GPU加速
- 性能检测详情
Summary（性能摘要）Loading：加载时间Scripting：js计算时间Rendering：渲染时间Painting：绘制时间Other：其他时间Idle：浏览器闲置时间
Bottom-Up（事件列表，由下至上，对应 Main 火焰图）Self Time（自己调用的时间）Total Time（总调用时间，包括子项调用时间）Activity（行为，包括调用该事件的位置）
Call Tree（每个事件的子项信息）Self Time（自己调用的时间）Total Time（总调用时间，包括子项调用时间）Activity（行为，包括调用该事件的位置）
Event log（事件日志）Self Time（自己调用的时间）Total Time（总调用时间，包括子项调用时间）Activity（行为，包括调用该事件的位置）Start Time属性，这个属性其实就是开始的时间，从什么时间开始执行的什么事件