最近发现在调试应用的过程中，往往会发现对React某一组件的修改，往往会触发其他组件进行重新render,
有时这两个组件基本毫无关联。尤其是针对列表组件，往往会导致很多不必要的刷新。所以这次配合使用Chrome Performance对这点进行优化。本篇文章主要介绍开发工具的使用方式及各个结果的实际意义。
主要步骤
- 使用Chrome匿名模式，以保证环境的纯净性，不受当前安装插件的影响。
- 勾选Screenshots选项，我们会看到各个时间渲染状态的截图
- 可以使用CPU Network来模拟CPU和网络状态，以模拟弱网或者较差硬件下的性能。
- 点击Record进行录制,录制过程中需等待一段时间，过程中可以进行你想要测试的相关操作
显示结果介绍
录制结束后，会在右侧生成一份分析报告，大体样式如下所示，直接看上去可能花花绿绿会有点蒙，我们来逐个解释各个部分及标识的意思及作用
三大时间
你可以在上面的图上看到三条竖线：
- 蓝线代表DOMContentLoaded事件
- 绿线代表首次绘制时间
- 红线代表load事件
FPS
FPS是用来分析动画的主要性能指标，如果能保持60FPS的话，则证明不错。主要包括以下几点
- 上面的绿色区域标识各个时段的FPS状态，一般来说，绿色长条越高，说明FPS越高
- 如果你在绿条上面发现一个红色的长条，说明该帧存在严重问题，可能会造成卡顿
- 你可以在下面查看各个区间的实际帧的值是多少
CPU
绿色调下面的黄色和其他颜色混合的区域代表CPU图标，表明在各段时间内，CPU在各种处理上所花费的时间。
下面的Summary会显示选中事件内各种处理的总时间, 包括:
- 蓝色，代表HTML文件
- 黄色，代表脚本
- 紫色，代表样式
- 绿色，代表媒体文件
- 其他，代表资源
正常来说，React这种框架通过虚拟DOM,diff算法等，将更改合并，减少了不必要的DOM更新操作，从而减少了实际的Render时间
在下面CPU详情中，你可以查看各个组件/方法的实际CPU耗时，查看到底是哪里占用的耗时最多，可以针对其进行定位及优化。同时你可以看到他是在进行mount还是update操作。
若事件长条的右上角出现了红色的小三角，则说明这个事件需要特别注意，有可能存在问题。
双击长条，可以在Summary显示详细信息，点击对应的链接，可以跳转到对应代码处
同样，对应的小紫条出现了红色小三角，则说明有可能存在很多reflow警告
主要优化点
在分析过程中，对应的几个参数往往说明了我们页面运行时优化需要关注的几个点。
Javacript计算
避免触发大量视觉变化的计算降低应用性能，找出耗时较长的Evaluate Script事件，启用JS分析器进行定位。下图介绍了几点常用的问题和解决方案：(from)
样式
避免大量的样式重计算。这个比较基础，可以参考缩小样式计算的范围并降低其复杂性
布局
- 避免过早布局，导致重复渲染，可以先批处理样式读取，最后进行写入
- 避免循环，强制浏览器仿佛进行重新计算布局。
总结
我们介绍了Chrome Performance的使用方法，以及几点常见的问题和解决策略
- 不要编写会强制浏览器重新计算布局的 JavaScript。将读取和写入功能分开，并首先执行读取。
- 不要使您的 CSS 过于复杂。减少使用 CSS 并保持 CSS 选择器简洁。
- 尽可能地避免布局。选择根本不会触发布局的 CSS。
- 绘制比任何其他渲染活动花费的时间都要多。请留意绘制瓶颈。