记录一次利用Timeline Performance工具进行 React性能优化的真实案例

性能优化可以说是衡量一个前端程序员react使用水平的重要标准。

在学习react之初的时候，由于对react不够了解，写的项目虽然功能都实现了，但是性能优化方面的考虑却做得很少，因此回过头来发现自己以前写的react代码确实有点糟糕。

为了提高自己的react水平，闲暇之余就把以前的老项目拿出来分析优化，看看都有哪些问题。这里就以我以前做过的一个《投资日历》为例做一次优化记录。

项目线上地址：https://www.itiger.com/activi...

优化工具timeline/performance基础使用教程：
https://developers.google.com...

chrome在版本57还是58的时候，将Timeline更名为performance

该项目主要的难点与性能瓶颈在于日历的左右滑动与切换。由于需求定制程度非常高，没有合适的第三方日历插件，所以就自己实现了一个。支持周日历与月日历的切换，支持左右滑动切换日期。

滑动效果仅支持移动端

问题出现在公司一款老的android测试机，发现动画效果非常卡顿。因此有了优化的必要。

利用工具定位问题

首先利用performance工具的的录制功能录制一段操作过程。
点击左上角的黑色原点开始录制。录制过程中，多次滑动周日历即可。然后大约5~10秒点击stop按钮停止录制。

录制结果如图。