網站建設

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

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

在(zài)電商網站建設中, 均存在(zài)大(dà)量的(de)小圖标, 如商品分類logo、設置菜單logo等。采用CSS Sprite能夠大(dà)量地(dì / de)減少網頁的(de)HTTP請求, 降低網站臃腫度。同時(shí)可以(yǐ)加快頁面加載速度, 大(dà)大(dà)地(dì / de)提高網站的(de)性能。