企業(yè)網(wǎng)站建設使用CSS Sprite技術(shù)
日期 : 2021-03-21 12:05:20
使用CSS Sprite技術(shù)。市面上的瀏覽器, 均有并發(fā)HTTP請求數量限制, 即會(huì )限制一個(gè)網(wǎng)站同時(shí)發(fā)出的HTTP請求數量, 在發(fā)出的HTTP請求沒(méi)有被結束的時(shí)候, 新的HTTP請求不會(huì )被開(kāi)始。因此, 每一個(gè)請求都是非常資源。在電商網(wǎng)站中, 如果每一個(gè)圖片, 包括零碎的小圖標, 都占用一個(gè)請求去獲得, 那十分浪費請求資源?？蛻?hù)端每顯示一張圖片都會(huì )向服務(wù)器發(fā)送請求。所以, 圖片越多請求次數越多, 造成延遲的可能性也就越大。
CSS Sprite技術(shù), 允許開(kāi)發(fā)者將眾多零碎的圖片, 諸如小圖標等, 通過(guò)Photoshop或其他圖片工具, 切片合并成一個(gè)大圖 (如圖3) , 然后統一通過(guò)一個(gè)請求, 發(fā)送到瀏覽器端。開(kāi)發(fā)者需要做的事情, 就是利用CSS中的backgroundposition、background-repeat, background-position的組合, 來(lái)定義每個(gè)小圖標在大圖上的對應位置, 通過(guò)大圖加精準位置定位切割的方式, 去顯示出多個(gè)小圖標。這樣, 就是通過(guò)一個(gè)CSS代碼, 再加上一個(gè)合并而成的圖片, 就代替了同時(shí)傳送多個(gè)小圖標的方法。
在電商網(wǎng)站建設中, 均存在大量的小圖標, 如商品分類(lèi)logo、設置菜單logo等。采用CSS Sprite能夠大量地減少網(wǎng)頁(yè)的HTTP請求, 降低網(wǎng)站臃腫度。同時(shí)可以加快頁(yè)面加載速度, 大大地提高網(wǎng)站的性能。
CSS Sprite技術(shù), 允許開(kāi)發(fā)者將眾多零碎的圖片, 諸如小圖標等, 通過(guò)Photoshop或其他圖片工具, 切片合并成一個(gè)大圖 (如圖3) , 然后統一通過(guò)一個(gè)請求, 發(fā)送到瀏覽器端。開(kāi)發(fā)者需要做的事情, 就是利用CSS中的backgroundposition、background-repeat, background-position的組合, 來(lái)定義每個(gè)小圖標在大圖上的對應位置, 通過(guò)大圖加精準位置定位切割的方式, 去顯示出多個(gè)小圖標。這樣, 就是通過(guò)一個(gè)CSS代碼, 再加上一個(gè)合并而成的圖片, 就代替了同時(shí)傳送多個(gè)小圖標的方法。
在電商網(wǎng)站建設中, 均存在大量的小圖標, 如商品分類(lèi)logo、設置菜單logo等。采用CSS Sprite能夠大量地減少網(wǎng)頁(yè)的HTTP請求, 降低網(wǎng)站臃腫度。同時(shí)可以加快頁(yè)面加載速度, 大大地提高網(wǎng)站的性能。
相關(guān)文章
精彩導讀
熱門(mén)資訊
