美文网首页
流畅购物哪家强?购物类应用“页面过度绘制”情况调查

流畅购物哪家强?购物类应用“页面过度绘制”情况调查

作者: 技术爱好 | 来源:发表于2018-07-30 17:03 被阅读16次

每一款应用都希望通过炫丽夺目的视觉效果来吸引用户的关注,但部分应用在追求视觉的同时忽视了界面绘制的情况,从而导致界面过度绘制。

过度绘制是什么?会带来什么问题?又该如何解决?

本次,华为终端开放实验室选取了几款具有代表性的购物类应用作为测试对象,带大家一起看看它们在过度绘制方面表现如何。

什么是过度绘制

过度绘制(Overdraw)是指在一个像素点上绘制了多次,在多层重叠的UI结构中,呈现在我们眼前的只是最上面的一个,如果不可见的界面也在做绘制的操作,就会导致过度绘制。过度绘制会浪费CPU、GPU,影响应用启动时间和响应时间,进而影响用户体验。

过度绘制测试流程

测试环境

硬件环境:P20 6+64g

软件版本:Android 版本8.1

测试范围

购物类应用:淘宝 7.10.0 、天猫 7.10.10、 唯品会6.22.3、 京东7.0.12、网易严选3.8.7

测试过度绘制步骤

  1. 预制条件:手机未安装其他三方软件 ,应用都是首次安装。

  2. Show GPU Overdraw 的选项:

①设置 -> ②开发者选项 -> ③调试GPU过度绘制(显示GPU过度绘制)

  1. 打开测试应用,查看主界面过度绘制情况;

  2. 判断出现过度绘制的方法:

应用UI界面过度绘制次数应该不超过两次(绿色),三次(淡红色)就要进行界面优化了,如果界面区域过度绘制达到四次(深红色)及以上就要引起高度重视,否则会影响界面的流畅度,进而影响用户体验。

购物类应用过度绘制情况分析

五个购物类APP测试结果如下:

通过对比各应用主界面不同区域过度绘制情况,结合谷歌定义的3X过度绘制区域不能超过屏幕大小的 ¼的标准,可以看出天猫、网易严选、淘宝、京东整体表现较好,唯品会表现不理想,主要体现在4X过度绘制区域覆盖了整个界面。

将唯品会各界面过度绘制情况做对比,可以看出唯品会UI界面过度绘制问题较为严重,需重点优化,以提高应用流畅度。

华为终端开放实验发现唯品会页面过度绘制问题后,已第一时间与唯品会相关团队取得联系,唯品会正在积极处理该问题,希望早日为用户提供更优质的使用体验。

(写给开发者的)过度绘制优化建议

引起过度绘制的两个主要因素:层级与背景图片,那要怎么解决呢?华为终端开放实验室给出了一些可尝试建议:

  • 借助开发者选项中的“调试GPU过度绘制”进行自检,优化自己的布局层级;
  • 通过canvas.clipRect()来 帮助系统识别那些可见的区域;
  • 减少布局文件的层级;
  • 避免过于复杂的自定义布局;
  • 尝试使用ConstraintLayout也可以大大减少布局的嵌套,提高UI性能等;
  • 移除默认的窗口背景;
  • 尝试针对UI布局的优化(例如ViewStub的使用、include、merge等标签的使用);
  • 去掉其他不必要的背景。

如果您有更好的解决方法与见解,欢迎在文章下方留言交流。

华为终端开放实验室后期将持续发布各类别应用的评测报告,为用户选择最佳体验的应用提供参考,敬请关注!

如有疑问,可发送邮件至deveco@huawei.com

关注安卓绿色联盟公众号回复关键词“申请”,了解华为终端开放实验室免费云测申请流程。

相关文章

  • 流畅购物哪家强?购物类应用“页面过度绘制”情况调查

    每一款应用都希望通过炫丽夺目的视觉效果来吸引用户的关注,但部分应用在追求视觉的同时忽视了界面绘制的情况,从而导致界...

  • Android性能优化

    1.如何避免过度绘制(Overdraw) 应用可能会在单个帧内多次绘制同一个像素,这种情况称为“过度绘制”。过度绘...

  • iOS 圆角优化及栅格化下网络图片模糊问题与像素格式

    在页面多圆角视图的情况下,会导致页面卡顿,取消圆角绘制后会明显察觉页面流畅;若在在tableview下,滚动视图每...

  • requestIdleCallback和requestAnima

    页面流畅与 FPS 页面是一帧一帧绘制出来的,当每秒绘制的帧数(FPS)达到 60 时,页面是流畅的,小于这个值时...

  • 购物类App原型制作分享-Lyst

    这是一款来自英国的时尚购物信息平台,传统的购物加上时尚信息推送是现在购物类应用常见的方式,购物类App讲究分类全面...

  • 十二、性能优化-绘制优化和布局优化

    绘制性能的好坏主要影响:应用中的页面显示速度优化方向: 降低View.onDraw()的复杂度 避免过度绘制,即布...

  • 2019-07-17帐号

    常用类 Appid qq184 Aid@123456 购物类 全球购骑士卡 18070400617 qqgqsk@...

  • 双十一购物,前夕

    “今年再也不乱买东西了”。 各大购物网站页面轻盈跳动的 购满减,购对折,购满送,购物津贴 ...... 促销口号,...

  • 性能优化--布局

    一、布局优化: 1、过度绘制优化: 屏幕上某一像素点在一帧中被重复绘制多次,就是过度绘制。 1)、查看自己应用的过...

  • 全球购加盟哪家强

    近年来,连锁加盟店如雨后春笋蓬勃发展,造就了不少连锁大王,但不少连锁体系,来得快、去得也快,风光一阵子之后,就一蹶...

网友评论

      本文标题:流畅购物哪家强?购物类应用“页面过度绘制”情况调查

      本文链接:https://www.haomeiwen.com/subject/afgfvftx.html