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

分布式跨平臺App中美工圖片的處理、上傳下載、并發(fā)及客戶端顯示技術(shù)架構(gòu)

? ? ? ?【綜合：客戶端（內(nèi)存耗用、設(shè)備屏幕的自動適配）、服務(wù)端（上傳效率、并發(fā)時效及網(wǎng)路瓶頸、內(nèi)存）、美工工作量】

?

? ? ? ? 剛剛請教了高勇老師，結(jié)合高老師的GYListview的優(yōu)秀設(shè)計和實際應(yīng)用，就本文標(biāo)題問題得出最后的解決方案，供大伙在實際軟件架構(gòu)和設(shè)計開發(fā)時參考。

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

? ? ? ? 一、關(guān)于本博客博文《Delphi FMX正確加載圖片最大限度減少內(nèi)存占用（之一TBitmapSurface）》的本質(zhì)

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

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

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

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

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

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

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

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

? ? ? ? 通過向高老師學(xué)習(xí)和交流，結(jié)論為：

? ? ? ? 三、分布式跨平臺美工圖片處理、上傳下載、并發(fā)及客戶端顯示技術(shù)架構(gòu)概要

? ? ? ?3.1、美工設(shè)計輸出

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

? ? ? ?3.2、怎樣優(yōu)化服務(wù)端和客戶端的性能

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

? ? ? ?3.2.1、優(yōu)化設(shè)計圖片的上傳性能、優(yōu)化服務(wù)端圖片的下載性能

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

? ? ? ?3.2.2、設(shè)計圖片上傳后，服務(wù)端應(yīng)當(dāng)自動轉(zhuǎn)化原始圖片，自動生成多套圖片以適配客戶端設(shè)備屏幕需求

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

? ? ? ? 同理，在服務(wù)端，應(yīng)當(dāng)為客戶端的圖片下載，提供不同設(shè)備屏幕的適配圖片。因此需要在判斷成功上傳美工設(shè)計原圖后，執(zhí)行自適應(yīng)圖片的自動轉(zhuǎn)化和圖片文件自動生成的方法代碼。

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

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

? ? ? ?3.2.5、高勇的GYListView圖片加載函數(shù)

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

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

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

??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （下圖是加載94張菜單圖片的性能，就在一瞬間，內(nèi)存、cpu等也很優(yōu)化）

?

?

本博客相關(guān)博文：

? ? ? 1、《delphi XE關(guān)于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正確加載圖片最大限度減少內(nèi)存占用（之二TImageList）》

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

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

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

?

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

?

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。