xml过度绘制

作者: 糖葫芦_倩倩 | 来源:发表于2017-06-30 17:46 被阅读218次

首先介绍下什么叫过度绘制? 大家都知道我们显示在前端的页面都是一层盖住一层画上去的,那么过度绘制就是指,我们xml里嵌套的层级过多,导致在界面绘制的时候,时间就会越慢,这就是过度绘制。

那么如何判断你所写的app 页面是不是过度绘制呢?

 1. 打开手机的开发者选项-开发者工具
 2.里面除了有我们经常用到的USB调试,还有一个选项是 <调试GPU过度绘制>,如下图所示: 
 3.打开这个选项,你会发现一个神奇的事情,就是你的手机变成五颜六色的啦。
1.png

问题来了,那么那些颜色又代表什么?

看下下面的图就知道了(摘自网上)。

4.png

我们先来看下以下几个页面:


2.jpg 5.jpg

从上述两幅图中,可以发现qq 界面还是做的挺不错的,屏幕大部分是2x还有1x,属于相对较好的,而第二张app的页面就不太好了,扎一看,基本都是3x和4x。

那么这些绘制的颜色对我们的应用又有什么影响呢?

补充一点:上述1x,2x代表屏幕上1个像素被绘制了多少遍,绘制的层次越多,颜色越深。

这个在好一点的手机上没有多大的区别,但是在差的手机上,会影响页面的加载速度。所以说啊,这个问题对于一个千万级用户的app来说,当然是不能放过滴。

如何优化呢?

我弄过好几个页面的优化,一般大多都是background导致,每个层级都有background,那么系统在绘制的时候,先绘制底层的颜色,再绘制下一个层的.....依次类推,嵌套多了,子然就慢了,但是我们知道其实底部的颜色用户是看不到的,系统因为我们的设置,而帮我们绘制一遍显然是没有必要的。

  • 检查各个层级之间的background,避免重复绘制。
  • 减少布局的嵌套
  • 选择合适的控件(能用一个写了的不要写2个,你懂的)

在这里给大家推荐一个安卓自带的xml分析工具,叫 Hierarchy View ,我之前写了一篇文章关于它的使用 android 优化之layout

另外关于嵌套还可以参考:Android布局优化之include、ViewStub、merge

好了,最后看下我优化后的布局:

6.jpg

嘿嘿,是不是好多了,还不赶紧动起你的小手搞起来。(亲测,速度上加快了2s左右).

相关文章

  • xml过度绘制

    首先介绍下什么叫过度绘制? 大家都知道我们显示在前端的页面都是一层盖住一层画上去的,那么过度绘制就是指,我们xml...

  • Android UI布局,优化过度绘制

    优化前: 如何发现和监控XML的过度渲染和绘制? 设置—>开发人员选项—>硬件—>调试GPU过度绘制,然后选择 显...

  • Android性能优化-过度绘制解决方案

    颜色与过度绘制: 原色:没有过度绘制 蓝色:1 次过度绘制 绿色:2 次过度绘制 粉色:3 次过度绘制 红色:4 ...

  • Android 优化部分

    布局优化 xml层面:变为宽而平的结构1、减少过度绘制2、使用include、merge、viewStub3、co...

  • 过度渲染优化

    1. 查看代码过度绘制 手机设置 -> 开发者选项 -> 调试GPU过度绘制绿色:正常;红色:过度绘制; ...

  • Android UI渲染优化

    Android UI渲染优化 1. 过度绘制优化 什么是过度绘制? Overdraw(过度绘制)描述的是屏幕上的某...

  • Android性能优化

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

  • 过度绘制

    过度绘制:1)移除布局中不需要的背景2)使视图层次结构扁平化3)降低透明度 Lint工具:排查视图层次结构中的低效...

  • 4. 定位过度绘制的代码

    方法一 打开"调试过度绘制"后,直接根据界面颜色估计存在过度绘制的代码 方法二 打开"调试过度绘制"后,根据界面颜...

  • Android性能优化-GPU过度绘制及优化

    过度绘制 过度绘制就是在绘制界面时,对同一个像素重复绘制了多次,但是用户能够看到的也只有最顶层绘制的内容,...

网友评论

    本文标题:xml过度绘制

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