每一款应用都希望通过炫丽夺目的视觉效果来吸引用户的关注，但部分应用在追求视觉的同时忽视了界面绘制的情况，从而导致界面过度绘制。
过度绘制是什么？会带来什么问题？又该如何解决？
本次，华为终端开放实验室选取了几款具有代表性的购物类应用作为测试对象，带大家一起看看它们在过度绘制方面表现如何。
什么是过度绘制
过度绘制（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
测试过度绘制步骤
-
预制条件：手机未安装其他三方软件 ,应用都是首次安装。
-
Show GPU Overdraw 的选项：
①设置 -> ②开发者选项 -> ③调试GPU过度绘制（显示GPU过度绘制）
-
打开测试应用，查看主界面过度绘制情况；
-
判断出现过度绘制的方法：
应用UI界面过度绘制次数应该不超过两次（绿色），三次（淡红色）就要进行界面优化了，如果界面区域过度绘制达到四次（深红色）及以上就要引起高度重视，否则会影响界面的流畅度，进而影响用户体验。
购物类应用过度绘制情况分析
五个购物类APP测试结果如下：
通过对比各应用主界面不同区域过度绘制情况，结合谷歌定义的3X过度绘制区域不能超过屏幕大小的 ¼的标准，可以看出天猫、网易严选、淘宝、京东整体表现较好，唯品会表现不理想，主要体现在4X过度绘制区域覆盖了整个界面。
将唯品会各界面过度绘制情况做对比，可以看出唯品会UI界面过度绘制问题较为严重，需重点优化，以提高应用流畅度。
华为终端开放实验发现唯品会页面过度绘制问题后，已第一时间与唯品会相关团队取得联系，唯品会正在积极处理该问题，希望早日为用户提供更优质的使用体验。
（写给开发者的）过度绘制优化建议
引起过度绘制的两个主要因素：层级与背景图片，那要怎么解决呢？华为终端开放实验室给出了一些可尝试建议：
- 借助开发者选项中的“调试GPU过度绘制”进行自检，优化自己的布局层级；
- 通过canvas.clipRect()来 帮助系统识别那些可见的区域；
- 减少布局文件的层级；
- 避免过于复杂的自定义布局；
- 尝试使用ConstraintLayout也可以大大减少布局的嵌套，提高UI性能等；
- 移除默认的窗口背景；
- 尝试针对UI布局的优化（例如ViewStub的使用、include、merge等标签的使用）；
- 去掉其他不必要的背景。
如果您有更好的解决方法与见解，欢迎在文章下方留言交流。
华为终端开放实验室后期将持续发布各类别应用的评测报告，为用户选择最佳体验的应用提供参考，敬请关注！
如有疑问，可发送邮件至deveco@huawei.com。
关注安卓绿色联盟公众号回复关键词“申请”，了解华为终端开放实验室免费云测申请流程。
网友评论