網站(zhàn)建設

使用CSS Sprite技(jì)術(shù)。市面上(shàng)的浏覽器(qì), 均有(yǒu)并發HTTP請(qǐng)求數(shù)量限制(zhì), 即會(huì)限制(zhì)一個(gè)網站(zhàn)同時(shí)發出的HTTP請(qǐng)求數(shù)量, 在發出的HTTP請(qǐng)求沒有(yǒu)被結束的時(shí)候, 新的HTTP請(qǐng)求不會(huì)被開(kāi)始。因此, 每一個(gè)請(qǐng)求都是非常資源。在電(diàn)商網站(zhàn)中, 如果每一個(gè)圖片, 包括零碎的小(xiǎo)圖标, 都占用一個(gè)請(qǐng)求去獲得(de), 那(nà)十分浪費請(qǐng)求資源。客戶端每顯示一張圖片都會(huì)向服務器(qì)發送請(qǐng)求。所以, 圖片越多(duō)請(qǐng)求次數(shù)越多(duō), 造成延遲的可(kě)能性也就越大(dà)。

CSS Sprite技(jì)術(shù), 允許開(kāi)發者将衆多(duō)零碎的圖片, 諸如小(xiǎo)圖标等, 通(tōng)過Photoshop或其他圖片工具, 切片合并成一個(gè)大(dà)圖 (如圖3) , 然後統一通(tōng)過一個(gè)請(qǐng)求, 發送到浏覽器(qì)端。開(kāi)發者需要做(zuò)的事情, 就是利用CSS中的backgroundposition、background-repeat, background-position的組合, 來(lái)定義每個(gè)小(xiǎo)圖标在大(dà)圖上(shàng)的對應位置, 通(tōng)過大(dà)圖加精準位置定位切割的方式, 去顯示出多(duō)個(gè)小(xiǎo)圖标。這樣, 就是通(tōng)過一個(gè)CSS代碼, 再加上(shàng)一個(gè)合并而成的圖片, 就代替了同時(shí)傳送多(duō)個(gè)小(xiǎo)圖标的方法。

在電(diàn)商網站(zhàn)建設中, 均存在大(dà)量的小(xiǎo)圖标, 如商品分類logo、設置菜單logo等。采用CSS Sprite能夠大(dà)量地減少(shǎo)網頁的HTTP請(qǐng)求, 降低(dī)網站(zhàn)臃腫度。同時(shí)可(kě)以加快頁面加載速度, 大(dà)大(dà)地提高(gāo)網站(zhàn)的性能。