淘宝UWP--自定义图片缓存

一、应用场景

在淘宝应用首页，会有很多张图片，而这些首页图片不会经常改变，所以就需要缓存下来。这样就不必每次都从网络获取。

二、比较对象

1.系统缓存

对于系统缓存，我们不需要做什么处理。只需要把网络图片的URL赋值给Image控件就行了。这样系统就会在每次需要用到图片的时候，有限查找缓存里有没有之前下载好的。

2.自建缓存区域

自建缓存不给Image控件赋URL，而是把图片DownLoad下来，生成一个bitmap，然后把bitmap赋值给Image。同时将这个bitmap存储下来。当下次要用到这幅图的时候，就直接从存储的位置找到这幅图。

三、自建缓存方法

下边这段代码将uri[]数组中的图片下载下来，然后通过WriteToFile()函数将图片保存到本地，同时，记下存储的文件名。

SoftwareBitmap sb = await DownloadImage(uri[i]);
if (sb != null)
{
　　//sb = await ReadFromFile(fileName[i]);
　　SoftwareBitmapSource source = new SoftwareBitmapSource();
　　await source.SetBitmapAsync(sb);
　　this.insideImage.Source = source;
　　sb = await DownloadImage(uri[i]);
　　fileName[i] = await WriteToFile(sb);
}

当你需要使用图片的时候，使用下列代码，通过ReadFromFile()函数将图片读取出来就行了。

for (int i = 0; i < 50; i++)
{
　　//SoftwareBitmap sb = await DownloadImage(uri[i]);
　　SoftwareBitmap sb = await ReadFromFile(fileName[i]);
　　SoftwareBitmapSource source = new SoftwareBitmapSource();
　　await source.SetBitmapAsync(sb);
　　this.insideImage.Source = source;
　　//source.Dispose();
}

四、效率对比

下边我通过对比两种缓存机制发现各有用武之地。

1.对于几百K到几兆的大图片，系统缓存有速度优势。

2.对于几K到几十K的小图片，自建缓存区有速度优势。

测试背景1：三张大图片，循环33次（共99次）

图片大小：338k 618k 1810k

PC测试
系统缓存（CPU周期）	3066584	3058505	3079367	3078989	3076976
自建缓存（CPU周期）	53669280	51842991	52839051	52078772	52305373

Phone测试
系统缓存（CPU周期）	31852799	32008575	32200748	31970601	31839003
自建缓存（CPU周期）	741909215	750950455	765863510	760865505	781048686

结论一：对于几百K到几兆的大图片，系统缓存有速度优势。

测试背景2：三张小图片，循环33次（共99次）

图片大小：3k 6k 60k

PC测试

系统缓存（CPU周期）	3057284	3057637	3080880	3063350	3059105
自建缓存（CPU周期）	1316247	1318369	1364584	1333684	1362956

Phone测试

系统缓存（CPU周期）	32085084	31751734	31744715	31852230	32064768
自建缓存（CPU周期）	27114317	26041012	26821794	27365796	30211258

结论二：对于几K到几十K的小图片，自建缓存区有速度优势。

 手机淘宝项目测试数据：

测试背景：50张小图片，循环一次（共50次）

系统缓存	CPU周期	23689650	21589548	25409150	25186302	23121251
	RAM	51	52	50	52	52
自建缓存	CPU周期	3186761	2892837	2963193	2942235	2741501
	RAM	61	63	61	60	59

 PS：RAM占用是峰值，稳定后两种方式RAM占用相同。

五、测试方法

通过给一个Image控件赋值，来看到效果。

1、系统缓存

系统缓存测试不能通过直接改变url的方式，因为系统缓存是异步的，他不会等一个图片加载好再加载另一个图，而是直接忽略了之前的改变。

private async void test1()
{
　　stopwatch.Reset();
　　stopwatch.Start();
　　BitmapImage bi = new BitmapImage();
　　bi.UriSource = new Uri(uri[0]);
　　this.insideImage.Source = bi;
 } 

