Glide加载Gif的卡顿优化

微信扫一扫,分享到朋友圈

Glide加载Gif的卡顿优化

基于Glide 4.9.0版本分析

前言

Glide图片框架是可以直接加载GIF图的,但是做一个银行合作项目的时候,由于有需要出货页面需要加载一个GIF图,但是发现在使用Glide框架加载Gif图片,明显发现有延迟.

经过查看glide加载Gif图片的源码得知:Glide在加载Gif的图片帧的时候,上一帧的渲染以及下一帧的准备是串行的,这个过程中,如果出现下一帧的准备阶段时间超过了Gif间隔播放的时长,就会造成 播放卡顿
.而且此过程中,StandardGifDecoder只保留上一帧的数据,每次获取当前需要绘制的帧的时候都会从BitmapPool中获取新的Bitmap(注意,这是一个新的Bitmap对象),因此加载Gif国产中,Glide至少需要两个Bitmap.这也就导致 内存会消耗的过高
.

下面就来研究一下Glide是如何加载Gif,以及如何进行卡顿的优化了:

Glide加载Gif原理初探

本文围绕以下关键字来介绍

  • Glide
  • StreamGifDecoder
  • ByteBufferGifDecoder
  • StandardGifDecoder
  • GifDrawable

1)首先来介绍一下Gif相关的解码器

Glide的构造中可以找到Gif的相关信息.

Glide(
@NonNull Context context,
/*.....*/) {
//...
List<ImageHeaderParser> imageHeaderParsers = registry.getImageHeaderParsers();
//..
GifDrawableBytesTranscoder gifDrawableBytesTranscoder = new GifDrawableBytesTranscoder();
//...
registry
//...
/* GIFs */
.append(
Registry.BUCKET_GIF,
InputStream.class,
GifDrawable.class,
new StreamGifDecoder(imageHeaderParsers, byteBufferGifDecoder, arrayPool))
.append(Registry.BUCKET_GIF, ByteBuffer.class, GifDrawable.class, byteBufferGifDecoder)
.append(GifDrawable.class, new GifDrawableEncoder())
/* GIF Frames */
// Compilation with Gradle requires the type to be specified for UnitModelLoader here.
.append(
GifDecoder.class, GifDecoder.class, UnitModelLoader.Factory.<GifDecoder>getInstance())
.append(
Registry.BUCKET_BITMAP,
GifDecoder.class,
Bitmap.class,
new GifFrameResourceDecoder(bitmapPool))
//...
.register(GifDrawable.class, byte[].class, gifDrawableBytesTranscoder);
ImageViewTargetFactory imageViewTargetFactory = new ImageViewTargetFactory();
//....
}

因此第一步可以发现Glide是通过创建StreamGifDecoder来解码Gif的InputStream流.

public class StreamGifDecoder implements ResourceDecoder<InputStream, GifDrawable> {
private static final String TAG = "StreamGifDecoder";
private final List<ImageHeaderParser> parsers;
private final ResourceDecoder<ByteBuffer, GifDrawable> byteBufferDecoder;
private final ArrayPool byteArrayPool;
public StreamGifDecoder(List<ImageHeaderParser> parsers, ResourceDecoder<ByteBuffer,
GifDrawable> byteBufferDecoder, ArrayPool byteArrayPool) {
this.parsers = parsers;
this.byteBufferDecoder = byteBufferDecoder;
this.byteArrayPool = byteArrayPool;
}
@Override
public boolean handles(@NonNull InputStream source, @NonNull Options options) throws IOException {
return !options.get(GifOptions.DISABLE_ANIMATION)
&& ImageHeaderParserUtils.getType(parsers, source, byteArrayPool) == ImageType.GIF;
}
@Override
public Resource<GifDrawable> decode(@NonNull InputStream source, int width, int height,
@NonNull Options options) throws IOException {
// 1. 用一个byte数组来接收InputStream流
byte[] data = inputStreamToBytes(source);
if (data == null) {
return null;
}
// 2.使用ByteBuffer包装处理原始的数据流,
//思考为什么用ByteBuffer呢?
/**
@link StandardGifDecoder#setData();
// Initialize the raw data buffer.
rawData = buffer.asReadOnlyBuffer();
rawData.position(0);
rawData.order(ByteOrder.LITTLE_ENDIAN); // 小端对齐.从低位到高位排序
*/
ByteBuffer byteBuffer = ByteBuffer.wrap(data);
return byteBufferDecoder.decode(byteBuffer, width, height, options);
}
}

