前端優化總結-服務器端-減小Http次數-圖片合成css sprite

      先上一張整潔的前端優化總結圖(以前的一篇總結圖太爛了) 

      

 

            之前切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算。客戶每顯示一張圖片都會向服務器發送請求。

      因此，圖片越多請求次數越多，形成延遲的可能性也就越大。因此在這裏咱們要作的就是把網頁中經常使用的圖片整合到一張圖片文件中，再利用CSS的「backg

      round-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字精確的定位出 背景圖片的位

      置。而css sprite正是擁有這種功能的工具。

      下面是css sprite的優缺點

      優勢

            1.利用CSS Sprites能很好地減小網頁的http請求，從而大大的提升頁面的性能，這也是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由；

            2.CSS Sprites能減小圖片的字節，曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和。

            3.解決了設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。

            4.更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便。

      缺點

            誠然CSS Sprites是如此的強大，可是也存在一些不可忽視的缺點，以下：

            1.在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內出現沒必要要的背景；這些還好，最痛苦的是在寬頻，

             高分辨率的屏幕下的自適應頁面，你的圖片若是不夠寬，很容易出現背景斷裂；

            2.CSS Sprites在開發的時候比較麻煩，你要經過PS或其餘工具測量計算每個背景單元的精確位置，這是針線活，沒什麼難度，可是很繁瑣；幸虧騰訊的

             鬼哥用ADOBE AIR 開發了一個CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，可是已經比photoshop測量來的方便多了，並且樣式直接生成

             ，複製，拷貝就OK！

            3.CSS Sprites在維護的時候比較麻煩，若是頁面有少量改動，通常就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的 css，若是在原

            來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增長了，還要改動css。

            4.CSS Sprites很是值得學習和應用，特別是頁面有一堆ico（圖標）。總之不少時候你們要權衡一下利弊，再決定是否是應用CSS Sprites。

 

            你們如果有更好的工具 能夠推薦給我了！也能夠一塊兒交流學習。