起因
最近手写了一个Swiper,就是那种类似跑马灯的组件,在touchmove的时候改变transform: translate来移动dom,移动超过一定距离在touchend事件就切换到下一页,听起来好像很完美,没有问题。
bug
但是,h5的丰富真是让人防不胜防,这个bug就是在touchmove改变了 transform: translate,但是dom没有动..., 在end时突然划一下
wtf??
首先这是某两个安卓机才有的?难道是兼容性,不应该啊,这也没用啥特别的特性啊!
经过我的重重排查,终于发现问题了(泪目)
问题1
touchmove这个事件,按照想法应该是只有移动才触发算合理吧,但是这两坑爹手机手指放着不动也会触发,导致js线程疯狂阻塞,但是浏览器应该会调度js线程和渲染进程的,按理也不应该一直不动啊!
问题2
transform这个属性,大家都听说过,transform GPU加速,速度贼快,谁用谁香,从来没有什么好处是没有代价的,那就是就是阻塞了,transform并不会强制进入重排,但是top可是能次次触发重排(这里忽略浏览器的调度行为),难不成改成top重写?
救星will-change
will-change 不多介绍了,它告诉浏览器,某个属性会经常变化,你悠着点,别给我整砸了,浏览器颤颤巍巍: 没事,我一直盯着它呢,他一动我也动,保管大爷满意。