工作自我总结

总体问题：

1. 适配（尤其是iPhoneX）
2. 图片过大
3. iPhone下动画闪屏
4. js高耦合
5. js代码优化

分析：

• 适配

  • 在处理适配的过程里主要需要做处理的，在要求位置特别精确的图片时，不同尺寸的屏幕用vw、vh做单位仍然会有多多少少位置上的差距所以采用的切图是截取的是整个屏幕的大小，和背景同时发生改变，属性都设为cover

• 图片过大

  • 图片过大导致预加载时加载缓慢，直接导致进入开始按钮慢，用户流量浪费的也多
  • 压缩png图片
  • 压缩jpg图片

• iPhone下动画闪屏

  • iPhone可能内核特殊，导致动画过长属性opacity最终为0的切换都有明显的闪屏现象，目前不能完全知道原因，但是尽量减小的动画时长，下一屏显示的时间提前来让视觉效果不那么明显。

• js高耦合

  • 和样式无关的不要放class里，用dataset替换
  • js不要和控制样式的class有耦合

• js代码优化

  • 数字定义常量更清晰
  • 重复调用同一个id时定义变量存起来，避免每次获取的时候都重新查DOM树，影响性能
  • 注释习惯
  • 预加载的图片用数组，用变量获取长度