古詩詞大全網 - 團隊口號 - Cssssprites技術

Cssssprites技術

CSSSprites簡介

通常翻譯為“CSS圖像拼接”或“CSS地圖定位”。CSSSprites並不是壹項新技術。目前在web開發方面已經發展的比較成熟,在阿裏巴巴旗下子公司的網頁中隨處可見csssprites。但是,CSSSprites並不是金科玉律,但在很多情況下,它有壹定的優勢。最重要的是可以減輕服務器的負載,提高網頁的加載速度。隨著網頁設計向精致巧妙的方向發展,設計師們開始考慮使用非Javascript的方法制作鼠標懸停菜單,CSSSprite應運而生。

說白了,CSSSprites其實就是將壹個網頁中的壹些背景圖片整合成壹個圖片文件,然後利用CSS的“背景-圖片”、“背景-重復”、“背景-位置”的組合來定位背景。背景位置可以通過數字精確定位背景圖片的位置。

加載頁面時,不是加載每壹張單獨的圖片,而是壹次加載整個組合圖片。這是壹個很大的改進,大大減少了HTTP請求的數量,減輕了服務器的壓力,縮短了懸停加載圖片所需的時間延遲,效果更加流暢,不中斷。

CSSSprites應用程序

這方面,淘寶做的比較好。我以淘寶為例。

示例1:淘寶頻道頁面導航

渲染:

精靈圖:

例2:淘寶首頁

渲染:

精靈圖:

CSSSprites的優勢

CSSSprites為什麽突然火了,跟提升網站性能有關。顯然,這是它的壹大優點。

1.使用CSSSprites可以減少網頁的http請求,從而大大提高頁面的性能,這是CSSSprites的最大優勢,也是其廣泛傳播和應用的主要原因。

2.個人認為CSSSprites可以減少圖片的字節。我比較過很多次,三張圖片合並成1張圖片的字節數總是小於這三張圖片的字節數之和。

CSSSprites的缺點

CSSSprites這麽強大是真的,但是也有壹些不可忽視的缺點。

1.在進行圖片合並時,要有序合理地將多張圖片合並成壹張圖片,並留有足夠的空間,防止板塊中出現不必要的背景,否則可能會對圖片產生幹擾;這些都不錯,但是痛的是寬屏高分辨率屏幕下的自適應頁面。如果妳的畫面不夠寬,很容易破背景;

2.CSSSprites開發起來比較麻煩。妳得通過photoshop或者其他工具來測算出每個背景單元的確切位置。這是針線活,不難,但很繁瑣;不過有專家在網上開發了“CSSSprites樣式生成工具”,妳可以試試。

3.cssSprites維護起來很麻煩。精靈是壹把雙刃劍。如果頁面背景有細微的變化,壹般需要更改這個合並後的圖片,不需要更改的地方最好不要移動,以免更改更多的CSS。如果在原來的地方放不下,就只能(最好)添加圖片,這樣圖片的字節會增加,因為每次換圖都要對這個圖片進行內容的刪除或添加,有點繁瑣,當然在性能的口號下,這些都是可以克服的。

4.因為圖片的位置需要固定在壹個絕對值上,所以失去了居中等靈活性。

CSSSprites摘要

性能壓倒壹切。CSSSprites值得學習和應用,尤其是當頁面上有壹堆ico的時候。簡而言之,很多時候我們要權衡利弊,才能決定是否應用CSSSprites。為了保持兼容性和可維護性,在sprites圖片中的各個部分之間保持壹定的距離是壹個很好的做法。