（點(diǎn)擊上方公眾號(hào)，可快速關(guān)注）

本文轉(zhuǎn)載自［大房說(shuō)］“云思路系列”第三篇，微信號(hào)fangtalk！

我們不受雇于任何一家云廠(chǎng)商，僅僅出于對(duì)身邊項(xiàng)目、產(chǎn)品的一些場(chǎng)景和案例，分享我們的一些經(jīng)驗(yàn)和觀(guān)點(diǎn)。

我司所有產(chǎn)品，包括我司服務(wù)的客戶(hù)，我們都在推薦用七牛云。當(dāng)然除了CDN常規(guī)功能以外，我們還看中七牛提供的一些對(duì)開(kāi)發(fā)非常友好的附加功能：云端的數(shù)據(jù)處理。

例如，我們最常用的圖片處理服務(wù)。所有用戶(hù)上傳的高清圖片，直接上傳到七牛云，然后在我們產(chǎn)品的圖片元數(shù)據(jù)庫(kù)里面僅僅保存一個(gè)原圖的圖片地址。在產(chǎn)品功能的不同模塊，直接引用圖片地址，外加一些控制圖片尺寸、質(zhì)量以及裁剪模式的數(shù)據(jù)處理參數(shù)：

• 在列表等頁(yè)面，針對(duì)圖片地址，加上 ?imageView2/3/w/200/h/100/q/90，這樣，在列表頁(yè)，會(huì)對(duì)用戶(hù)上傳的圖片，在列表頁(yè)上按照 寬200px、高100px、質(zhì)量為原圖的90%進(jìn)行展示

• 在產(chǎn)品的詳情頁(yè)，針對(duì)圖片地址，加上 ?imageView2/2/w/600/q/95，這樣，在詳情頁(yè)面，會(huì)對(duì)用戶(hù)上傳的圖片，按照寬最多為600px、高自適應(yīng)、質(zhì)量95%進(jìn)行展示

采用這種方式，相比幾年前我們?cè)谧鲆曨lUGC網(wǎng)站和第一財(cái)經(jīng)網(wǎng)站時(shí)，自己做圖片的方案設(shè)計(jì)，哪怕拋開(kāi)分布式的圖片上傳和傳統(tǒng)CDN的分發(fā)，應(yīng)用程序?qū)用娴募梢埠?jiǎn)單了很多，至少不需要保存對(duì)同一圖片的多種格式的引用：

• 列表頁(yè)做好縮略圖截圖，保存一份地址

• 詳情頁(yè)，做好尺寸壓縮，再保存一份地址

• 如果以后其他頁(yè)面或者模塊，也需要其他格式和尺寸的圖片，我們需要針對(duì)所有上傳的原圖，再需要統(tǒng)統(tǒng)重新生成一份新的尺寸圖片。量大的時(shí)候要處理非常長(zhǎng)的時(shí)間才能上線(xiàn)

• 如果隨著產(chǎn)品版本的升級(jí)，適配多種屏幕，包括高清、Mobile等等，每次尺寸的變動(dòng)，都需要開(kāi)發(fā)的支持，對(duì)不何要求的圖片統(tǒng)統(tǒng)進(jìn)行一次性的處理

圖片這種實(shí)時(shí)的圖片處理服務(wù)，是我們拋開(kāi)傳統(tǒng)的CDN而選擇“新一代CDN”的一個(gè)主要原因。

前幾天和一個(gè)朋友公司的架構(gòu)師聊天，聊到了擁抱云所帶給我們的一些變化，也順便聊到了七牛的圖片處理。在我聊完我們集成七牛云的方案后，對(duì)方的架構(gòu)師問(wèn)我，實(shí)時(shí)的處理，我們發(fā)現(xiàn)訪(fǎng)問(wèn)量大的時(shí)候，圖片加載的有點(diǎn)慢（朋友公司也算是七牛的重度用戶(hù)，每個(gè)月給七牛交很多很多銀子），你們沒(méi)遇到過(guò)嗎？

我的第一反應(yīng)是，驚訝。不是說(shuō)對(duì)方質(zhì)疑云圖片慢而驚訝（世上本沒(méi)有銀彈），而是，一年上百萬(wàn)給七牛交銀子的團(tuán)隊(duì)，竟然在這些基礎(chǔ)的數(shù)據(jù)處理服務(wù)之外，沒(méi)用過(guò)七牛的“神級(jí)優(yōu)化”。

給他上一課的同時(shí)，我也意識(shí)到，看來(lái)，很多團(tuán)隊(duì)并不認(rèn)真的看服務(wù)商的文檔啊。開(kāi)發(fā)人員，往往找到滿(mǎn)足自己需求的技術(shù)說(shuō)明，就停止了，集成進(jìn)來(lái)，大功告成。這本身不是我的習(xí)慣，在真正開(kāi)始動(dòng)手寫(xiě)代碼或者做方案之前，我都會(huì)通讀所有的文檔，有一個(gè)整體的認(rèn)識(shí)，再說(shuō)怎么用。這個(gè)習(xí)慣，也是我可以發(fā)現(xiàn)很多好用的用法的終極法寶。

