減少HTTP請求對百度排名有哪些影響

 減少HTTP請求對百度排名有什麽影響？在網站開(kāi)發過程中(zhōng)，對于頁面的加載效率一(yī)般都想盡辦法求快。那麽，怎麽讓才能更快呢?減少頁面請求是一(yī)個優化頁面加載速度很好的方法。

　　一(yī)、爲何選擇将圖片轉成二進制并生(shēng)成Base64編碼,可以在網頁中(zhōng)通過url查看圖片的方法減少HTTP請求數?

　　爲什麽我(wǒ)會講解 “将圖片轉成二進制并生(shēng)成Base64編碼,可以在網頁中(zhōng)通過url查看圖片” 這一(yī)種方式來減少HTTP請求，進而優化頁面呢?這裏呢，是涉及到移動端的圖标使用。上一(yī)篇博文所講的方法能否使用于手機端的網頁呢?

　　但是，它會出現一(yī)個問題：背景圖+css顯示圖标時，圖标本身無法縮放(fàng)，比如背景圖中(zhōng)64px*64px的圖标，顯示到界面時必須設置icon的大(dà)小(xiǎo)也是64*64。在PC網頁中(zhōng)這通常不會有什麽問題，但在移動端設備上就完全行不通。同樣是4英寸的手機屏幕，其分(fēn)辨率有可能是320*400，也可能是640*800，甚至也可能是1920*1080。這樣64px*64px的圖标在不同的設備上看起來的大(dà)小(xiǎo)就會差别非常明顯。

　　幸運的是，手機上的浏覽器基本對此做了優化，會把設備模拟成更低的分(fēn)辨率。比如在1136*640的IPHONE 5中(zhōng)獲取$(window).width(),取出來的是320而不是640，這樣一(yī)個寬度爲160px的圖片占用的是屏幕寬度的一(yī)半，而不是1/4。手機設備這樣處理是爲了解決兼容性問題。除了網頁，包括手機上app的界面，在retina屏幕上和非retina屏幕上的大(dà)小(xiǎo)是完全一(yī)樣的，都是因爲對分(fēn)辨率做了處理。

　　但是，移動設備這樣的處理方式并不能完全解決問題，因爲機器的假設性猜測在很多時候是不合适的，尤其是在android設備中(zhōng)。爲了更好地控制元素顯示的大(dà)小(xiǎo)，解決的辦法就是用pt代替ps，px是對應屏幕的分(fēn)辨率，而pt是針對人眼睛實際感覺的大(dà)小(xiǎo)，無論在何種分(fēn)辨率的設備上，72pt固定是1英寸。

　　HTML的img标簽元素的src屬性不隻是可以指定url，也可以指定圖片的二進制數據流。然後通過img元素的自動縮放(fàng)功能，指定img的大(dà)小(xiǎo)，就可以實現在不同分(fēn)辨率的設備上顯示一(yī)緻的圖标大(dà)小(xiǎo)。

　　二、使用Base64編碼減少頁面請求數

　　當我(wǒ)們的一(yī)個頁面中(zhōng)要傳入很多圖片時，特别是一(yī)些小(xiǎo)圖标，十幾K、幾K，甚至是字節級别大(dà)小(xiǎo)的小(xiǎo)圖标，這些小(xiǎo)圖标都會增加HTTP請求，假如多了，就會給服務器帶來很大(dà)的壓力。比如要下(xià)載一(yī)些一(yī)兩K大(dà)的小(xiǎo)圖标，其實請求時帶上的額外(wài)信息有可能比圖标的大(dà)小(xiǎo)還要大(dà)。所以，在請求越多時，在網絡傳輸的數據自然就越多了，傳輸的數據自然也就變慢(màn)了。而這裏，我(wǒ)們采用Base64的編碼方式将圖片直接嵌入到網頁中(zhōng)，而不是從外(wài)部載入，這樣就減少了HTTP請求。當然了，它有一(yī)個小(xiǎo)缺點，就是使當前頁面的大(dà)小(xiǎo)變大(dà)了(對于優化來說，其實這個可以忽略，影響不大(dà))。看一(yī)下(xià)下(xià)圖，小(xiǎo)圖标大(dà)小(xiǎo)爲2.4k，等待響應時間是14ms，而接受數據，也就是下(xià)載時間約爲0ms;可想而知(zhī)，在有大(dà)量小(xiǎo)圖标下(xià)載的時候，這樣的方式去(qù)優化能大(dà)大(dà)提高網站的性能(在jquery mobile和天貓的手機站上面都有用到此技術)。

　　三、開(kāi)發思路

　　将小(xiǎo)圖标放(fàng)在以icon_開(kāi)頭的文件夾裏(以區分(fēn)不用生(shēng)成base64的圖片的文件夾)—>用程序去(qù)遍曆文件夾圖片 —>将每張圖片的base64編碼放(fàng)在一(yī)個js對象裏—>在HTML頁面的img标簽裏 使用屬性 icon-data = ‘圖标名(不帶後綴)’來顯示圖片 —> JS文件寫一(yī)個函數對icon-data屬性進行轉換，轉換成src屬性，然後值就通過icon-data的屬性值獲得圖标名，然後進行相應的替換得到相應圖标的base64編碼 —> 顯示圖片

轉自淮安互聯 http://www.dutou.net