具体细节如下:

  • 使用byte[] 数组接收InputStream
  • 然后在通过处理之后的byte[]交给ByteBufferGifDecoder进行下一阶段的处理工作(完善对InputStream的解码工作);
public class ByteBufferGifDecoder implements ResourceDecoder<ByteBuffer, GifDrawable> {
//...
@Override
public GifDrawableResource decode(@NonNull ByteBuffer source, int width, int height,
@NonNull Options options) {
final GifHeaderParser parser = parserPool.obtain(source);
try {
return decode(source, width, height, parser, options);
} finally {
parserPool.release(parser);
}
}
@Nullable
private GifDrawableResource decode(
ByteBuffer byteBuffer, int width, int height, GifHeaderParser parser, Options options) {
long startTime = LogTime.getLogTime();
try {
// 1.获取GIF头部信息
final GifHeader header = parser.parseHeader();
if (header.getNumFrames() <= 0 || header.getStatus() != GifDecoder.STATUS_OK) {
// If we couldn't decode the GIF, we will end up with a frame count of 0.
return null;
}
//2. 根据GIF的背景是否有透明通道(Alpha)来确定Bitmap的类型
Bitmap.Config config = options.get(GifOptions.DECODE_FORMAT) == DecodeFormat.PREFER_RGB_565
? Bitmap.Config.RGB_565 : Bitmap.Config.ARGB_8888;
//3.计算Bitmap的采样率
int sampleSize = getSampleSize(header, width, height);
//4. 获取Gif数据的StandardGifDecoder====> 由静态内部类GifDecoderFactory
GifDecoder gifDecoder = gifDecoderFactory.build(provider, header, byteBuffer, sampleSize);
gifDecoder.setDefaultBitmapConfig(config);
gifDecoder.advance();
//5.获取Gif数据的下一帧
Bitmap firstFrame = gifDecoder.getNextFrame();
if (firstFrame == null) {
return null;
}
Transformation<Bitmap> unitTransformation = UnitTransformation.get();
//6.由Gif数据帧构建一个GifDrawable用来播放GIF帧的动画
GifDrawable gifDrawable =
new GifDrawable(context, gifDecoder, unitTransformation, width, height, firstFrame);
//7. 将GifDrawable包装成GifDrawableResource,用于维护GifDrawable的回收,以及播放动画的停止.
return new GifDrawableResource(gifDrawable);
} finally {
if (Log.isLoggable(TAG, Log.VERBOSE)) {
Log.v(TAG, "Decoded GIF from stream in " + LogTime.getElapsedMillis(startTime));
}
}
}
}
@VisibleForTesting
static class GifDecoderFactory {
GifDecoder build(GifDecoder.BitmapProvider provider, GifHeader header,
ByteBuffer data, int sampleSize) {
//获取一个标准的Gif解码器,用于读取Gif帧并且将其绘制为Bitmap,供外界使用
return new StandardGifDecoder(provider, header, data, sampleSize);
}
}

小小的总结一下:

  • 首先通过ByteBufferDecoder提取Gif的头部信息
  • 根据Gif的头部信息获取其背景颜色,好设置Bitmap的Config选项
  • 依然还是根据头信息计算出采样率
  • 获取GIF的解码器StandardGifDecoder用于构建GIF帧输出为Bitmap供外界使用
  • 构建GifDrawable(用于播放Gif动画)
  • 构建GifDrawableResource(用于管理GifDrawable)

2)其次看Gif图像帧获取以及如何将图像帧注入到Bitmap中

下面来看看Gif图像帧是如何被解码到Bitmap中的,请看StandardGifDecoder

Glide加载Gif卡顿的优化

小总结

微信扫一扫,分享到朋友圈

Glide加载Gif的卡顿优化

大前端进阶-js性能优化

上一篇

就因为没看这篇文章面试失败了

下一篇

你也可能喜欢

Glide加载Gif的卡顿优化

长按储存图像,分享给朋友