webapp 滚动卡顿

[a8673136]

最近碰到一个问题：app 首页（主要是展示图片）上下滚动时页面未立即跟随手指的方向进行滚动而是在过了一会时间后页面开始滚动，但是页面在滚动过程中还是会移动一段距离后卡下，接着再移动到下一个位置。
已经测试了 appframework 的af.scroller.js、iScroll.js、islider.js、jndroid 等滚动插件发现其中滚动是使用了css3 的 translate3d来进行平移的。
在weinre 调试器中对执行的touchmove事件进行触发时间点的输出发现了，当我手指在屏幕滚动时触发时间点立即在weinre的console 栏中输出，但是页面实际移动却是在所有touchmove 事件触发时间点输出后再进行移动的。 因此是否有可能是android手机浏览器在js执行到平移样式时阻塞了translate3d 效果，而在touchmove事件都触发完成后在执行所有的translate3d效果。
如何解决这个滚动延迟触发且，滚动时又有卡顿出现的现象呢？？？？？
此处是iscroll.js 中的设置平移样式：
this.scroller.style[transform] = 'translate(' + x + 'px,' + y + 'px) scale(' + this.scale + ')' + translateZ;
希望有碰到过此问题的朋友给本人一些提示！
测试手机是小米2s

[sdochen0216]

建议使用div的原生滚动，overflow:scroll

[业余草]

这个卡顿真不好说是代码的问题，当然也不能排处是代码的兼容性问题。 你使用手机浏览器打开淘宝首页，然后一直向下滑动。看看会不会卡顿。 这是webapp的一个劣势，即web浏览器处理图片时，是不会加速的。即使你有GPU(GPU只会对本地app加速)也不行。 当然你的图片使用canvas处理的话，才会被加速。

[a8673136]

引用 2 楼 xmt1139057136 的回复:

这个卡顿真不好说是代码的问题，当然也不能排处是代码的兼容性问题。 你使用手机浏览器打开淘宝首页，然后一直向下滑动。看看会不会卡顿。 这是webapp的一个劣势，即web浏览器处理图片时，是不会加速的。即使你有GPU(GPU只会对本地app加速)也不行。 当然你的图片使用canvas处理的话，才会被加速。

我用uc浏览器打开淘宝首页，向下滑动很顺畅。 当滚动连续的触发touchMove事件的时候，连续执行css3 的过渡动画 'translate(' + x + 'px,' + y + 'px) scale(' + this.scale + ')' + translateZ; 页面滚动不顺畅会有卡顿，但是执行到touchEnd事件的时候（手指已经不在页面上滚动）iscroll通过计算得到了一个过渡执行时间，此时滚动就很顺畅了，这样应该能够说明确实有使用到GPU吧？ 而且我还发现了一个疑问，我在android虚拟机测试的时候在'translate(' + x + 'px,' + y + 'px) scale(' + this.scale + ')' + translateZ; 这句代码之后加上一句alert 弹窗时页面时先滚动一段距离在执行alert 弹窗，但是我在真机下测试的时候是先alert弹窗然后点击确定后才滚动一段距离的，为什么会有这种不同结果呢，是不是跟不同的手机有关系，我的是mi2s。

[a8673136]

引用 1 楼 sdochen0216 的回复:

建议使用div的原生滚动，overflow:scroll

这个我有试过结果是更卡的。

[业余草]

[a8673136]

我这段时间有关注京东android版app发现它的版面经常改版，但是我的手机并不需要重新下载客户端或者更新文件什么的。这应该能说明京东也是采用hybrid app 来开发的吧？它的首页滚动很顺畅。

[cuigc2013]

不知道这个问题是否已经解决？！我现在是用iscroll5，也是滑动时卡顿现象

[a8673136]

引用 7 楼 cuigc2010 的回复:

不知道这个问题是否已经解决？！我现在是用iscroll5，也是滑动时卡顿现象

试下用framwork 7