網站性能優化之css sprites

Markxu 發布于2019-08-28 17:57 / 2702人閱讀

摘要：什么是打開一些網站可以看到每張圖片相應需要請求一次后臺，如下圖請求是比較消耗資源的，當網站中存在較多的請求時，性能就會相應的降低，加載就會變慢，甚至卡住。減少請求能提高性能，就是通過合并多張圖片達到減少請求目的的一種技術。

  什么是css sprites?

打開一些網站可以看到每張圖片相應需要請求一次后臺，如下圖：

http請求是比較消耗資源的，當網站中存在較多的http請求時，性能就會相應的降低，加載就會變慢，甚至卡住。
減少http請求能提高web性能，css sprites就是通過合并多張圖片達到減少請求目的的一種技術。

  css sprites工作原理

將多張圖片合并成一張大的圖片，然后利用css中的background-image,background-repeat以及background-position來實現。
background-image用于指定容器的背景圖片，比如background-image:url(xxx.png);,
background-repeat用于指定是否及如何重復背景圖像，比如background-repeat:no-repeat;,
最重要的是background-position,用于控制我們想要顯示的圖片位置，比如background-position:6px 6px;表示背景圖片的左上角將相對容器元素的左上角向右以及向下移動6px。

  適用場景

1.一般只能使用到固定大小的盒子（box）里，這樣才能夠遮擋住不應該看到的部分

2.需要通過降低http請求數完成網頁加速。

3.網頁中含有大量小圖標。或者，某些圖標通用性很強。

4.網頁中有需要預載的圖片。主要是a與a:hover背景圖這種關系的。如果a與a:hover的背景圖分別加載，那么，就會出現用戶鼠標移到某個按鈕上，按鈕的背景突然消失再出來，產生“閃爍”，如果按鈕文字色與大背景相同或相近，就更囧了，有可能讓人產生按鈕“消失”了的錯覺。

  注意事項

1 把幾乎不會改變的通用性很強的圖標或者其他圖片合并最好，可以避免每次更新圖片都要重新合并圖片
2 利用一些自動工具生成CSS代碼，省去自己用ps找偏移量的工作

  推薦工具

css sprite tools(客戶端工具)，此工具生成的部分代碼如下，選擇器的名字就是你的小圖片的文件名：

.pic1{background:url(../imgs/allbgs.png) no-repeat 0px 0px;width:6px;padding-top:6px;}
.pic2{background:url(../imgs/allbgs.png) no-repeat -6px 0px;width:6px;padding-top:6px;}
.pic3{background:url(../imgs/allbgs.png) no-repeat -12px 0px;width:16px;padding-top:13px;}
.pic4{background:url(../imgs/allbgs.png) no-repeat -28px 0px;width:15px;padding-top:17px;}

  測試結果

jsfiddle地址

  一些文章

CSS Sprites（截取部分圖片）是怎么工作的

csszengarden

CSS Sprites: Image Slicing’s Kiss of Death

CSS Sprites的概念、原理、適用范圍和優缺點

在線工具

在線工具sprite-creator

云服務器 GPU云服務器網站性能優化網站性能監測與優化 css優化性能優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110919.html

淺探前端圖片優化

摘要：性能優化是前端開發必不可少的一環，而圖片優化又是性能優化中必不可少的一環，但不知道有多少開發者在網頁的開發過程中會注意圖片的使用，圖片使用不當可能會導致網頁加載卡頓網頁加載速度慢等問題，這篇文章將會將我以往對圖片的處理做個總結。性能優化是前端開發必不可少的一環，而圖片優化又是性能優化中必不可少的一環，但不知道有多少開發者在網頁的開發過程中會注意圖片的使用，圖片使用不當可能會導致網頁加...

CocoaChina 2019-08-30 15:54 評論0 收藏0
淺探前端圖片優化

摘要：性能優化是前端開發必不可少的一環，而圖片優化又是性能優化中必不可少的一環，但不知道有多少開發者在網頁的開發過程中會注意圖片的使用，圖片使用不當可能會導致網頁加載卡頓網頁加載速度慢等問題，這篇文章將會將我以往對圖片的處理做個總結。性能優化是前端開發必不可少的一環，而圖片優化又是性能優化中必不可少的一環，但不知道有多少開發者在網頁的開發過程中會注意圖片的使用，圖片使用不當可能會導致網頁加...

X1nFLY 2019-08-23 14:14 評論0 收藏0
Java Web 前端高性能優化（一）

摘要：一引言前端的高性能部分，主要是指減少請求數減少傳輸的數據以及提高用戶體驗，在這個部分，圖片的優化顯得至關重要。 Web 發展的速度讓許多人嘆為觀止，層出不窮的組件、技術，只需要合理的組合、恰當的設置，就可以讓 Web 程序性能不斷飛躍。所有 Web 的思想都是通用的，它們也可以運用到 Java Web。這一系列的文章，主要講解網頁前端性能優化，是與用戶最直接接觸的。事實證明，與其消耗...

lemon 2019-08-14 12:53 評論0 收藏0
淺談網站性能之前端性能優化

摘要：淺談網站性能之前端性能優化性能優化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內容本身。前端性能優化減少請求數量基本原理在瀏覽器與服務器進行通信時，主要是通過進行通信。最近項目慢慢走上正軌，需求趨于平穩，這才想起需要對整站進行性能優化。經過一段時間的學習，結合現在項目的實際性能情況，發現確實有許多地方可以進行優化。于是就開始了我的前端性能優化之旅。以下...

Winer 2019-08-20 11:04 評論0 收藏0
淺談網站性能之前端性能優化

摘要：淺談網站性能之前端性能優化性能優化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內容本身。前端性能優化減少請求數量基本原理在瀏覽器與服務器進行通信時，主要是通過進行通信。最近項目慢慢走上正軌，需求趨于平穩，這才想起需要對整站進行性能優化。經過一段時間的學習，結合現在項目的實際性能情況，發現確實有許多地方可以進行優化。于是就開始了我的前端性能優化之旅。以下...

philadelphia 2019-08-01 15:44 評論0 收藏0