前端圖片合併方案調研

weakish發表於2014-04-28
前端

介紹

通過產品線資料分析，發現70%左右的圖片為小於300K的圖片，50%左右為小於100K的圖片，因此調研前端圖片合併方案是否有利於提高圖片批量上傳速度。之前做過的前端ZIP方案也是類似的思路。

工具

  • 使用Network Link Conditioner模擬各種網路環境；
  • 使用sprites/index.html測試前端合併的效率；
  • 使用zip/index.html中的NOZIP方案測試無合併的效率；

前端合併方案

  • 採用Canvas將小圖片拼接到單列上得到合併後的圖片；
  • 將合併後的圖片傳送到伺服器端；

測試維度

  • 網路環境: 10K 100K 300K 500K無網路延時以及50K帶100ms網路延時；
  • 圖片大小: 100K
  • 併發數：1 - 5
  • 圖片數量：50

資料

*說明：未計算伺服器端將合併後圖片拆解所需時間；

speed = 256 K/S delay = 5ms(ADSL)

T               1       2       3       4       5
Sprites(ms)     148563  146993  146910  147149  147957
Normal(ms)      203878  184155  187438  183793  183533
%               28      20      22      20      19

speed = 10 M/S delay = 1ms(WIFI Good Connectivity)

T               1       2       3       4       5
Sprites(ms)     2356    1495    1264    1202    1208
Normal(ms)      3322    1891    1524    1290    1221
%               29      20      17      7       1

speed = 500 K/S delay = 0

T               1       2       3       4       5
Sprites(ms)     8904    8622    8471    8434    8444
Normal(ms)      11326   10770   10183   10980   10181
%               21      20      17      23      17

speed = 300 K/S delay = 0

T               1       2       3       4       5
Sprites(ms)     14377   14352   13951   13927   13924
Normal(ms)      17636   16961   16972   16975   17001
%               18      15      17      18      18

speed = 100 K/S delay = 0

T               1       2       3       4       5
Sprites(ms)     41549   42185   41973   -       -
Normal(ms)      51796   53401   51758   -       -
%               20      21      19      -       -

speed = 10 K/S delay = 0

T               1       2       3       4       5
Sprites(ms)     414722  -       -       -       -
Normal(ms)      538864  -       -       -       -
%               23      -       -       -       -

speed = 50 K/S delay = 100ms

T               1       2       3       4       5
Sprites(ms)     90348   88913   88996   90615   -
Normal(ms)      139343  125771  110348  109680  -
%               35      29      20      17      -

分析

  • 併發（2-5個請求）與不併發（1個請求）在高速和低速網路環境下效率表現有差異。在低速下，由於單個請求的速度已佔滿頻寬，併發時每個請求的速度均會被平分，從而併發與不併發無明顯差異。而高速下單個請求的速度並不能佔滿頻寬，併發時每個請求的速度不會平方，從而導致併發對網路使用效率更高，擁有更高的傳輸速度；
  • 合併方案在上傳效率上總體優於不合並方案，優勢在單請求時達到最大（速度最大能提升35%），隨著請求數增多，優勢也在收窄。原因在於，併發對於不合並方案而言擁有比合並方案更大的收益：並行連線以及連線重用，減少網路延時成本。而對於合併方案不存在連線重用，而併發本身在低速下無法提速，從而導致優勢收窄；
  • 合併方案對於不合並方案的優勢在高延時網路下最大。因為合併方案相比不合並方案最大的優勢是節省請求，因此當網路延時增大時，每個請求的時間會變長，而這對於合併方案的影響非常有限，但對於不合並方案則會成倍增加。

與ZIP方案相比

  • 圖片合併效率比ZIP效率快10倍左右，因此圖片合併更適合圖片上傳；
  • ZIP方案效率更低，但可以適用於所有檔案型別；

結論

  • CANVAS合併方案批量上傳效率整體優於無合併方案，上傳速度提升平均20%；
  • 合併方案適合用於網路延時較大的網路環境，降低網路連線成本；
  • CANVAS合併需考慮後端成本，如果可接受建議使用；

by 百度FEX

相關文章