由於網速的限制，頁面開發者都喜歡把網頁裡面的位元組數控制的非常小，往往在乙個資料夾裡散落著n多的小碎圖。隨著網路技術的發展，網速的提公升，大 家越來越重視頁面的載入速度、頁面效率問題，過去的那些小圖便成為了前端開發者的眼中釘，因為每載入一張都會產生一次瀏覽器請求數，發起的請求數越多 那麼頁面載入的速度也越慢。還有當頁面載入時，乙個個的零星顯示，滑鼠經過時候背景閃白等也都是我們不能忍受的。於是乎將頁面中的背景圖整合到一起， 利用「background-image」，「background- repeat」，「background-position」的組合進行背景定位的技術被廣泛使用與了頁面構建中，這就是css sprites。當然css sprites技術也存在著維護不便，記憶體占用大等等的缺點。
上面這些只是對css sprites技術的乙個普及。作為乙個開發者我們應該對它有乙個更全面的認識，挖掘深度內容，這樣才能有利於我們效率開發，團隊協作。
先期的準備工作
應對乙個專案後期維護成本大的問題，我們最好的解決方案就是在開始前制定一系列的規範來限制問題的產品。好的開始是成功的一半。對於css
sprites，在專案開始前，我們要充分認識乙個產品，同ui設計師做好良好的溝通，對我們未來組成我們sprites圖的各個元素有個大體的概念，比
如我們的背景拼圖可能包括什麼。
乙個好的sprite畫布是必須的
網頁設計裡面，grid系統是必不可少的，好的grid能解決我們很多排版問題。grid系統同樣適用於css sprites。我們需要建立好乙個優秀的畫板，剩下的工作就是將元素合理的置於畫板中了。
這張是我準備的一張css sprites畫布，我們將在這個psd裡面組合專案中的。
這張畫布是由20px*20px畫素的格仔組成。這個格仔基本上由專案決定的，當我們同ui設計師溝通了解這個專案最多的為16px*16px 圖示時。我們就可以採用這種grid尺寸為畫布了。
sprites畫布有了，接下來就是對圖示進行分組了
對於資訊的歸納總結、分類是乙個有意思的事情。就拿圖示來說，我們就可以根據圖示功能，尺寸等等作為資訊維度進行歸納。其實無論怎麼歸納，都是可以的，只是記得我們以乙個方向作為標準就可以了。
下圖是根據微博站外某元件完成的css sprites：
根據設計，我們了解在這個頁面，需要將元素根據功能分為4個維度，即微博品牌展示元素、提交按鈕、操作類小按鈕、提示類icon。於是我將畫
布x軸座標方向每5個格（其實完全可以10個格或者更多）劃分為乙個區域，每個這樣乙個區域的y軸方向不再劃分區域，這樣做的目的是為了以後增加圖示的擴
展性。於是我們可以非常快速得到乙個圖示的座標了。比如不可用的灰色的分享按鈕 x座標=5*20px=100px y座標=7*20px=140px;
那麼我們就取得了這個圖示的位置即background-position: -100px
-140px。如果抽象成為公式的話，我們設定乙個單元格的寬度為變數n。x座標值gx,y座標值gy。那麼畫布中的元素css背景即
為：background-position:-gx*npx –gy*npx 了。
現在圖有了，怎麼取圖也是關鍵
因為盡可能的被整合到一張拼圖，所以我們需要在頁面使用的位置使用空標籤定位的方式將拼圖所需展現的部分展示到頁面中。
html**
span>
.icona
專案出現二期需求了，需要增加圖示？
我們可以繼續在對應的圖區內增加對應的圖示。但是這個例子同樣暴露了乙個缺陷，如果新增乙個按鈕區域大於5n(100px)，我們的圖區不足以承
載。這時候我們可以同產品，設計師溝通協調，商議是否可以取消過大的按鈕設計。如果需求一定，那我們只能沿著x軸方向繼續擴充套件畫布。不過，我們也需要注意
無限的放大一張畫布，同樣會造成對頁面效率的影響。
及時的制定好規範，記錄好修改日誌
可能在專案的初期，我們還來不及制定合圖的具體規範，在專案中我們會遇到各種各樣的問題。及時的總結，維護整張css拼圖，在拼圖的psd或者png（使用fireworks）做好注釋，方便他人開發。拼合好的提交到svn時也寫明log內容，這樣便日後查詢。
最終目的
其實css
sprites經過了那麼多年的演變，前端開發者不斷的優化，都是為了提公升頁面效率，提公升團隊開發效率，減少開發維護成本而努力。配合最近非常流行的將
css動態語言化（如sass less等），增加入變數，繼承，運算，函式等。css
sprites會變的更好玩，會減少更多的開發維護成本。甚至我們在「物件導向」的模組開發方式中，還可以使用乙個類的的同乙個backgroud-
position：（x
y）值，在不同的頁面通過引用不同的（background屬性）實現將乙個頁面內請求量進一步減少的目的。隨著高階瀏覽器的普及我們還可以多使
在日常的開發中，只要我們多注意總結，敢於創新，敢於制定規範，那麼再小的事也能幹的很漂亮，對於css sprites的優化就是這麼乙個例子。
CSS Sprites 原理技術介紹及其優化方法
先期的準備工作 應對乙個專案後期維護成本大的問題，我們最好的解決方案就是在開始前制定一系列的規範來限制問題的產品。好的開始是成功的一半。對於css sprites，在專案開始前，我們要充分認識乙個產品，同ui設計師做好良好的溝通，對我們未來組成我們sprites圖的各個元素有個大體的概念，比如我們的...
密碼學技術何以為信？深究背後的計算困難性理論
隱私保護為何選用密碼學演算法？密碼學演算法背後有哪些神奇的數學理論？3何時比9大？計算可逆性錯覺究竟是如何在數學領域被打破？這裡，我們將從密碼學信任的理論基礎出發，分享在隱私保護技術方案中應用密碼學技術的一些思考 如何理解密碼學演算法的能力邊界，如何客觀地比較不同密碼學演算法對於隱私保護方案有效性的...
深究遞迴和迭代的區別 聯絡 優缺點及例項對比
作者寫的不錯，表示感謝，哈 遞迴的基本概念 程式呼叫自身的程式設計技巧稱為遞迴,是函式自己呼叫自己.乙個函式在其定義中直接或間接呼叫自身的一種方法,它通常把乙個大型的複雜的問題轉化為乙個與原問題相似的規模較小的問題來解決,可以極大的減少 量.遞迴的能力在於用有限的語句來定義物件的無限集合.使用遞迴要...