webapp 滚动卡顿

2015-08-05 05:02:30 1.4k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

告别白屏卡顿！用MUI+HBuilderX快速搞定一个流畅的WebApp（附完整项目代码）本文详细介绍了如何使用MUI框架和HBuilderX工具快速开发一个流畅的WebApp，解决白屏卡顿等性能问题。通过实战案例和完整项目代码，帮助开发者掌握MUI的局部渲染、硬件加速等优化技术，提升WebApp的用户体验。阅读详情

最近碰到一个问题：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

...全文

告别白屏卡顿！用MUI+HBuilderX快速搞定一个流畅的WebApp（附完整项目配置）本文详细介绍了如何使用MUI框架和HBuilderX工具快速开发流畅的WebApp，解决白屏卡顿等常见问题。通过完整的项目配置和性能优化技巧，帮助开发者提升移动端应用的用户体验，特别适合HTML5开发者参考。阅读详情

a8673136

HTML5 43,737 成员 5,570 内容

+ 关注 + 加入社区

切换为时间正序

a8673136 2016-04-25

打赏
举报

引用 7 楼 cuigc2010 的回复:

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

试下用framwork 7

cuigc2013 2015-10-15

打赏
举报

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

a8673136 2015-08-07

打赏
举报

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

业余草 2015-08-07

打赏
举报

a8673136 2015-08-07

打赏
举报

引用 1 楼 sdochen0216 的回复:

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

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

a8673136 2015-08-07

打赏
举报

引用 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。

业余草 2015-08-07

打赏
举报

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

sdochen0216 2015-08-07

打赏
举报

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

webapp 滚动卡顿

相关推荐