使用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.------