請(qǐng)你說(shuō)說(shuō)SDwebImage這個(gè)框架的內(nèi)部實(shí)現(xiàn)原理苏研?
當(dāng)你看到這句話的時(shí)候菊霜,是不是很熟悉奠衔,有可能你在博客上看到一些關(guān)于SDwebImage原理的詳解,也大概記憶了一些標(biāo)準(zhǔn)的答案戚绕,但是小編今天要說(shuō)的網(wǎng)上那些解讀都太膚淺了纹坐,如果面試官是個(gè)高手,深入問(wèn)幾句舞丛,也許你就熄火了耘子。
首先我們要了解SDwebImage框架為什么出現(xiàn)果漾?
因?yàn)樵谝粋€(gè)App中多圖片下載是一個(gè)耗時(shí)操作,也是消耗內(nèi)存的操作谷誓,如果讓下載過(guò)的圖片不重復(fù)下載绒障,當(dāng)面臨這些的問(wèn)題,該如何解決捍歪?
在SDwebImage這個(gè)框架還沒(méi)有出現(xiàn)之前户辱,一些比較優(yōu)秀的互聯(lián)網(wǎng)公司一些優(yōu)秀App他們是怎么處理這個(gè)問(wèn)題的呢?
@interface ViewController ()
/** tableView的數(shù)據(jù)源 */
@property (nonatomic, strong) NSArray *apps;
@end
@implementation ViewController
pragma mark ----------------------
pragma mark lazy loading
-(NSArray *)apps
{
if (_apps == nil) {
//字典數(shù)組
NSArray *arrayM = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle]pathForResource:@"apps.plist" ofType:nil]];
//字典數(shù)組---->模型數(shù)組
NSMutableArray *arrM = [NSMutableArray array];
for (NSDictionary *dict in arrayM) {
[arrM addObject:[XMGAPP appWithDict:dict]];
}
_apps = arrM;
}
return _apps;
}
pragma mark ----------------------
pragma mark UITableViewDatasource
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.apps.count;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *ID = @"app";
//1.創(chuàng)建cell
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
//2.設(shè)置cell的數(shù)據(jù)
//2.1 拿到該行cell對(duì)應(yīng)的數(shù)據(jù)
XMGAPP *appM = self.apps[indexPath.row];
//2.2 設(shè)置標(biāo)題
cell.textLabel.text = appM.name;
//2.3 設(shè)置子標(biāo)題
cell.detailTextLabel.text = appM.download;
//2.4 設(shè)置圖標(biāo)
NSURL *url = [NSURL URLWithString:appM.icon];
NSData *imageData = [NSData dataWithContentsOfURL:url];
UIImage *image = [UIImage imageWithData:imageData];
cell.imageView.image = image;
NSLog(@"%zd-----",indexPath.row);
//3.返回cell
return cell;
}
假設(shè)我們直接這樣去下載圖片费封,你可以嘗試寫(xiě)個(gè)小個(gè)demo焕妙,它會(huì)存在兩個(gè)問(wèn)題:
①UI很不流暢
②圖片重復(fù)下載
①當(dāng)UI不流暢蒋伦,我們應(yīng)該怎么解決呢弓摘?
可以開(kāi)子線程下載圖片,然后回到主線程刷新UI痕届。
②圖片重復(fù)下載韧献,這個(gè)又該如何處理?
先把之前已經(jīng)下載過(guò)的圖片保存起來(lái),我們可以想到用一個(gè)字典講它存儲(chǔ)起來(lái)研叫。這個(gè)時(shí)候又會(huì)存在存在一個(gè)問(wèn)題锤窑,如果只是單純用一個(gè)字典去存儲(chǔ),當(dāng)App退出的時(shí)候嚷炉,下次進(jìn)入還是重新發(fā)起請(qǐng)求渊啰,因?yàn)槟阒皇菍D片進(jìn)行內(nèi)存緩存,當(dāng)App退出的時(shí)候申屹,就會(huì)釋放掉绘证。這個(gè)時(shí)候,我們不僅僅要做內(nèi)存緩存哗讥,還要做磁盤(pán)緩存嚷那。
這個(gè)時(shí)候我們完善后的代碼是這樣的
import "ViewController.h"
import "XMGAPP.h"
@interface ViewController ()
/** tableView的數(shù)據(jù)源 /
@property (nonatomic, strong) NSArray apps;
/ 內(nèi)存緩存 /
@property (nonatomic, strong) NSMutableDictionary images;
/ 隊(duì)列 /
@property (nonatomic, strong) NSOperationQueue queue;
/ 操作緩存 */
@property (nonatomic, strong) NSMutableDictionary *operations;
@end
@implementation ViewController
pragma mark ----------------------
pragma mark lazy loading
-(NSOperationQueue *)queue
{
if (_queue == nil) {
_queue = [[NSOperationQueue alloc]init];
//設(shè)置最大并發(fā)數(shù)
_queue.maxConcurrentOperationCount = 5;
}
return _queue;
}
-(NSMutableDictionary *)images
{
if (_images == nil) {
_images = [NSMutableDictionary dictionary];
}
return _images;
}
-(NSArray *)apps
{
if (_apps == nil) {
//字典數(shù)組
NSArray *arrayM = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle]pathForResource:@"apps.plist" ofType:nil]];
//字典數(shù)組---->模型數(shù)組
NSMutableArray *arrM = [NSMutableArray array];
for (NSDictionary *dict in arrayM) {
[arrM addObject:[XMGAPP appWithDict:dict]];
}
_apps = arrM;
}
return _apps;
}
-(NSMutableDictionary *)operations
{
if (_operations == nil) {
_operations = [NSMutableDictionary dictionary];
}
return _operations;
}
pragma mark ----------------------
pragma mark UITableViewDatasource
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.apps.count;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *ID = @"app";
//1.創(chuàng)建cell
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
//2.設(shè)置cell的數(shù)據(jù)
//2.1 拿到該行cell對(duì)應(yīng)的數(shù)據(jù)
XMGAPP *appM = self.apps[indexPath.row];
//2.2 設(shè)置標(biāo)題
cell.textLabel.text = appM.name;
//2.3 設(shè)置子標(biāo)題
cell.detailTextLabel.text = appM.download;
//2.4 設(shè)置圖標(biāo)
//先去查看內(nèi)存緩存中該圖片時(shí)候已經(jīng)存在,如果存在那么久直接拿來(lái)用,否則去檢查磁盤(pán)緩存
//如果有磁盤(pán)緩存,那么保存一份到內(nèi)存,設(shè)置圖片,否則就直接下載
//1)沒(méi)有下載過(guò)
//2)重新打開(kāi)程序
UIImage *image = [self.images objectForKey:appM.icon];
if (image) {
cell.imageView.image = image;
NSLog(@"%zd處的圖片使用了內(nèi)存緩存中的圖片",indexPath.row) ;
}else
{
//保存圖片到沙盒緩存
NSString *caches = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject];
//獲得圖片的名稱,不能包含/
NSString *fileName = [appM.icon lastPathComponent];
//拼接圖片的全路徑
NSString *fullPath = [caches stringByAppendingPathComponent:fileName];
//檢查磁盤(pán)緩存
NSData *imageData = [NSData dataWithContentsOfFile:fullPath];
//廢除
imageData = nil;
if (imageData) {
UIImage *image = [UIImage imageWithData:imageData];
cell.imageView.image = image;
NSLog(@"%zd處的圖片使用了磁盤(pán)緩存中的圖片",indexPath.row) ;
//把圖片保存到內(nèi)存緩存
[self.images setObject:image forKey:appM.icon];
// NSLog(@"%@",fullPath);
}else
{
//檢查該圖片時(shí)候正在下載,如果是那么久什么都捕捉,否則再添加下載任務(wù)
NSBlockOperation *download = [self.operations objectForKey:appM.icon];
if (download) {
}else
{
//先清空cell原來(lái)的圖片
cell.imageView.image = [UIImage imageNamed:@"Snip20160221_306"];
download = [NSBlockOperation blockOperationWithBlock:^{
NSURL *url = [NSURL URLWithString:appM.icon];
NSData *imageData = [NSData dataWithContentsOfURL:url];
UIImage *image = [UIImage imageWithData:imageData];
NSLog(@"%zd--下載---",indexPath.row);
//容錯(cuò)處理
if (image == nil) {
[self.operations removeObjectForKey:appM.icon];
return ;
}
//演示網(wǎng)速慢的情況
//[NSThread sleepForTimeInterval:3.0];
//把圖片保存到內(nèi)存緩存
[self.images setObject:image forKey:appM.icon];
//NSLog(@"Download---%@",[NSThread currentThread]);
//線程間通信
[[NSOperationQueue mainQueue] addOperationWithBlock:^{
//cell.imageView.image = image;
//刷新一行
[self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationLeft];
//NSLog(@"UI---%@",[NSThread currentThread]);
}];
//寫(xiě)數(shù)據(jù)到沙盒
[imageData writeToFile:fullPath atomically:YES];
//移除圖片的下載操作
[self.operations removeObjectForKey:appM.icon];
}];
//添加操作到操作緩存中
[self.operations setObject:download forKey:appM.icon];
//添加操作到隊(duì)列中
[self.queue addOperation:download];
}
}
}
//3.返回cell
return cell;
}
-(void)didReceiveMemoryWarning
{
[self.images removeAllObjects];
//取消隊(duì)列中所有的操作
[self.queue cancelAllOperations];
}
//1.UI很不流暢 --- > 開(kāi)子線程下載圖片
//2.圖片重復(fù)下載 ---> 先把之前已經(jīng)下載的圖片保存起來(lái)(字典)
//內(nèi)存緩存--->磁盤(pán)緩存
//3.圖片不會(huì)刷新--->刷新某行
//4.圖片重復(fù)下載(圖片下載需要時(shí)間,當(dāng)圖片還未完全下載之前,又要重新顯示該圖片)
//5.數(shù)據(jù)錯(cuò)亂 ---設(shè)置占位圖片
/*
Documents:會(huì)備份,不允許
Libray
Preferences:偏好設(shè)置 保存賬號(hào)
caches:緩存文件
tmp:臨時(shí)路徑(隨時(shí)會(huì)被刪除)
*/
這里小編認(rèn)為有兩個(gè)問(wèn)題比較重要。
①下載這個(gè)過(guò)程是很重要杆煞,一些細(xì)心的面試官會(huì)問(wèn)你多圖片下載是怎么實(shí)現(xiàn)的魏宽?
先判斷放Operation的數(shù)組里,是否存在下載當(dāng)前的任務(wù)决乎,如果存在了就什么都不做队询,如果沒(méi)有再初始化一個(gè)Operation任務(wù),然后放到數(shù)組里构诚。并且放到操作隊(duì)列中去執(zhí)行下載任務(wù)蚌斩。當(dāng)圖片下載完了,把該Operation任務(wù)從該數(shù)組移除唤反。
②面試官會(huì)問(wèn)你凳寺,圖片是如何進(jìn)行內(nèi)存緩存的鸭津?將圖片存在字典里面,它的value是UIImage,但是key是什么呢肠缨?
這個(gè)key是圖片的url逆趋,比如一張圖片的url是http://p16.qhimg.com/dr/48_48_/438ae9d2fbb.png,那么key一定是從這個(gè)url字符串去做文章晒奕,因?yàn)樯澈新窂街?表現(xiàn)文件的層級(jí)關(guān)系闻书,所以我們可以截圖url字符串的后部分作為key就可以了。
這個(gè)多圖片的實(shí)現(xiàn)方式脑慧,差不多就是SDwebImage這個(gè)框架的前世魄眉。
那么SDwebImage的今生已經(jīng)很成熟,大家也用得很多闷袒,但是很多人可能只用過(guò)它來(lái)設(shè)置UIImageView坑律,其實(shí)SDwebImage不僅可以設(shè)置UIImageView,還可以設(shè)置UIButton囊骤,并且可以播放.gif圖片晃择,或者你想單獨(dú)拿到UIIamge也是可以的。
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
[self download];
}
//1.下載圖片且需要獲取下載進(jìn)度
//內(nèi)存緩存&磁盤(pán)緩存
-(void)download
{
[self.imageView sd_setImageWithURL:[NSURL URLWithString:@"http://img4.duitang.com/uploads/blog/201310/18/20131018213446_smUw4.thumb.600_0.jpeg"] placeholderImage:[UIImage imageNamed:@"Snip20160221_306"] options:SDWebImageCacheMemoryOnly | SDWebImageProgressiveDownload progress:^(NSInteger receivedSize, NSInteger expectedSize) {
} completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
switch (cacheType) {
case SDImageCacheTypeNone:
NSLog(@"直接下載");
break;
case SDImageCacheTypeDisk:
NSLog(@"磁盤(pán)緩存");
break;
case SDImageCacheTypeMemory:
NSLog(@"內(nèi)存緩存");
break;
default:
break;
}
}];
NSLog(@"%@",[NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject]);
}
//2.只需要簡(jiǎn)單獲得一張圖片,不設(shè)置
//內(nèi)存緩存&磁盤(pán)緩存
-(void)download2
{
[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:@"http://img4.duitang.com/uploads/blog/201310/18/20131018213446_smUw4.thumb.600_0.jpeg"] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
NSLog(@"%f",1.0 * receivedSize / expectedSize);
} completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
//得到圖片
self.imageView.image = image;
}];
}
//3.不需要任何的緩存處理
//沒(méi)有做任何緩存處理|
-(void)download3
{
//data:圖片的二進(jìn)制數(shù)據(jù)
[[SDWebImageDownloader sharedDownloader] downloadImageWithURL:[NSURL URLWithString:@"http://img4.duitang.com/uploads/blog/201310/18/20131018213446_smUw4.thumb.600_0.jpeg"] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
} completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished) {
[[NSOperationQueue mainQueue]addOperationWithBlock:^{
self.imageView.image = image;
}];
}];
}
//4.播放Gif圖片
-(void)gif
{
NSLog(@"%s",func);
//self.imageView.image = [UIImage imageNamed:@"39e805d5ad6eddc4f80259d23bdbb6fd536633ca"];
UIImage *image = [UIImage sd_animatedGIFNamed:@"麻雀"];
self.imageView.image = image;
}
-(void)type
{
NSData *imageData = [NSData dataWithContentsOfFile:@"/Users/xiaomage/Desktop/Snip20160221_306.png"];
NSString *typeStr = [NSData sd_contentTypeForImageData:imageData];
NSLog(@"%@",typeStr);
}
SDwebImage中有一個(gè)關(guān)于options枚舉也物,這個(gè)枚舉功能很強(qiáng)大宫屠,假設(shè)后臺(tái)給你URL圖片地址,這個(gè)時(shí)候你將它緩存起來(lái)滑蚯,但是URL的圖片地址已經(jīng)把圖片更換了浪蹂,這個(gè)啟動(dòng)APP你顯示的還是以前那張圖片,這個(gè)你可以設(shè)置SDwebImage中options的枚舉值為SDWebImageRefreshCached告材,它可以刷新本地緩存坤次。這一點(diǎn)很強(qiáng)大。
SDwebImage跟普通多圖片下載不同之處创葡?
①這里SDwebImage跟上面多圖片下載有一點(diǎn)不同的是浙踢,SDwebImage中的沙盒緩存圖片的命名方式為對(duì)該圖片的URL進(jìn)行MD5加密,然后得到一個(gè)新的字符串設(shè)置為key的灿渴。
②多圖片下載的時(shí)候我們用的NSDictionary字典進(jìn)行緩存的洛波,但是SDwebImage使用了NSCache類(lèi)這個(gè)類(lèi)進(jìn)行緩存,NSCache這個(gè)類(lèi)有一個(gè)屬性totalCostLimit可以設(shè)置總成本數(shù)骚露,如果總成本數(shù)是5 ,如果發(fā)現(xiàn)存的數(shù)據(jù)超過(guò)中成本那么會(huì)自動(dòng)回收之前的對(duì)象蹬挤,不需要我們手動(dòng)移除。自動(dòng)管理內(nèi)存緩存數(shù)量和內(nèi)存大小棘幸。
import "ViewController.h"
@interface ViewController ()<NSCacheDelegate>
/** 注釋 */
@property (nonatomic, strong) NSCache *cache;
@end
@implementation ViewController
-(NSCache *)cache
{
if (_cache == nil) {
_cache = [[NSCache alloc]init];
_cache.totalCostLimit = 5;//總成本數(shù)是5 ,如果發(fā)現(xiàn)存的數(shù)據(jù)超過(guò)中成本那么會(huì)自動(dòng)回收之前的對(duì)象
_cache.delegate = self;
}
return _cache;
}
//存數(shù)據(jù)
-
(IBAction)addBtnClick:(id)sender
{
//NSCache的Key只是對(duì)對(duì)象進(jìn)行Strong引用焰扳,不是拷貝(和可變字典的區(qū)別)
for (NSInteger i = 0; i<10; i++) {
NSData *data = [NSData dataWithContentsOfFile:@"/Users/xiaomage/Desktop/Snip20160221_38.png"];//cost:成本 [self.cache setObject:data forKey:@(i) cost:1]; NSLog(@"存數(shù)據(jù)%zd",i);
}
}
//取數(shù)據(jù)
- (IBAction)checkBtnClick:(id)sender
{
NSLog(@"+++++++++++++++");
for (NSInteger i = 0; i<10; i++) {
NSData *data = [self.cache objectForKey:@(i)];
if (data) {
NSLog(@"取出數(shù)據(jù)%zd",i);
}
}
}
//刪除數(shù)據(jù)
- (IBAction)removeBtnClick:(id)sender
{
[self.cache removeAllObjects];
}
pragma mark ----------------------
pragma mark NSCacheDelegate
//即將回收對(duì)象的時(shí)候調(diào)用該方法
-(void)cache:(NSCache *)cache willEvictObject:(id)obj
{
NSLog(@"回收%zd",[obj length]);
}