Delphi FMX正確設計和加載圖片滿足分布式跨平臺App的性能需求

分布式跨平臺App中美工圖片的處理、上傳下載、并發及客戶端顯示技術架構

? ? ? ?【綜合：客戶端（內存耗用、設備屏幕的自動適配）、服務端（上傳效率、并發時效及網路瓶頸、內存）、美工工作量】

?

? ? ? ? 剛剛請教了高勇老師，結合高老師的GYListview的優秀設計和實際應用，就本文標題問題得出最后的解決方案，供大伙在實際軟件架構和設計開發時參考。

? ? ? ? 這個標題涉及的話題，看似很普通，也很平常，但如果App中包含有大量的產品，每個產品配有不同圖片（類似電商平臺的圖片加載效果），若不通盤考慮軟件的設計和架構，那么做出的服務器程序和客戶端程序，從“娘胎”里羊水就沒有孵化好，整體運行性能可能就不如人意啦，特別是高并發時，尤為明顯。?

? ? ? ? 一、關于本博客博文《Delphi FMX正確加載圖片最大限度減少內存占用（之一TBitmapSurface）》的本質

? ? ? ?1.1、Delphi FMX中，TBitmap.LoadFromFile和TBitmap.LoadFromStream，是將外部圖片按照美工設計時的原始像素尺寸大小，直接載入內存的，直接使用，會造成意想不到的大內存消耗的可能性，這取決于美工設計的像素尺寸，圖越大內存消耗就愈大，反之就越小。

? ? ? ?1.2、Delphi FMX中，TBitmap還提供了一個縮略圖函數：TBitmap.LoadThumbnailFromFile，其本質同《Delphi FMX正確加載圖片最大限度減少內存占用（之一TBitmapSurface）》所述方法相同。

? ? ? ?其函數原型申明為：? ? procedure LoadThumbnailFromFile(const AFileName: string; const AFitWidth, AFitHeight: Single;
? ? ? const UseEmbedded: Boolean = True);其中：參數 const AFitWidth, AFitHeight: Single;以新的“布局方式=TAlign.Fit”的自適應寬高比例重新縮放圖片后，載入到內存。其中“自適應寬高比例縮放”的原理為：按照設備屏幕物理分辨率的短邊像素值為基準（即TDisplayMetrics.PhysicalScreenSize.cx），將美工設計原圖按照寬高像素比例縮放，詳見上文描述即代碼實現。

? ? ? ? 但為了TBitmap自適應設備屏幕及圖片加載后的顯示視覺精度，不能簡單地使用縮略圖函數，而應當美工做特別的處理。

? ? ? ? 二、為了自適應設備屏幕同時保證顯示清晰度和系統性能，需要美工做特殊處理

? ? ? ? 大家過去在BAT上申請項目時，可能經常看到如此字樣：“建議上傳尺寸108px*100px，最大不超過5M的圖片”，什么意思呢，就是說：美工設計的圖片的磁盤空間不超過5M【潛臺詞是在限制設計輸出的像素尺寸的最大值AMaxSizeLimit，本質即在控制：①上傳到服務器端的CPU時間占用、②并發的網路瓶頸、③服務器端圖片位圖轉化的內存耗用CanvasClass.GetAttribute(TCanvasAttribute.MaxBitmapSize)】；④圖片的像素尺寸最小應當為108*100，而且應當以此為寬高比例，才能達到合格的顯示清晰度。

? ? ? ? 還有一個Case就是，前些年在客戶項目中的增值服務：為客戶同時交付“淘寶店裝修”，發現淘寶后臺只需要美工設計并提交一套尺寸規范的圖片組，上傳即可。⑤現在看來，淘寶服務端在執行什么程序處理，否則，一套圖片是不可能同時適配多樣化的設備屏幕的顯示需求的。

? ? ? ? 那么，既要保證顯示的清晰度，又要達到上述5個控制指標，最佳的架構方案是什么呢？

? ? ? ? 通過向高老師學習和交流，結論為：

? ? ? ? 三、分布式跨平臺美工圖片處理、上傳下載、并發及客戶端顯示技術架構概要

? ? ? ?3.1、美工設計輸出

? ? ? ? 根據實際應用需要，美工應當考慮設備屏幕的最大和最小應用區間范圍，以最大的設備屏幕物理尺寸為基準設計一套圖片，從而滿足實際應用中，可能發生的各種高頻度設備屏幕的多樣性自適應適配，達到理想的顯示效果。

? ? ? ?3.2、怎樣優化服務端和客戶端的性能

? ? ? ? 需要控制的5項性能指標，見上述二、，這里不再贅述。

? ? ? ?3.2.1、優化設計圖片的上傳性能、優化服務端圖片的下載性能

? ? ? ? 考慮到服務端的并發及網路瓶頸，上傳和下載，都需要高性能、高效率，盡量減少CPU和內存的開銷。請參考：《Delphi處理高速文件上傳下載的代碼及思路》。

? ? ? ?3.2.2、設計圖片上傳后，服務端應當自動轉化原始圖片，自動生成多套圖片以適配客戶端設備屏幕需求

? ? ? ? 這種類似的架構，大家在用Delphi開發Android客戶端應用，在Deployment中發布好自己設計的圖片資源文件，在Deploy工程時，已經非常熟悉了，可依據市面上主流設備的屏幕尺寸，進行規劃：

? ? ? ? 同理，在服務端，應當為客戶端的圖片下載，提供不同設備屏幕的適配圖片。因此需要在判斷成功上傳美工設計原圖后，執行自適應圖片的自動轉化和圖片文件自動生成的方法代碼。

? ? ? ?3.2.3、下載圖片前先判斷客戶端設備屏幕物理分辨率短邊像素值，作為參數告知服務端函數，以適配下載不同規格的圖片

? ? ? ?3.2.4、客戶端以正確的AMaxSizeLimit，加載并顯示圖片，以達到最低的內存耗用和最佳的顯示清晰度。

? ? ? ?3.2.5、高勇的GYListView圖片加載函數

? ? ? ? 已充分考慮了縮略圖和原始圖片緩存（方便查看原圖或詳細圖時直接使用），大家可以放心使用。

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （上面大量縮略圖和圖片，加載并顯示，驗證過了，無任何問題）

? ? ? ?3.2.6、高勇的三層中間件，完全能勝任分布式高并發需求

??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （下圖是加載94張菜單圖片的性能，就在一瞬間，內存、cpu等也很優化）

?

?

本博客相關博文：

? ? ? 1、《delphi XE關于Android四大組件之ContentProvider：案例delphi XE加載Android手機圖片的效率》

? ? ??https://blog.csdn.net/pulledup/article/details/105642380

? ? ? 2、《Delphi處理高速文件上傳下載的代碼及思路》

? ? ??https://blog.csdn.net/pulledup/article/details/108660481

? ? ? 3、《Delphi FMX正確加載圖片最大限度減少內存占用（之二TImageList）》

? ? ??https://blog.csdn.net/pulledup/article/details/108979086

? ? ? 4、《Delphi FMX正確加載圖片最大限度減少內存占用（之一TBitmapSurface）》

? ? ??https://blog.csdn.net/pulledup/article/details/108935897

?

喜歡的話，就在下面點個贊、收藏就好了，方便看下次的分享：

?

?

總結

以上是生活随笔為你收集整理的Delphi FMX正确设计和加载图片满足分布式跨平台App的性能需求-分布式跨平台App中美工图片的处理、上传下载、并发及客户端显示技术架构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。