CSS3轮播图
CSS3动画可开启GPU硬件加速渲染动画, 因此效果更加流畅, 帧数更高, 但是很难判断和控制动画的状态。为了实现无缝轮播, 需要:
- 在图片组最后再放置一张首张图片, 当焦点于最后一张的时候仍然可以滑动到重复放置的第一张图, 此刻又立刻切换到实际的第一张图, 造成无缝的视觉。
- 对于切换到第一张重点需要用到事件监听, 通过监听transitionend的事件, 可以在不占用定时器的次数的前提下, 于定时器的外部进行无动画无过度地改变动画对象的变型(transform)。 以此来实现css3的无缝轮播。
纯JS轮播图
动画可控性更好, 但是cpu占用大, 动画帧数低。
- 原理同样需要在图片组最后放置第一张图实现无缝的视觉。
- 难点: 关于math.ceil()和math.floor()两个方法的使用, 在负值的时候要取整取更小的值, 而正值的时候需要取更大的整数, 意味着取整都要让位移最大化, 最后才能走完目标距离, 否则, 永远无法到达目标距离。
- 尽量以setTimeout和递归来代替setInterval, 因为setTimeou可以每次释放内存, 而setInterval会一直占用资源, 直到其被清除。
选项卡
- 如果直接对每个li标签进行遍历绑定事件, 会消耗内存, 影响性能. 而使用事件委托的方法, 让标签被点击之后才触发事件的绑定和回调相应的函数可以节省更多的内存。
- 在遍历的时候使用let变量可以打印每次的i值, 而使用var变量只会输出最后一个i的值。
布局
- 虽然使用table属性的结构布局更加简单, 上手快, 但是实际上加载速度慢, 占用更多的资源。
