移动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的过程中发现有闪烁的现象，页面里加上他们俩试一试。具体看 这里 。
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
