很多時候在APP顯示的影像是來自網路，這時候我們會想到，若沒有網路時還想顯示影像該怎麼辦？解決方法當然就是在有網路的時候，把目標影像給儲存到手機端，下次顯示時直接取用。
然而此時出現另一個問題，就是從手機端顯示影像，居然會讓體驗變得頓頓的卡卡的，感覺十分不舒服⋯⋯解決辦法就是把影像快取起來，下次顯示時直接拿來用。
之所以頓頓卡卡是因為讀取自「硬碟」，網路下載會先儲存在「記憶體」，前者是在主程序讀取影像，因來源是硬碟，所以不僅耗時較久，連帶又會卡UI；後者在非主程序下載，當下載完才會切換到主程序顯示，來源又是在記憶體，讀取速度較快，因此就不會卡卡頓頓的。
於是我們就發展出三層級顯示影像 (Three-Level Display Image)，也就是從網路（伺服器）下載影像到手機端（硬碟），再將影像快取（記憶體）起來顯示！
上一篇影像快取 (Image Cache)我的用法是，從網路下載影像，接著快取起來顯示，跳過儲存到手機端這個步驟，在此我用簡單的if-else說明如何實作！
從網路下載影像的實作，我是用第三方函式庫AFNetworking；儲存到手機端的實作，可以使用NSFileManager；快取影像的實作，可以使用NSCache。
這裡可以分享一下層級效果，若只用第一層網路下載影像，每當需要重新顯示的時候，又會去server要資料，快速上下滑動TableView，我們就會發現，下載跟不上顯示，使用者體驗不佳，而且server也是個負擔。
接著我們加上第二層儲存到手機端，我們只要跟server要一次影像，下次想要顯示同樣的影像，即可直接由手機端取出。不過這裡我們會發現，當影像容量比較大，顯示的過程會卡卡頓頓的，使用者體驗不太好。
最後我們加上第三層快取影像，我們只要跟手機端要一次影像，下次想要顯示同樣的影像，即可直接由快取拿出來用！這下子就沒有卡卡頓頓的情況嚕～
這裡Document表示手機端資料夾的名稱。
顯示影像順序是這樣子：
- Cache (memory)
- Document/Device (local)
- Server (remote)
而速度上的排名：
- Cache (memory)
- Document/Device (local)
- Server (remote)
/**
Theme: Three-Level Display Image
IDE: Xcode 5
Language: Objective C
Date: 102/12/21 (The anniversary of end of the world)
Author: HappyMan
Blog: https://cg2010studio.wordpress.com/
*/
// 設定image
if (找cache){//如果cache有
// Set the image from the cache
}
else{//如果cache沒有
if (找document) {//如果document有
// Set the image from document
// Add the image to the cache
}
else {//如果document沒有
// Download the image from server
}
}
實際跑起來效果令我很滿意！
參考：利用NSCache提升效率、25 iOS App Performance Tips & Tricks、25條提高iOS App性能的技巧和訣竅。
逍遙文工作室 
Comments on: "[iOS] 三層級顯示影像 (Three-Level Display Image)" (1)
[…] 想起身為iOS App工程師的自己有寫過影像快取(Image Cache) 編輯和三層級顯示影像 (Three-Level Display Image)，陸續會從記憶體、硬碟、網路來讀取圖檔，因為取得速度記憶體＞硬碟＞網路。 […]
讚讚