最近楼主在做毕设,其中有一个评论回复的功能。在做的过程中,发现了一个问题,就是TextView在加载表情的过程非常慢。如图:

作为优(闲)秀(的)码(蛋)农(疼)的我们,肯定不允许这种事情存在。所以,让我们来看看到底哪里导致了这么明显的卡顿。
本文参考文章:
1. 定位问题
由于每个人的代码不一样,所以造成卡顿的原因也是不尽相同的。本文只是记录自己在性能优化方面的一些心得和经验,只做参考。
楼主可以从自己的代码中很明显的看出来是TextView
的append
方法造成的卡顿的,楼主造成卡顿的代码如下:
public void appendContent(String content) { if (StringUtil.isEmpty(content)) { return; } final List<String> contentList = ExpressionUtil.contentToStringList(content); Observable.create(emitter -> { for (String string : contentList) { if (emitter.isDisposed()) { emitter.onComplete(); return; } if (string.startsWith("#")) { final String fileName = string.substring(1, string.length() - 1); // 解析表情 Drawable drawable = ExpressionUtil.generateDrawable(getContext(), fileName); if (drawable != null) { // ExpressionUtil的generateImageSpannableString方法的目的是将Drawable转换成为相应的 // SpannableString emitter.onNext(ExpressionUtil.generateImageSpannableString(drawable, fileName)); } else { emitter.onError(new NullPointerException()); } } else { emitter.onNext(string); } } }) .compose(RxSchedulers.newThreadToMain()) .subscribe(new Observer<Object>() { @Override public void onSubscribe(Disposable d) { mDisposable = d; } @Override public void onNext(Object o) { if (o instanceof SpannableString) { append((SpannableString) o); } else { append(o.toString()); } } @Override public void onError(Throwable e) { } @Override public void onComplete() { } }); }
如上的代码,我们很明显的可以看出来具体作用,就是在子线程里面解析表情,转化成为SpannableString
,然后在主线程中通过append
方法让TextView
来显示表情。从这里,我们可以发现两个问题:
- 如果表情过多,
Observable
会导致背压问题。这个问题本文忽略,只是提出来。- 每解析完成一个表情,就会通知主线程来渲染UI。如果表情过多,频繁的调用
append
方法自然而然造成卡顿。
这里,我们不禁有一个疑问,为什么频繁调用append
方法容易到底卡顿呢?我们从Android Profiler
工具中得出答案,下面是我的代码抓取下来的调用栈:

我们发现,TextView
的append
方法几乎占据了CPU一半的使用时长,这太特么可怕了。
append
方法耗时的具体原因是因为每一次调用append
方法都会进行layout,由于我们的表情过多,所以频繁的进行layout,自然而然会导致卡顿。关于更多详细的细节,大家可以从让你的EditText删除表情比微信更高效--记一次android性能分析优化实战这篇文章中找到答案。
2. 解决问题
既然知道了问题的原因,解决起来自然就比较方便。频繁的调用append
会导致卡顿,那我们不频繁的调用append
方法就不会导致卡顿了。所以,从楼主自身的需求来看,当一个表情解析完成之后不要去通知主线程渲染,而是保存在一个SpannableStringBuilder
对象,等待所有的表情解析完成之后才通知主线程调用append
方法来渲染UI(本文是通过setText方法来实现):
public void appendContent(String content) { if (StringUtil.isEmpty(content)) { return; } final List<String> contentList = ExpressionUtil.contentToStringList(content); Observable.create((ObservableOnSubscribe<SpannableStringBuilder>) emitter -> { // 初始化为TextView本来的内容 final SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder(StringUtil.emptyIfNull(getText())); for (String string : contentList) { if (emitter.isDisposed()) { emitter.onComplete(); return; } if (string.startsWith("#")) { final String fileName = string.substring(1, string.length() - 1); Drawable drawable = ExpressionUtil.generateDrawable(getContext(), fileName); if (drawable != null) { spannableStringBuilder.append(ExpressionUtil.generateImageSpannableString(drawable, fileName)); } } else { spannableStringBuilder.append(string); } } // 等所有表情解析完成之后才通知主线程渲染UI emitter.onNext(spannableStringBuilder); }) .compose(RxSchedulers.newThreadToMain()) .subscribe(new Observer<SpannableStringBuilder>() { @Override public void onSubscribe(Disposable d) { mDisposable = d; } @Override public void onNext(SpannableStringBuilder spannableStringBuilder) { // 调用setText方法 setText(spannableStringBuilder); } @Override public void onError(Throwable e) { } @Override public void onComplete() { } }); }
通过如上的修改,我们就会发现TextView在加载表情变得无比流畅。
3. 总结
这是楼主第一次尝试着解决性能相关的问题,总而言之,还是收获了不少的经验。
- 日常代码规范非常重要,不能想当然的乱写一通。
- 遇到卡顿的问题,能解决不要忽略, 因为在解决过程能够学到很多的东西。
原著是一个有趣的人,若有侵权,请通知删除
还没有人抢沙发呢~