寶雞網(wǎng)站建設(shè)公司
不知道這些SEO知識(shí) 何顏?zhàn)稣鹃L(zhǎng)!
時(shí)間:2015-12-04 17:37
次來(lái)源:未知
在網(wǎng)站開(kāi)發(fā)過(guò)程中,對(duì)于頁(yè)面的加載效率一般都想盡辦法求快。那么,怎么讓才能更快呢?減少頁(yè)面請(qǐng)求 是一個(gè)優(yōu)化頁(yè)面加載速度很好的方法。上一篇博文我們講解了 “利用將小圖標(biāo)合成一張背景圖來(lái)減少HTTP請(qǐng)求”,那么,這一篇博文將講解 “ 將圖片轉(zhuǎn)成二進(jìn)制并生成Base64編碼,可以在網(wǎng)頁(yè)中通過(guò)url查看圖片”。
一、為何選擇將圖片轉(zhuǎn)成二進(jìn)制并生成Base64編碼,可以在網(wǎng)頁(yè)中通過(guò)url查看圖片的方法減少HTTP請(qǐng)求數(shù)?
為什么我會(huì)講解 “將圖片轉(zhuǎn)成二進(jìn)制并生成Base64編碼,可以在網(wǎng)頁(yè)中通過(guò)url查看圖片” 這一種方式來(lái)減少HTTP請(qǐng)求,進(jìn)而優(yōu)化頁(yè)面呢?這里呢,是涉及到移動(dòng)端的圖標(biāo)使用。上一篇博文所講的方法能否使用于手機(jī)端的網(wǎng)頁(yè)呢?
但是,它會(huì)出現(xiàn)一個(gè)問(wèn)題:背景圖+css顯示圖標(biāo)時(shí),圖標(biāo)本身無(wú)法縮放,比如背景圖中64px*64px的圖標(biāo),顯示到界面時(shí)必須設(shè)置icon的大小也是64*64。在PC網(wǎng)頁(yè)中這通常不會(huì)有什么問(wèn)題,但在移動(dòng)端設(shè)備上就完全行不通。同樣是4英寸的手機(jī)屏幕,其分辨率有可能是320*400,也可能是640*800,甚至也可能是1920*1080。這樣64px*64px的圖標(biāo)在不同的設(shè)備上看起來(lái)的大小就會(huì)差別非常明顯。
幸運(yùn)的是,手機(jī)上的瀏覽器基本對(duì)此做了優(yōu)化,會(huì)把設(shè)備模擬成更低的分辨率。比如在1136*640的IPHONE 5中獲取$(window).width(),取出來(lái)的是320而不是640,這樣一個(gè)寬度為160px的圖片占用的是屏幕寬度的一半,而不是1/4。手機(jī)設(shè)備這樣處理是為了解決兼容性問(wèn)題。除了網(wǎng)頁(yè),包括手機(jī)上app的界面,在retina屏幕上和非retina屏幕上的大小是完全一樣的,都是因?yàn)閷?duì)分辨率做了處理。
但是,移動(dòng)設(shè)備這樣的處理方式并不能完全解決問(wèn)題,因?yàn)闄C(jī)器的假設(shè)性猜測(cè)在很多時(shí)候是不合適的,尤其是在android設(shè)備中。為了更好地控制元素顯示的大小,解決的辦法就是用pt代替ps,px是對(duì)應(yīng)屏幕的分辨率,而pt是針對(duì)人眼睛實(shí)際感覺(jué)的大小,無(wú)論在何種分辨率的設(shè)備上,72pt固定是1英寸。
HTML的img標(biāo)簽元素的src屬性不只是可以指定url,也可以指定圖片的二進(jìn)制數(shù)據(jù)流。然后通過(guò)img元素的自動(dòng)縮放功能,指定img的大小,就可以實(shí)現(xiàn)在不同分辨率的設(shè)備上顯示一致的圖標(biāo)大小。
二、使用Base64編碼減少頁(yè)面請(qǐng)求數(shù)
當(dāng)我們的一個(gè)頁(yè)面中要傳入很多圖片時(shí),特別是一些小圖標(biāo),十幾K、幾K,甚至是字節(jié)級(jí)別大小的小圖標(biāo),這些小圖標(biāo)都會(huì)增加HTTP請(qǐng)求,假如多了,就會(huì)給服務(wù)器帶來(lái)很大的壓力。比如要下載一些一兩K大的小圖標(biāo),其實(shí)請(qǐng)求時(shí)帶上的額外信息有可能比圖標(biāo)的大小還要大。所以,在請(qǐng)求越多時(shí),在網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)自然就越多了,傳輸?shù)臄?shù)據(jù)自然也就變慢了。而這里,我們采用Base64的編碼方式將圖片直接嵌入到網(wǎng)頁(yè)中,而不是從外部載入,這樣就減少了HTTP請(qǐng)求。當(dāng)然了,它有一個(gè)小缺點(diǎn),就是使當(dāng)前頁(yè)面的大小變大了(對(duì)于優(yōu)化來(lái)說(shuō),其實(shí)這個(gè)可以忽略,影響不大)?匆幌孪聢D,小圖標(biāo)大小為2.4k,等待響應(yīng)時(shí)間是14ms,而接受數(shù)據(jù),也就是下載時(shí)間約為0ms;可想而知,在有大量小圖標(biāo)下載的時(shí)候,這樣的方式去優(yōu)化能大大提高網(wǎng)站的性能(在jquery mobile和天貓的手機(jī)站上面都有用到此技術(shù))。