项目经理让你对项目进行性能的评估 你一头雾水。稳住，不慌，其实chrome偷偷帮你做了这件事。
打开谷歌浏览器控制台，点击Performance tab 可以看到下图的两种操作。
重载记录和交互记录
第一个点击可以开始记录页面交互的操作再次点击结束记录。 第二个点击可以记录页面重新载入的记录。我们尝试点击第二个按钮
组成结构
1.模拟不同cpu
下拉cpu选择框 可以模拟不同的cpu处理器。默认选项是 no throttling;
2.性能分析
如果选择了Srceenshots模式还可以看到页面截图
我们从左到右看到的是页面加载和初始化的时间线。如果你选择了一小段分析 饼图也会发生相应的变化。性能窗口顶部的图表中使用的颜色对应于不同类型的活动，与饼图的颜色相对应。HTML 文件为蓝色。脚本为黄色。 样式表为紫色。媒体文件为绿色。其他资源为灰色。
FPS。代表每秒的帧数。绿色竖线越高，FPS越高。FPS图表上的红色表示长时间帧，有可能出现卡帧。
CPU。cpu资源。此面积图指示消耗cpu资源的事件类型。cpu中的各个颜色代表着在这个时间段内，cpu在各种处理上所花费的时间。
火焰图中的main图表，可以看到主线程上的事件处理。图中有三条虚线，蓝线代表 DOMContentLoaded 事件。 绿线代表首次绘制的时间。 红线代表 load 事件。当你点击事件时， Details 窗格会显示与事件相关的其他信息。
Summary（性能摘要） Bottom-Up（事件列表） Call Tree（事件子项信息） Event Log（事件日志）
