Facebook iOS 應用是如何加速圖檔顯示的？

<b>本文講的是Facebook iOS 應用是如何加速圖檔顯示的？，</b>

<b></b>

你的Facebook的動态消息中充滿着一些關于你朋友、家人以及你所愛的人的照片，也許你會想要在手機上也能重溫那些場景。我們一直在尋找提升使用者體驗的方式，包括更優秀和更快的移動端體驗。為了達到這個目标，我們團隊仔細研究了如何在 iOS 裝置上更好更快得顯示照片并最終找到了一種方法，能夠讓 Facebook for iOS 的資料開銷降低10%，同時将照片加載顯示的速度提升了15%。接下來的内容是講述我們如何做到這一點的。

到目前為止， Facebook for iOS 是根據如下步驟加載你動态消息中照片：

我們先拿到這個圖檔的所有連結，然後根據這個連結來下載下傳格式為JPEG的照片資料。

至少兩個版本的圖檔被同時請求，這包括一張縮略圖和一張全尺寸的圖檔。一旦小的縮略圖下載下傳好之後，我們會先顯示小的縮略圖直到更高精度的圖檔能被用于展示。

有時候，我們會根據不同的尺寸将同一張圖檔下載下傳多次。具體的尺寸是根據裝置的型号以及圖檔在 app 中出現的場景來定義（比如在動态消息當中或者是全屏的 photo viewer ）

因為我們對于同一個圖檔下載下傳了多個尺寸的版本，是以這些不同尺寸的圖檔都會被儲存在裝置的閃存中

漸進式圖檔 Progressive JEPG（簡稱為 PJEPG ）是一種儲存多個獨立“掃描”的圖檔格式。并且圖檔的精度會随着掃描的次數增加，變的越來越清晰。當所有的掃描版本疊加之後，一張最高精度的圖檔就會被顯示出來。第一次的掃描能給予使用者第一個低品質的縮略圖。之後的每一層掃描都會使得這張圖檔的精度上升一個等級。當圖檔以PJPEG的格式被下載下傳的時候，一旦第一層掃描結束我們可以馬上在手機上為使用者顯示縮略圖。當之後的掃描被下載下傳後，我們會更新圖檔到一個更好的品質。

浏覽器對于PJEPG格式圖檔的支援在2010的時候就已經非常流行了。并且我們采用PJEPG作為圖檔格式已經有一段時間了。然而，手機端的應用們似乎還沒趕上這個潮流。舉個例子， iOS 端上還沒有漸進式處理圖檔的支援，是以我們不得不為在 iOS 上的 Facebook 開發新的方式來做到這一點。

在 Facebook for iOS 中采用漸進式的圖檔渲染有如下一些好處：

資料消耗：PJPEG使得我們可以避免下載下傳小尺寸的圖檔。

網絡連接配接：因為我們不再需要下載下傳縮略圖，我們現在每張圖檔隻需要用到一個資料連接配接來代替過去使用多個資料連接配接來下載下傳同一張圖檔。

硬碟儲存：使用PJPEG來儲存圖檔減少了應用對于硬碟的占用。

一個URL：因為我們不再需要根據不同的尺寸來多次下載下傳圖檔，是以我們可以用相同的URL辨別資源。

對于每一張圖檔，我們在三個不同的掃描層次上進行渲染。

首先，我們渲染一張能夠滿足預覽效果的圖檔，這一步是像素化的過程。

然後，我們渲染出一張肉眼看上去還不錯的圖檔。事實上，它看上去幾乎就是完美的。

最後我們渲染出一張最高品質的圖檔：達到最高分辨率的一張圖。

結果就是使用者們可以更快的看到一張棒棒的圖檔！

<a href="https://camo.githubusercontent.com/93fba832c25435a8c73f1be51859b831a936023f/68747470733a2f2f666263646e2d647261676f6e2d612e616b616d616968642e6e65742f6870686f746f732d616b2d786674312f7433392e323336352d362f31303933353937355f3831393631373739343737353833325f3838383939333031315f6e2e706e67" target="_blank"></a>

為了知道什麼叫做一張令人滿意的圖檔，我們嘗試了不同的掃描層級，并最終找到了人們操作圖檔時涉及最多的那幾個層級。我們同時也研究了不同掃描層級的圖檔與最終完整圖檔之間的相似度。我們的對比功能會擷取兩張圖檔并返還一個0到1之間的數字來表示他們的相似度。0是完全不像，1是完全一樣。下面是一些測試的結果：

<a href="https://camo.githubusercontent.com/ef7809b7cedae175406b5199c7b71599c98d74b5/68747470733a2f2f666263646e2d647261676f6e2d612e616b616d616968642e6e65742f6870686f746f732d616b2d787066312f7433392e323336352d362f31303935363930335f3737313333333138393538383135355f313034343630313430335f6e2e706e67" target="_blank"></a>

在 iOS 端上的 Facebook 采用PJPEG後資料占用減少了10%。

在用了用PJPEG之後，我們将加載一張令使用者滿意的圖檔的速度提高了15%左右。新的圖檔和原來的全精度圖檔相比幾乎沒有差別。

采用PJEPG幫助我們提高了預覽圖的加載速度。通過這種方式，雖然 CPU 比以前多用了一點資源，但是我們大大減少了需要下載下傳一張圖檔的時間。

在 Facebook ，我們仍然繼續緻力于減少使用者等待的時間，并且這隻是我們很多努力中的一小部分。即使采用PJPEG後，照片的加載速度已經變得很快了，但是我們知道還是有很多提升的空間來更好的提升使用者體驗。

很多人都在這個項目上花費了相當的時間；我們應當感謝Linji Yang, Miguel Cohnen, Kun Chen, Kirill Pugin, Edward Kandrot, Marty Greenia, Brian Cabral 和 Tomer Bar.

<b>原文釋出時間為：2016年04月20日</b>

<b>本文來自雲栖社群合作夥伴掘金，了解相關資訊可以關注掘金網站。</b>