移动Web轮播图IOS卡顿的问题

晚饭前，被测试吐槽说，banner轮播手动左右滑的时候会卡顿。我一看不科学啊，大水果手机怎么会卡顿。我一看测试手中拿的是iPod，我觉得大概是这小玩意性能不强悍，后来又拿来5S，依然会卡顿，有趣的是，两个5S，一个IOS7一个IOS8，IOS7基本没有卡顿，IOS8会卡。

饭后从测试那里借了iPod。。。。就着手解决这个问题。

我一直觉得轮播不应该会有什么问题，因为我用的是一个库Swipe，star都有5000多了，应该比较靠谱，捎带推荐一下这个库。用在移动端十分合适，未压缩带注释的只有15k，而且支持无限轮播、手动左右滑动以及配置项。

（你会发现作者仓库东西不多，而且其他的基本没有start。。。）

用法也很简单，Github上的ReadMe足以，我再啰嗦一遍：

HTML结构：

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS样式：

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

JavaScript代码：

window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 2,
  speed: 400,
  auto: 3000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

 

好了，继续刚才的卡顿，谷歌也没谷歌个出毛线，还是得进Github里看看项目的issue，已经300多个issue了。。既然在IOS出的卡顿，就以IOS为关键字筛选，依然还有很多，一条一条的看，英文啊看的蛋疼。

经过漫长的查看（其实也就几分钟。。。。），找到了个这个：

iOS hardware acceleration trigger fix (CSS) 

Addition of -webkit-perspective and -webkit-backface-visibility on container element in order to trigger hardware acceleration in iOS6. This is a fix since translate3d no longer triggers hardware acceleration in iOS6 Safari.

然后我就抱着试试看的态度加在了css里：

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

加上了之后，只能说，丝滑到不行！！！！！issue里提到IOS6，其实我想说IOS7 、IOS8也有这个问题。

 

之前对硬件加速的理解不深，而且只知道translateZ(0)这个hack，今天才知道perspective和backface-visibility也是可以的。其实在SwipeJS这个库里面有一个translate方法，里面有这么一句：

style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';
style.transform = 'translateX(' + dist + 'px)';

可以看到对于旧的系统使用了translateZ这个hack，而对于新的系统就没有使用，或许作者认为新的系统已经可以流畅运行了。我刚开始改了下：

 style.webkitTransform = 
 style.transform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';

不过 没什么乱用，还是加了perspective和backface-visibility才起的作用。

另外，上面那个issue是12年的！！！而且提issue的同志还提了pr也被作者merge了，但是最新版的CSS代码里并没有出现perspective和backface-visibility这两个属性，或许还是作者认为现在的机器足以流畅了。

 

bug改完一身轻松，总结一下：

硬件加速真的很有用，而且开启的方式不止translateZ。

对于使用了开源的作品遇到问题，记得查issue。

 

最后，再啰嗦一下，刚才提到的perspective和backface-visibility两个属性很有用。如果你在transform或者transition的过程中发现有闪烁的现象，页面里加上他们俩试一试。具体看这里。