使用Hugo和TraceView优化界面卡顿的一个简单实践

背景

产品反馈在天气的小时趋势图中, 左右滑动非常的卡顿. 在我的sony低版本手机上, 确实发现卡顿的比较严重, 因此需要优化一下, 看看UI线程的耗时操作的具体位置.

使用Hugo初步定位

WeatherHourlyTrendsView.java

    @Override
    @DebugLog
    protected void onDraw(Canvas canvas) {
        final DataSet dataSet = mDataSet;
        final int size;

        if (dataSet == null || (size = dataSet.size()) == 0)
            return;

Log打印结果:

hugo_1.png

可以看到, onDraw()方法执行了324ms, 显然这里存在很大的问题.

使用TraceView具体分析

先把@DebugLog注释去掉, 否则抓取的trace文件没有可读性.

直接使用DDMS中的start method profiling和stop method profiling 抓取到.trace文件.
在Find输入框, 输入 "WeatherHourlyTrendsView" 找到onDraw()方法.

traceview_1.png

可以看到onDraw()的执行内部, JLog.i()方法的耗时占据了64.8%. 其实就是简单的Log打印造成了UI卡顿的最重要的原因.

使用Hugo初步确认优化结果

去掉JLog.i()调用后, 再次看hugo的输出.


hugo_2.png

现在onDraw()方法执行了66ms, 可见优化结果还是非常理想的.

再次用TraceView分析
traceview_2.png

可见, 优化后, 现在onDraw()方法中最耗时的操作在getWeatherIcon()中.

    public Bitmap getWeatherIcon(int position) {
        int weatherCode = Integer.valueOf(data.get(position).getWeathercode());
        int resId = WeatherCommon.getIconByWeatherCode(weatherCode);
        Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(), resId);
        return bitmap;
    }

这里也是一个比较明显的可优化点. 现在每次都new 一个Bitmap对象出来, 显然是不合理的, 应该用一个LruCache对这些Bitmap对象进行统一的管理, 避免每次都new对象出来用.

-------DONE.------

推荐阅读更多精彩内容

  • 1,卡顿的原因 界面绘制:主要原因是绘制的层级深、页面复杂、刷新不合理,由于这些原因导致卡顿的场景更多出现在UI和...
    dev_journey阅读 7,556评论 0 4
  • 概要 应用运行时的卡顿问题非常影响用户体验,严重降低产品表现力,本文将介绍应用卡顿原因以及分析方法等等。 卡顿问题...
    某昆阅读 2,251评论 1 8
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 167,403评论 24 706
  • 格式: onmouseover:当鼠标移动到元素上方触发事件。onmouseout:当鼠标从元素上方移出时触发事件...
    WangYatao阅读 600评论 0 0
  • 一 words and expressions 1. To understand just how audacio...
    Eliot2017阅读 269评论 0 1