private void insideImage_ImageOpened(object sender, RoutedEventArgs e)
{
　　times++;
　　if (times == 50)
　　{
　　　　stopwatch.Stop();
　　　　textBox.Text = "任务"+testnum.ToString()+"用时：" + stopwatch.ElapsedTicks + ".";
　　　　return;
　　}

　　BitmapImage bi = new BitmapImage();
　　bi.UriSource = new Uri(uri[times]);
　　this.insideImage.Source = bi;
 } 

 2、自建缓存

private async void test2()
{
　　stopwatch.Reset();
　　stopwatch.Start();
　　for (int i = 0; i < 50; i++)
　　{
　　　　//SoftwareBitmap sb = await DownloadImage(uri[i]);
　　　　SoftwareBitmap sb = await ReadFromFile(fileName[i]);
　　　　SoftwareBitmapSource source = new SoftwareBitmapSource();
　　　　await source.SetBitmapAsync(sb);
　　　　if (i % 3 == 0)
　　　　{
　　　　　　this.insideImage.Source = source;
　　　　}
　　　　else if (i % 3 == 1)
　　　　{
　　　　　　this.insideImage1.Source = source;
　　　　}
　　　　else if (i % 3 == 2)
　　　　{
　　　　　　this.insideImage2.Source = source;
　　　　}
　　　　//source.Dispose();
　　}
　　stopwatch.Stop();
　　textBox.Text = "任务" + testnum.ToString() + "用时：" + stopwatch.ElapsedTicks + ".";
}

附:关键代码代码

ReadFromFile()函数通过文件名读取图片 ，特别注意这句话

SoftwareBitmapsoftwareBitmap = awaitdecoder.GetSoftwareBitmapAsync(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied);

 一定要加上编码方式，不然会报错。

public async Task<SoftwareBitmap> ReadFromFile(string filename)
{
　　StorageFile file = await _localFolder.CreateFileAsync(filename, CreationCollisionOption.OpenIfExists);
　　//var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri( filename));
　　using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read))
　　{
　　　　// Create the decoder from the stream
　　　　BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);
　　　　// Get the SoftwareBitmap representation of the file
　　　　SoftwareBitmap softwareBitmap = await decoder.GetSoftwareBitmapAsync(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied);
　　　　return softwareBitmap;
　　}
}

 WriteToFile()函数将bitmap写入存储区

public async Task<string> WriteToFile(SoftwareBitmap softwareBitmap)
{
　　string fileName = Path.GetRandomFileName();

　　if (softwareBitmap != null)
　　{
　　　　// save image file to cache
　　　　StorageFile file = await _localFolder.CreateFileAsync(fileName, CreationCollisionOption.OpenIfExists);
　　　　using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))
　　　　{
　　　　　　BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream);
　　　　　　encoder.SetSoftwareBitmap(softwareBitmap);
　　　　　　await encoder.FlushAsync();
　　}
}

　　return fileName;
 } 

DownloadImage()函数通过url下载图片，返回bitmap

private async Task<SoftwareBitmap> DownloadImage(string url)
{
　　try
　　{
　　　　HttpClient hc = new HttpClient();
　　　　HttpResponseMessage resp = await hc.GetAsync(new Uri(url));
　　　　resp.EnsureSuccessStatusCode();
　　　　IInputStream inputStream = await resp.Content.ReadAsInputStreamAsync();
　　　　IRandomAccessStream memStream = new InMemoryRandomAccessStream();
　　　　await RandomAccessStream.CopyAsync(inputStream, memStream);
　　　　BitmapDecoder decoder = await BitmapDecoder.CreateAsync(memStream);
　　　　SoftwareBitmap softBmp = await decoder.GetSoftwareBitmapAsync(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied);
　　　　return softBmp;
　　}
　　catch (Exception ex)
　　{
　　　　return null;
　　}
}