webapp 滚动卡顿

a8673136 2015-08-05 05:02:30
最近碰到一个问题: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
...全文
1270 8 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
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
BlendUI 是百度公司的一个 Web 前端 UI 框架。BlendUI 能让Webapp的体验和交互与Native媲美。 具体而言,里面包括了两项关键能力: 多Webview控制能力。让一个Webapp拆到多个webview中运行,并能用Javascript来调度。搞定了业务无解的难题:页面过大导致卡顿,页面切换不流畅, Native组件嵌入能力。能将Native控件嵌入Webview中,这样就能让页面中那些性能较差的部分用Native来实现,以最大化地提高体验和交互。 与此同时,开发者看到的是Web API,不仅能快速上手,更由于BlendUI为普通浏览器完成了降级和替代方案,一套代码能同时在BlendUI环境和浏览器中同时运行。 最后再简单说说BlendUI的背景和目标。 在webapp和Native app之间,有一条无法逾越的鸿沟:体验和性能的差距。轻应用是webapp的延伸,同样存在此问题。为弥补这条鸿沟,我们要有一套方案,能让开发者使用web API,做出体验和性能与原生应用差距不大的应用。 经过一番调研,我们发现几个重要的现实问题,这些问题导致了webapp和native app之间的体验差距。 webapp缺少淡入淡出动画、转场动画、滑动动画,或者因此引起的不流畅,以及某些组件的弹力体验与原生有差距等。 浮动元素的处理。顶部、右侧、底部的固定位置的元素可能会有抖动,或者弹出菜单无法点按页面其他位置关闭,点按不流畅等。 输入框的问题。包括输入法无法正常展开收起,框内部滚动问题。 本地缓存能力。包括已浏览的图片本地缓存,静态资源缓存出现脏数据等问题。 DOM变化后的渲染抖动。包括无限下拉时的渲染抖动,无刷新翻页的闪烁 此外,vision mobile的调研数据显示,开发者之所以不选用html5的前三大原因是: 性能问题:45.7% 硬件接口有限:37.3% 难以集成原生组件:29.2% 因此,轻组件的首要目标是:弥补轻应用的体验劣势,包括页面间、页面内的转场动画,浮动元素处理,一些对性能要求较高的组件原生化等。 我们将面对的用户主要是高级web开发者。因此,库需要有足够的扩展性和灵活性,同时API必须是web化的。 标签:BlendUI  CSS框架

39,118

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