Previous navigation:

SDWebImage source learning collection directory

Introduction to the

SDWebImage can be used to quickly download and display web images. The simplest use is a single line of code:

//var imageView: UIImageView!
//var imageURL: NSURL!
imageView.sd_setImage(with: imageURL)
Copy the code

You can set up the network image for UIImageView, and SD internally manages the download, cache, and decoding without any additional operations

A slightly more complex use can configure their own image download mode, cache logic, different formats of decoders, data encryption and so on

In more advanced usage, you can customize downloaders, custom caches: including disk caches and memory caches, custom decoders

All of this, SDWebImage has done a good internal encapsulation and decoupling, providing a very powerful function at the same time also support very flexible extension, after 5.0 can even add plug-ins to use FLAnimatedImage, YYImage third-party libraries as plug-ins integrated into the use of. Very cow force!

Study SDWebImage source code, can learn his architecture design, module management, internal decoupling ideas, the project architecture design has a good inspiration. And SD source code with a very detailed documentation, each module and even class diagram, very convenient to learn his design principles.

Macro framework:

To quote the official frame of SDWebImage:

From the top down:

The UI layer

SD display to the UI layer needs to set the network image control for the extension, including UIImageView, UIButton, NSButton (mscOS), added convenient according to the URL to set the network image method, the method through a variety of abstractions, there are the most simple to set a URL, there are also the most complex set URL, Placeholder, download options, download context, progress callback, completion callback, and so on, and because the parent class of these controls are UIView, so the EXTENSION of UIView, to use SDWebImageManager to download the image processing.

When UIImageView calls the category to set the image URL, in the category method, it relies on Indicator to set the progress Indicator, and Transition to set the animation of the image display. Package processing the download required options and need to be throughout the entire download process context context, classification began to prepare to use SDWebImageManager to obtain images, in this process, injected ImagePrefetcher image preloader interface, Allow can be in UIImageView ready to download the image before, the URL set to be downloaded for pre-download, preloading will be completed after the image cache, so that in SDWebImageManager ready to obtain the image, can quickly read the cached image, save time.

Core scheduling layer

The core of SD is the SDWebImageManager class. This class relies on the ImageCache interface to manage the cache, and the ImageLoader interface to manage the download. After receiving the fetch image instruction in the UI category, SDWebImageManager can efficiently cache and download images by scheduling cacher and Loader, and can use Options +context to configure the cache and download logic

cache

The abstract interface SDImageCache is used to define the cache, providing a high degree of customization while providing a default implementation class with the same name. Each ImageCache interface relies on two refined cache interfaces: SDMemoryCache and SDDiskCache, which manage memory cache and disk cache respectively, also provide default implementation classes with the same name

SDMemoryCache: A memory cache manager implemented with Weak Map table. It stores Image objects that need to be cached in memory and can be optimized according to the system memory. When memory is tight, it also releases Image resources that are not strongly held by views to reduce memory burden.

SDDiskCache: The image data written to the disk cache or read from disk cache data for use by the UI layer, and provides more Zhong Guo period rules for the use of free choice, all disk operation on the internal serial I/o queue synchronous or asynchronous execution, all data sensitive operation of lock protection, cached data can be written to disk at the completion of a web images are downloaded, When used, the Data is read, decoded and returned to the UI layer for use. In addition, the Data is written to the memory cache to speed up the next access.

The cache also provides a SDImageCachesManager to manage multiple caches, and the Manager itself implements the cache interface and can be used as a cache. Sd internally selects the appropriate cache to handle

downloader

Use the abstract interface SDImageLoader to define the loader, provide a default implementation class of the same name, hold URLSesson to download images from the network, and use the Photos framework to asynchronously fetch images from albums.

When downloading network images, Operation is used to perform the download task in the download queue. Op reuse technology is used to support the reuse of the same download OP when the same URL is loaded for several times to save resources.

