Just a Computer Graphics Studio & My Life

很多時候在APP顯示的影像是來自網路,這時候我們會想到,若沒有網路時還想顯示影像該怎麼辦?解決方法當然就是在有網路的時候,把目標影像給儲存到手機端,下次顯示時直接取用。

然而此時出現另一個問題,就是從手機端顯示影像,居然會讓體驗變得頓頓的卡卡的,感覺十分不舒服⋯⋯解決辦法就是把影像快取起來,下次顯示時直接拿來用。

之所以頓頓卡卡是因為讀取自「硬碟」,網路下載會先儲存在「記憶體」,前者是在主程序讀取影像,因來源是硬碟,所以不僅耗時較久,連帶又會卡UI;後者在非主程序下載,當下載完才會切換到主程序顯示,來源又是在記憶體,讀取速度較快,因此就不會卡卡頓頓的。

於是我們就發展出三層級顯示影像 (Three-Level Display Image),也就是從網路(伺服器)下載影像到手機端(硬碟),再將影像快取(記憶體)起來顯示

上一篇影像快取 (Image Cache)我的用法是,從網路下載影像,接著快取起來顯示,跳過儲存到手機端這個步驟,在此我用簡單的if-else說明如何實作!

從網路下載影像的實作,我是用第三方函式庫AFNetworking;儲存到手機端的實作,可以使用NSFileManager;快取影像的實作,可以使用NSCache

這裡可以分享一下層級效果,若只用第一層網路下載影像,每當需要重新顯示的時候,又會去server要資料,快速上下滑動TableView,我們就會發現,下載跟不上顯示,使用者體驗不佳,而且server也是個負擔。

接著我們加上第二層儲存到手機端,我們只要跟server要一次影像,下次想要顯示同樣的影像,即可直接由手機端取出。不過這裡我們會發現,當影像容量比較大,顯示的過程會卡卡頓頓的,使用者體驗不太好。

最後我們加上第三層快取影像,我們只要跟手機端要一次影像,下次想要顯示同樣的影像,即可直接由快取拿出來用!這下子就沒有卡卡頓頓的情況嚕~

這裡Document表示手機端資料夾的名稱。

顯示影像順序是這樣子:

  1. Cache (memory)
  2. Document/Device (local)
  3. Server (remote)

而速度上的排名:

  1. Cache (memory)
  2. Document/Device (local)
  3. 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 & Tricks25條提高iOS App性能的技巧和訣竅

廣告

Comments on: "[iOS] 三層級顯示影像 (Three-Level Display Image)" (1)

  1. […] 想起身為iOS App工程師的自己有寫過影像快取(Image Cache) 編輯和三層級顯示影像 (Three-Level Display Image),陸續會從記憶體、硬碟、網路來讀取圖檔,因為取得速度記憶體>硬碟>網路。 […]

    按讚數

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: