开发日志2021/5/30-首页轮播图性能

1 首页性能

1.1 问题

突然发现刚刚开发完成的首页性能损耗较大，通过火狐浏览器调试发现、平均fps降到了35左右。页面已经出现明显卡顿

1.2 查找原因

• 切换其他页面后，fps恢复到60左右，这说明不是全局变量或者函数的影响
• 因此问题范围定在了首页
• 通过火狐性能调试器查看：页面有大量的样式计算和重绘
• 因为之前首页做了轮播图，所以立马就考虑到是不是轮播的问题
• 首页轮播图是通过改变optiacty值来做淡入淡出效果的，所以打印了日志，发现轮播一次react组件的更新竟高达200多次。
• 那么这样一来问题就确定了，轮播图转换的那1s钟时间内，页面就要重新计算和绘制样式200多次，不卡顿才怪

1.3 解决方案

• 将淡入淡出的效果交给css来做。
• 设置两个class样式，并利用css原生的动画 animation 来控制 optiacty 来达到淡入淡出的效果
• 比如设置第一个 class 样式并且名为 show，控制 optiacty 从 0 到 1
• 比如设置第二个 class 样式并且名为 hidden，控制 optiacty 从 1 到 0
• 每当我们要轮播时，保持现在展示的组件不变，并把即将展示的组件按html标签顺序规则，将它置于当前展示组件的底部。而此时我们应该还看不到即将展示的组件
• 之后将 show 的样式给到隐藏在底部的即将展示的组件，将 hidden 的样式给到目前展示的组件
• 这样一来目前展示的组件就会开始 hidden 动画慢慢变淡，而即将展示的组件开始 show 动画逐渐显现
• 当动画完成时(这里可以设定时器等待动画完成)，立马将当前展示组件更新为即将展示组件的数据，并且恢复目前展示组件的样式为正常显示样式，底部就不用管它了，反正被遮住了。
• 下一次轮播就重复上述过程
• 这样也就达到了淡入淡出的效果，也尽可能不去影响太多性能