最近楼主在做毕设，其中有一个评论回复的功能。在做的过程中，发现了一个问题，就是TextView在加载表情的过程非常慢。如图：
demo.gif
作为优(闲)秀(的)码(蛋)农(疼)的我们，肯定不允许这种事情存在。所以，让我们来看看到底哪里导致了这么明显的卡顿。
本文参考文章：
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. 总结
这是楼主第一次尝试着解决性能相关的问题，总而言之，还是收获了不少的经验。
- 日常代码规范非常重要，不能想当然的乱写一通。
- 遇到卡顿的问题，能解决不要忽略， 因为在解决过程能够学到很多的东西。
网友评论