前端優化：css雪碧圖實踐應用詳解

時間 2020-05-09

標籤前端優化 css 雪碧實踐應用詳解欄目 CSS 简体版

原文原文鏈接

前端是接近用戶體驗的一個項目組成部分，合適的優化可以大大減小網頁響應時間，合理的資源加載天然成爲了工做中的要務，如今就結合實例講解到底什麼是css雪碧圖，以及工做中的實際應用。前端

一、爲何須要使用雪碧圖

比方說如今經理要咱們給頁面添加一個側邊任務欄，效果以下：

呵呵，做爲一名資（too）深（young）的前端，我刷刷刷爲頁面增長ul還有幾個而後再給每一個li添加背景圖片，哈哈，任務就這麼完成了，而後commit了一下本身的代碼。此處應該要有代碼webpack

html部分web

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪碧圖實例</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <ul class="function"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>

css部分

* { box-sizing: border-box; padding: 0; margin: 0; } body { font-size: 18px; } .function { list-style: none; display: inline-block; } .function li { width: 40px; height: 40px; margin-bottom: 5px; background: #E0E0E0; background-repeat: no-repeat; } .function li:nth-child(1) { background-image: url(../img/all.png); } .function li:nth-child(2) { background-image: url(../img/back.png); } .function li:nth-child(3) { background-image: url(../img/cart.png); } .function li:nth-child(4) { background-image: url(../img/Category.png); } .function li:nth-child(5) { background-image: url(../img/close.png); }

可是等到項目上線的時候，經理說小徐啊，這網頁響應有點慢啊！怎麼可能！因而我打開chrome按下F12查看network

咱們能夠看到這裏有幾張不到1k的小圖片就這點大小還佔用了5個請求，網頁響應變慢了也不難理解。因而這時候css雪碧圖就出現！chrome

2、CSS雪碧圖原理及應用

原理：把小圖標合成一張大圖，經過給元素的公共css設置background-image爲該合成圖，這樣每一個元素都會以該合成圖爲背景，並且頁面也只加載一張合成圖，而後再給每一個元素單獨微調其background-position。把多個請求合併成一個。gulp

步驟：工具

合併圖片
首先咱們要對圖片進行合併，方式有不少種，能夠經過gulp，webpack等構建工具或者一些在線工具，這裏提供一個很好用的在線的圖片合併網站
http://csssprites.com/能夠根據本身的須要添加邊距等等，還會生成對應的參考css優化
設置css（此處必須有代碼）網站

* { box-sizing: border-box; padding: 0; margin: 0; } body { font-size: 18px; } .function { list-style: none; display: inline-block; } .function li { width: 33px; height: 33px; margin-bottom: 5px; background: #E0E0E0; background-image: url(../img/result.png); /*result.png爲合併後的圖片*/ background-repeat: no-repeat; } .function li:nth-child(1) { background-position: 0 0; } .function li:nth-child(2) { background-position: 0 -35px; } .function li:nth-child(3) { background-position: 0 -72px; } .function li:nth-child(4) { background-position: 0 -110px; } .function li:nth-child(5) { background-position: 0 -145px; }