這也是我寫(xiě)文介紹七牛這個(gè)服務(wù)的原因，一是如果你們沒(méi)用過(guò)這些功能，大家應(yīng)該去用，如果你不是用的七牛云，你的服務(wù)商或許也有類(lèi)似的功能，天下服務(wù)一大抄嗎；二呢，鼓勵(lì)大家多看文檔，外加瀏覽完沒(méi)有文檔的管理頁(yè)面，看全、思考，再動(dòng)手，或許這個(gè)習(xí)慣可以帶給你神級(jí)開(kāi)發(fā)效率呢。

我們回到前面的問(wèn)題。實(shí)時(shí)處理，會(huì)慢嗎？當(dāng)然會(huì)，雖然七牛進(jìn)行了緩存，但是，第一次的動(dòng)態(tài)處理，不管是I/O還是CPU，都會(huì)有不小的消耗，相比靜態(tài)文件，自然會(huì)慢一點(diǎn)。所以，你可能自然而然的一個(gè)想法便是：實(shí)時(shí)處理完后永久的持久化？但是，這種圖片地址 [http://7xp4qu.com2.z0.glb./STglr2%2Favatar%2F0.jpg?imageView2/3/w/200/h/100/q/90] 怎么做持久化呢？

大家可能覺(jué)得，URL里面有了問(wèn)號(hào)，很多瀏覽器都會(huì)當(dāng)成動(dòng)態(tài)請(qǐng)求，瀏覽器 或者 客戶(hù)端緩存的效果沒(méi)那么好，外加，如果帶問(wèn)號(hào)的文件名，顯的也很齷齪。那，基于我們多年動(dòng)態(tài)請(qǐng)求偽靜態(tài)化的經(jīng)驗(yàn)，可以適用到七牛的動(dòng)態(tài)圖片處理方案上來(lái)嗎？

有了思路，再仔細(xì)研究七牛的技術(shù)文檔，以及七牛的portal，很快就會(huì)有方案。

第一步，通過(guò)七牛的管理平臺(tái)，開(kāi)啟數(shù)據(jù)處理功能：

怎么個(gè)意思呢？就是說(shuō)，通過(guò)一種變通的方案，可以把 圖片的URL [http://7xp4qu.com2.z0.glb./STglr2/avatar/0.jpg?imageView2/3/w/200/h/100/q/90] 變換成：[http://7xp4qu.com2.z0.glb./STglr2/avatar/0.jpg-thumbnail]，去掉 問(wèn)號(hào)，真正偽靜態(tài)化：

有了這個(gè)基礎(chǔ)，一方面，我們可以不修改我們的程序，就可以對(duì)用戶(hù)訪(fǎng)問(wèn)的圖片進(jìn)行業(yè)務(wù)調(diào)整，例如，今天90%的圖片質(zhì)量，明天我可以調(diào)整成99%，而不用修改程序；另一方面，這也是我們可以充分利用七牛云的數(shù)據(jù)處理，實(shí)現(xiàn)真正的靜態(tài)化的基礎(chǔ)。

第二步，修改圖片上傳的邏輯，增加一個(gè) “上傳策略”，告訴七牛云，圖片上傳完后，幫我做數(shù)據(jù)處理，然后靜態(tài)持久化：

簡(jiǎn)單來(lái)說(shuō)就是，你上傳一個(gè)圖片，之前圖片的文件名為 0.jpg，現(xiàn)在呢，上傳文件的時(shí)候，文件名還是 0.jpg，但是，加一個(gè) persistentOps 參數(shù)，告訴七牛云，上傳成功后，幫我做一下數(shù)據(jù)處理：persistentOps=imageView2/2/w/200/h100/q/90|saveas/cWJ1Y2tldDpxa2V5，其中 | 為管道操作，把上傳的圖片按照“imageView2/2/w/200/h100/q/90”的方式進(jìn)行處理，然后，保存到空間，并且以“0.jpg-thumbnail”做為文件名，cWJ1Y2tldDpxa2V5 為空間名和文件名拼接在一起base64以后的編碼。

這樣處理以后，任何上傳到七牛云的圖片，原圖保留在你的七牛云圖片空間里；在七牛沒(méi)有完成數(shù)據(jù)處理之前，用戶(hù)的對(duì)圖片的訪(fǎng)問(wèn) 0.jpg-thumbnail 由于在portal上配置了 數(shù)據(jù)處理 功能，即是沒(méi)有這個(gè)靜態(tài)圖片，七牛會(huì)進(jìn)行動(dòng)態(tài)處理并臨時(shí)緩存，當(dāng)七牛的數(shù)據(jù)處理完成后，數(shù)據(jù)處理程序會(huì)把靜態(tài)文件 0.jpg-thumbnail 保存到七牛圖片空間，后續(xù)的訪(fǎng)問(wèn)，就是真實(shí)的靜態(tài)文件訪(fǎng)問(wèn)了：

開(kāi)發(fā)效率和訪(fǎng)問(wèn)體驗(yàn)的神級(jí)提速！