對網站應用程式css sprite 技術自動化實施方式的探討

前提概要：

一個網站首頁或者頻道頁面，內容圖片較多的時候，且變動不是太頻繁，如何最佳化成為了難題，使用CSS SPRITE功能能實現多個圖片合并到一起進行載入的方法，但這種需要前端人員對圖片位置和CSS 進行手動調節，改變HTML結構，異常繁雜，這就是為什麼很多網站現在還沒有使用的原因。

本人一直在考慮如何將這一流程變得自動化，簡便易操作，讓前端人員改變更少的代碼的情況下 自動完成這個流程，經過一段時間的思考和資料翻閱，整理出一種個人覺得可行的方式，給大家梳理下，當然這並不是最終方法，還需要更多人來進行流程最佳化。

  面臨問題：

1、圖片自動合并問題

2、CSS 樣式如何產生，產生鍥機（也就是什麼時候產生最為合適），如何關聯，並且設定位移量

3、是否需要修改原HTML代碼，需要修改的話如何修改，什麼時候改。

4、在圖片大小不同，類型不同的情況下，如何進行有效和服務端參數傳遞和位移量計算。

5、如何在修改原HTML最少的情況下、在如CMS 配置等非專業人員下可以靈活操作，不會因為不懂技術而出現錯誤的情況。

6、服務端用什麼方式來支援，是採用服務端webserver解析HTML的方式，還是使用PHP等語言來執行，編譯後再組裝HTML。

7、應該還有。。。

  針對上述問題我的思路：

1、也許這個是最好解決的問題了，使用php或者nginx c模組，按照傳遞過來的多個圖片參數合并原有的圖片，按照順序即可。可以使所有圖片全部橫向或者縱向排列，這樣方便在css中直接設定x 或者y座標的位移量即可，位移量即為上一個圖片的高度或者寬度。考慮到效能問題，這個圖片可以加到緩衝中，或者直接生產對應的靜態檔案，請求過來的時候先判斷靜態檔案是否存在，存在即返回，不存在再產生。

2、動態產生css，當然參數也包含上述的多個圖片的參數，按照圖片的位置，產生對應的CSS。（由於css的在瀏覽器中載入優先順序高，造成很多方案無法實現。在解決方案中再贅述如何和圖片進行關聯）。

3、為啥要修改html 因為正常的html是：<img src=xxx.jpg> ，css sprite是<div style='background:url'>,這種方式，兩者沒有相容的表示方式。若不需要修改原始碼，則必須在dom解析完成html之後來執行（因為正常的 <img src=xxx.jpg> 這個標籤是解析完就開始執行，並且在document.onload事件前就執行完成），雖然大部分瀏覽器都有相容的實現方法，不過我覺得還是不太靠譜，故我的想法是必須要提前修改好HTML。

4、這個問題我覺得多加點參數就能解決問題，就是繁雜些，看有沒有其他好一些的方式。

5、下面幾個問題在解決方案裡涉及。

  我個人覺得可行性稍大的解決方式：（流程較多，每一部分解決方案都不太同）

步驟1、略過開始就產生合并的圖片，直接在動態調用css裡的方法裡產生。

如在html的header裡直接

<link href=http://xxxx.php?imgids=1,2,3,4,5,6,7 rel="stylesheet" type="text/css" media="screen">

在這個php裡，主要做2件事，一個就是根據圖片ID （你傳圖片路徑也可以，根據自己的業務來選擇）獲得實際圖片，並獲得圖片的大小，在對應的位置產生改組ID對應的合并圖片檔案。第二件事就是根據上述資料，產生對應的css內容，返回給頁面，內容格式如下： [css]  view plain copy .img1 .img2 .img3 ...{   background-image:url(這個url就直接是剛才產生的合并後的圖片檔案的實際訪問的http地址了)   }   .img1{background-position:0px 0px}   .img2{background-position:0px -94px}   .img3{background-position:0px -188px}   ....  

這樣這個css 這個頁面就可以使用了。 有人問，怎麼讓各個div使用不同的class樣式呢。我的想法是：在document.onload事件裡，用js 迴圈要設定的對象，用js來給他設定className即可;或者呢，直接使用下面步驟2的方式直接賦值。

步驟2、解決html代碼改變的問題

最好的思路我覺得就是在nginx 裡增加一個c模組，該模組的功能就是擷取到需要變更代碼塊，該代碼塊可以用標籤定義，或者也可以使用正則來匹配。開啟該模組後，自動將html代碼轉換成上述結構使用的代碼。

配置模組： [ruby]  view plain copy location /index.html{   css_sprite on;   reg_ex '/start(.*)end/';   }  

或者使用php的預執行方式，產生對應的代碼。若在CMS中可以配置這樣的標籤來實現功能。

實際網站情況比較複雜，大部分網站可以不涉及步驟2，直接在頁面輸出對應的代碼即可，步驟2適合前端結構較複雜的情形。這種解決方案適合圖片更換頻率不是太高的情況，當然個人覺得效能不是問題，大部分時間都可以用上緩衝，當然要說不支援GIF了，不符合邏輯，各個gif 幀數不一樣就悲劇了。

暫時能想到的就是這些，網上暫時還沒查到更具體的解決方案，其他人可以幫我補充或者修改，希望能協助部分有這樣需求的網站，歡迎大家吐槽。