給產(chǎn)品經(jīng)理講技術(shù)2016-12前端小技巧css雪碧圖

1、前端技巧：CSS雪碧圖2016-12-05 果果 給產(chǎn)品經(jīng)理講技術(shù)周、寒冷、堵、噪聲，你悲傷也沒(méi)，還好我準(zhǔn)時(shí)的來(lái)跟你叨 叨了。有的地就有江湖，有問(wèn)題的地就有解決問(wèn)題，所以有問(wèn)題的地就有江湖，端的江湖，以前直有這樣類問(wèn)題，且聽分解。當(dāng)在瀏覽器輸個(gè)URL地址的時(shí)候，你會(huì)感覺(jué)數(shù)“唰唰唰”的閃出來(lái)了。在這個(gè)過(guò)程中，瀏覽器會(huì)把這個(gè)站的主資源（就是 Html件）拉取回來(lái)，然后開始分析中的Js，Img之類的，然后再去拉取這些圖和資源，這些后拉取的資源稱為資源。主資源和資源只是類對(duì)資源定義的不同式，其實(shí)對(duì)于瀏覽器來(lái)說(shuō)，他們的請(qǐng)求式都是發(fā)起個(gè)Http請(qǐng)求，經(jīng)歷三次握，并把件拉取回來(lái)，般的瀏覽器內(nèi)核只能同時(shí)并發(fā)4

2、，5個(gè)絡(luò)請(qǐng)求，所以量的圖特別影響性 能，不但加載完成時(shí)間慢，還可能影響些重要的 JS邏輯，使得響應(yīng)也變慢，卡死等等。對(duì)于瀏覽器來(lái)說(shuō)，發(fā)起個(gè)Http請(qǐng)求，來(lái)回百毫秒的耗時(shí)，已經(jīng)是相當(dāng)?shù)馁Y源耗費(fèi)，只是類不曾感受到，其實(shí)瀏覽器已經(jīng)數(shù)次喊叫： “太 NMD慢了，哪個(gè)SB寫的代碼 ”。例如上圖，個(gè)的塊區(qū)域，就三標(biāo)，瀏覽器要苦苦三次才能把這些圖標(biāo)取回來(lái)，如果是50張呢，顯然不可接受。對(duì)這樣的情況就只能束就擒嗎？顯然優(yōu)化的關(guān)鍵途徑就是減少絡(luò)請(qǐng)求次數(shù)，并且還得把圖都下發(fā)下來(lái)，并能夠靈活使，那就把所有圖標(biāo)拼成吧，如下圖。當(dāng)前，次絡(luò)請(qǐng)求就可以下來(lái)三了，且件的也較三些（因?yàn)楹芏嗉母袷叫畔⒑皖^信息已經(jīng)共了），降低了

3、絡(luò)請(qǐng)求和帶寬的消耗。然后呢，如何在Html或CSS中引這些圖呢？這就不得不提到個(gè)CSS屬性叫做background-ition，利Ta，可以指定圖的位置，也就能把這碼。作為個(gè)背景放在某個(gè)位置了，來(lái)看兩句CSS代利這個(gè)屬性，來(lái)標(biāo)識(shí)圖相對(duì)于容器的位置（圖中的坐標(biāo)分別標(biāo)識(shí)X，Y兩個(gè)向的偏移，這些都是示意的值哦，不是真實(shí)的值），最后再把這個(gè)類選擇器應(yīng)到相應(yīng)的容器就好了。這種技術(shù)就稱為CSS Sprite，中翻譯為雪碧圖，Ta主要解決的是圖過(guò)多以及耗費(fèi)絡(luò)資源，核原理就是將圖合并成下發(fā)到客戶程序，并利屬性來(lái)對(duì)其進(jìn)定位和切割的技術(shù)。其實(shí)在當(dāng)中，很多也是利了類似的，如個(gè)路的時(shí)候，共由8組成，那么般這8會(huì)合并為，每幀都循環(huán)這中的不同坐標(biāo)下的圖來(lái)構(gòu)建的動(dòng)作。其實(shí)在追求性能的app中，很多也是利了類似的，如對(duì)性能極致要求的話，個(gè)Titar上有5個(gè)icon，那5個(gè)icon是可以合并為的，這樣只會(huì)有次