开发日志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 动画逐渐显现
  • 当动画完成时(这里可以设定时器等待动画完成),立马将当前展示组件更新为即将展示组件的数据,并且恢复目前展示组件的样式为正常显示样式,底部就不用管它了,反正被遮住了。
  • 下一次轮播就重复上述过程
  • 这样也就达到了淡入淡出的效果,也尽可能不去影响太多性能

本文为原创文章,若文章内容出现抄袭雷同,请联系文章发布人或者网站管理员,我们将认真核实并及时删除。 除非另有说明,否则此博客中的所有文章均根据CC BY-NC-SA 4.0许可。如需转载请标明出处,谢谢配合!

END--感谢阅读

来发表你的感想吧~

  • cms部分功能上线,自行测试中~
    • 十三
      回复
      努力向前
      cms功能一上线,目前只对部分用户开放
    • 小zh
      回复
      十三
      收到