首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >APP性能测试—过度绘制

APP性能测试—过度绘制

作者头像
清风穆云
发布2021-08-09 11:34:41
2.8K0
发布2021-08-09 11:34:41
举报
文章被收录于专栏:QA一隅QA一隅

过度绘制就是在同一个区域中叠加了多个控件,也就是说一个像素点上会出现多个像素的叠加,实际上呈现在我们眼前的只是最上面的一个。

往往造成这种现象的原因是产品或者视觉过多繁琐的建议和交互,或者是开发人员自己不注意造成的,这样就会浪费大量的CPU以及GPU资源。过度绘制最直观的影响就是会导致APP卡顿。

Android 过度绘制测试

开启过度绘制检测

  • 点击设置-开发者选项。
  • 点击调试GPU过度绘制
  • 选择调试GPU过度绘制区域

过度绘制展示

  1. 原色:无过渡绘制
  2. 蓝色:绘制一次 (正常)
  3. 绿色:绘制二次 (轻微)
  4. 浅红:绘制三次 (中度)
  5. 深红:绘制四次 (严重)

一般来说不允许存在4x过度绘制,不允许存在面积超过屏幕1/4浅红或深红色区域。

GPU呈现模式分析

GPU呈现模式分析主要用来反映界面的绘制情况,查看是否存在耗时问题。可以在开发者选项中开启GPU呈现模式分析。

下面是有关输出的几点注意事项:

  • 沿水平轴的每个竖条代表一个帧,每个竖条的高度表示渲染该帧所花的时间(以毫秒为单位),不同颜色代表不同的渲染阶段。
  • 水平绿线表示16 毫秒。要实现每秒 60 帧,代表每个帧的竖条需要保持在此线以下。当竖条超出此线时,可能会使卡顿丢帧。

下表介绍了使用运行 Android 6.0及更高版本的设备分析器输出中竖条的具体含义。

注意:

  • Android 4.0(API 级别 14)和 Android 5.0(API 级别 21)之间的Android 版本具有蓝色、紫色、红色和橙色区段。
  • 低于Android 4.0Android 版本只有蓝色、红色和橙色区段。下表显示的是 Android 4.05.0 中的竖条区段。

iOS 过度绘制测试

Xcode 9之前的版本可以直接使用使用InstrumentsCoreAnimation来测试,Color Blended Layer 用来检测哪里发生了图层混合,并用红色标记出来,所以我们要尽可能减少红色区域。

XCode 9之后的版本则直接需要在Xcode菜单中运行项目时进行调试,如下图所示:

开启之后在设备上就可以看到图层混合情况:

  • 红色:存在混合图层。
  • 绿色:没有使用混合。

如何优化过度绘制

移除布局中不需要的背景

默认情况下,布局没有背景,这表示布局本身不会直接渲染任何内容。但是,当布局具有背景时,其有可能会导致过度绘制。

移除不必要的背景可以快速提高渲染性能。不必要的背景可能永远不可见,因为它会被应用在该视图上绘制的任何其他内容完全覆盖。例如,当系统在父视图上绘制子视图时,可能会完全覆盖父视图的背景。

要查找过度绘制的原因,请在布局检查器工具中浏览层次结构。在浏览过程中,请留意您可以移除的背景,因为它们对用户不可见。在许多容器采用同一种背景颜色的情况下,您也有机会移除不需要的背景:您可以将窗口背景设置为应用的主背景颜色,并且不为其上面的任何容器定义背景值。

使视图层次结构扁平化

借助先进的布局设计方法,您可以轻松对视图进行堆叠和分层,从而打造出精美的设计。但是,这样做会导致过度绘制,从而降低性能,特别是在每个堆叠视图对象都是不透明的情况下,这需要将可见和不可见的像素都绘制到屏幕上。

如果遇到这类问题,您可以通过优化视图层次结构来减少重叠界面对象的数量,从而提高性能。要详细了解如何实现此操作,请参阅优化视图层次结构。

降低透明度

在屏幕上渲染透明像素,即所谓的透明度渲染,是导致过度绘制的重要因素。在普通的过度绘制中,系统会在已绘制的现有像素上绘制不透明的像素,从而将其完全遮盖,与此不同的是,透明对象需要先绘制现有的像素,以便达到正确的混合效果。

诸如透明动画、淡出和阴影之类的视觉效果都会涉及某种透明度,因此有可能导致严重的过度绘制。您可以通过减少要渲染的透明对象的数量,来改善这些情况下的过度绘制。

例如,要获得灰色文本,您可以在 TextView 中绘制黑色文本,再为其设置半透明的透明度值。但是,您可以简单地通过用灰色绘制文本来获得同样的效果,而且能够大幅提升性能。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-01-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 QA一隅 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Android 过度绘制测试
    • 开启过度绘制检测
      • 过度绘制展示
        • GPU呈现模式分析
    • iOS 过度绘制测试
    • 如何优化过度绘制
      • 移除布局中不需要的背景
        • 使视图层次结构扁平化
          • 降低透明度
          相关产品与服务
          容器服务
          腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档