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

标签: 移动 web ios | 发表时间:2015-10-22 11:39 | 作者:zjzhome
出处:

晚饭前,被测试吐槽说,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的过程中发现有闪烁的现象,页面里加上他们俩试一试。具体看 这里


本文链接: 移动Web轮播图IOS卡顿的问题,转载请注明。

相关 [移动 web ios] 推荐:

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

- - 博客园_首页
晚饭前,被测试吐槽说,banner轮播手动左右滑的时候会卡顿. 我一看不科学啊,大水果手机怎么会卡顿. 我一看测试手中拿的是iPod,我觉得大概是这小玩意性能不强悍,后来又拿来5S,依然会卡顿,有趣的是,两个5S,一个IOS7一个IOS8,IOS7基本没有卡顿,IOS8会卡. 我一直觉得轮播不应该会有什么问题,因为我用的是一个库 Swipe,star都有5000多了,应该比较靠谱,捎带推荐一下这个库.

iOS Web App初步

- - 新浪UED
iOS Web App开发,配合HTML5,是目前比较热门的话题. 今天,先抛开HTML5,我们来尝试在PhoneGap框架上进行简单的开发. PhoneGap是一个使用HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台. 它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry等智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能.

LibreOffice将发展Web、iOS和Android版本

- Heng Yang - cnBeta.COM
OpenOffice.org的分支项目LibreOffice的开发方The Document Foundation今天宣布将尝试在Web浏览器和iOS、Android移动设备上运行这一办公软件,预计这些产品将在2012年年底到2013年初正式发布.

移动web问题小结

- - Web前端 腾讯AlloyTeam Blog | 愿景: 成为地球卓越的Web团队!
这个想必大家都知道,当页面在手机上显示时,增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览. 这两个属性分别对ios上自动识别电话和android上自动识别邮箱做了限制. 桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两个属性是未定义的,为什么呢.

iOS客户端开发与Web前端开发

- - bang's blog
不知不觉做iOS客户端开发已经半年多了,了解到iOS客户端开发与Web前端开发的一些异同,写一下. 用户角度上看,客户端升级必须让用户手动下载整个新的安装包覆盖安装,而web的升级无需用户做任何事情. 开发角度上看,如果客户端有个小bug需要紧急修复,需要修复完后打包一个完成的安装包,给一个版本号,发布给用户升级.

iOS 5.1Web存储方式的打破会影响到Web App吗?

- - Web App Trend
iOS上很多采用Web存储API来实现持久性数据存储的App,都在近期iOS升级到5.1版本后,受到了的严重影响. 受到影响的App多用 PhoneGap或者其他采用WebKit API来实现数据存储的开发工具开发. 比如,这一款 App看起来正受着影响:. “我收集的统计数据表明,用户经常因为App每次打开之后,之前的设置常常被删除,而抛弃一款App.

『Google发布移动Web性能工具PCAP Web Performance Analyzer』

- - jackyrong
最近,Google的Page Speed团队一直在关注如何更好的优化移动Web应用性能. 虽然我们拥有类似Firebug、Page Speed、YSlow!和Chrome/Safari Developer Tools等优秀工具,但是移动浏览器缺少这样的性能分析利器. 为此,Page Speed团队发布了一个分析移动浏览器网络信息的工具——PCAP Web Performance Analyzer.

基于HT for Web的Web SCADA工控移动应用

- - ITeye博客
最近客户采用 HT for Web图形界面组件,实现了油田燃气管网和供水管网等工控SCADA的HMI人机界面,并将系统运行在平板和手机等Android和iOS移动终端,在此我们在技术支持过程中的一些知识点进行些梳理和分享,希望对有志于Web SCADA领域的伙伴们提供些帮助. 移动终端呈现方面,HMI界面布局应用和游戏领域有类似的问题,一般对横版或者竖版会有更好的布局效果,例如有些游戏只支持横版的玩法,这对于采用Native的App应用来说不成问题,可将App配置成只能横向或者纵向布局,但对于移动终端浏览器就有点尴尬,目前大部分终端你是不能限制用户旋转平面导致布局变化.

移动端web app开发备忘

- - CSDN博客Web前端推荐文章
最近要做个手机html5的页面,做些知识储备,重要的点记录下来以备后续. 1.devicePixelRatio:定义设备物理象素和设备独立象素的比例. css中的px可以看作是设备的独立象素,通过devicePixelRatio,就可以知道设备上的一个css像素代表着多少个物理像素,可以考虑devicePixelRatio+rem进行不同设备间的适配;.

让移动全球化:同步移动化Web和全球化Web策略

- - Web App Trend
在世界上,已有超过55,000,000台iPads被人使用, 在2011年,售出了400,000,000台智能机. 公司在指定他们的web以及 mobile app 策略时,已经开始越来越多将“移动优先”考虑在内了. 例如,Hotels.com这个网站,不仅提供了一个移动最优(mobile-optimized)的站点,还针对 iPad和  iPhone提供了专门的mobile apps.