Provides SDImageLoadersManager to manage multiple downloaders and implements the downloader interface itself, which is used as the default downloader.

The underlying module

In addition to the UI layer extensions at the top, there are many other modules at the bottom to assist.

Tools extension

Including the definition of picture data, auxiliary drawing, GIF processing and so on.

Picture codec

IOCoder, HEICCoder, GIFCoder, ANimatedCoder, WebPCoder, GIFCoder, ANimatedCoder, WebPCoder APNGCoder and other codecs to quickly download a variety of Image data after the completion of the decoding operation for UI layer display, the latter Image encoding operation to the cache to the disk for use.

SDImageCOdersManager is also provided to manage multiple picture decoders, which can be automatically selected according to the type of the picture to use the appropriate decoder. The SDImageCoder protocol is also implemented as the default decoder to use.

Picture converter

Define an Image transformer using the SDImageTransformer interface, which allows you to convert the Image to a new Image after the Image is decoded, such as fillet, scale, etc.

Provides SDImagePipelineTransformer pipeline converter, to manage multiple converter, itself also implement the converter interface, management of multiple image converter can be in the form of a pipeline to process images one by one.

Picture decipher

Based on the security Settings, download over image data can be encrypted, SD provides SDWebImageDownloaderDecryptor picture data decryption interface definition, convenient and rapid realization of custom decryption, before the image data decoding, will first need to decrypt the original data asynchronous operation after decoding process, The Base64 decryptor is provided by default.

However, it should be noted that the decryptor does not support the progress of the image download, because the encrypted data in part of the download can not decrypt part of the image information, so it can not be downloaded while showing.

Class structure

To use the official, very, very, very complete class diagram: (Click to enlarge)

A brief introduction:

  • The UI layer has several subview extensions that can display images, depending on the UIView extension, where the image loading starts
  • UIView extensions rely on SDWebImageOptions to configure download options
  • UIView also relies on SDWebImageManager for image loading
  • SDWebImageManager aggregates SDWebImagePrefetcher to preload images
  • For download and decode images SDWebImageManager rely on SDWebImageCombinedOperation hybrid task management
  • SDWebImageOperation defines asynchronous tasks that can be cancelled, and there are several inherited subinterfaces to implement different tasks
    1. SDWebImageCombinedOperation interface is used to aggregate load and cache task,
    2. SDWebImageDownloadToken Manages the network download task
  • SDWebImageManager also aggregates the SDImageCache and SDImageLoader interface to cache and load pictures
  • SDImageCache combines SDImageCacheConfig to set cache configurations and relies on SDImageCache to set cache options
  • SDImageCache combines SDMemoryCache and SDDiskCache to manage memory and disk caches.
  • SDWebImageDownloader implements SDImageLoader interface to download the pictures, and rely on SDWebImageDownloadToken SDWebImageDownloaderOperation to download task management
  • SDWebImageDownloader combination SDWebImageDownloaderConfig to download configuration Settings, rely on SDWebImageDownloaderOptions set download option
  • SDWebImageDownloader combines request modifier and Response modifier to modify the download request and the corresponding data
  • SDImageCache and SDWebImageDownloader both rely on SDImageCoder to encode and decode images, and the SDImageCoder interface has two inherited interfaces: SDProgressiveImageCoder is used to codec static diagrams and SDAnimatedImageCoder to codec GIFs. Both interfaces have several default implementations
  • The SDWebImageCachKeyFilter interface is used to modify the cache key
  • SDWebImageCacheSerializer interface used to cache data is saved to disk before, to be serialized data processing
  • The SDImageTransformer interface is used to transform images and has a bunch of default implementations
  • SDWebImageIndicator the SDWebImageIndicator interface defines the progress indicator for downloading images

Above is the personal initial understanding of SDWebImage framework, the following will be a module of the study analysis of the framework design concept, and record personal insights, if there is a mistake, welcome to comment to correct ~ grateful ~