亚洲一级a大片一级_一级无码性爱影片_最新国内熟女少妇视频_国产特级毛片A级视频

減少HTTP請求對百度排名有什么影響?

2022-03-29 19:14:46

減少HTTP請求對百度排名有什么影響?在網(wǎng)站開發(fā)過程中,對于頁面的加載效率一般都想盡辦法求快。那么,怎么讓才能更快呢?減少頁面請求是一個(gè)優(yōu)化頁面加載速度很好的方法。今天來跟大家介紹下如何減少HTTP請求來提高百度排名?網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)網(wǎng)站制作★網(wǎng)頁設(shè)計(jì)-599元全包;企業(yè)網(wǎng)絡(luò)推廣☆網(wǎng)站優(yōu)化seo☆關(guān)鍵詞排名☆百度快照-2200元全年展示;做網(wǎng)站優(yōu)化排名-網(wǎng)站建設(shè)公司

  一、為何選擇將圖片轉(zhuǎn)成二進(jìn)制并生成Base64編碼,可以在網(wǎng)頁中通過url查看圖片的方法減少HTTP請求數(shù)?

  為什么我會(huì)講解 “將圖片轉(zhuǎn)成二進(jìn)制并生成Base64編碼,可以在網(wǎng)頁中通過url查看圖片” 這一種方式來減少HTTP請求,進(jìn)而優(yōu)化頁面呢?這里呢,是涉及到移動(dòng)端的圖標(biāo)使用。上一篇博文所講的方法能否使用于手機(jī)端的網(wǎng)頁呢?

  但是,它會(huì)出現(xiàn)一個(gè)問題:背景圖+css顯示圖標(biāo)時(shí),圖標(biāo)本身無法縮放,比如背景圖中64px*64px的圖標(biāo),顯示到界面時(shí)必須設(shè)置icon的大小也是64*64。在PC網(wǎng)頁中這通常不會(huì)有什么問題,但在移動(dòng)端設(shè)備上就完全行不通。同樣是4英寸的手機(jī)屏幕,其分辨率有可能是320*400,也可能是640*800,甚至也可能是1920*1080。這樣64px*64px的圖標(biāo)在不同的設(shè)備上看起來的大小就會(huì)差別非常明顯。

  幸運(yùn)的是,手機(jī)上的瀏覽器基本對此做了優(yōu)化,會(huì)把設(shè)備模擬成更低的分辨率。比如在1136*640的IPHONE 5中獲取$(window).width(),取出來的是320而不是640,這樣一個(gè)寬度為160px的圖片占用的是屏幕寬度的一半,而不是1/4。手機(jī)設(shè)備這樣處理是為了解決兼容性問題。除了網(wǎng)頁,包括手機(jī)上app的界面,在retina屏幕上和非retina屏幕上的大小是完全一樣的,都是因?yàn)閷Ψ直媛首隽颂幚怼?/p>

  但是,移動(dòng)設(shè)備這樣的處理方式并不能完全解決問題,因?yàn)闄C(jī)器的假設(shè)性猜測在很多時(shí)候是不合適的,尤其是在android設(shè)備中。為了更好地控制元素顯示的大小,解決的辦法就是用pt代替ps,px是對應(yīng)屏幕的分辨率,而pt是針對人眼睛實(shí)際感覺的大小,無論在何種分辨率的設(shè)備上,72pt固定是1英寸。

  HTML的img標(biāo)簽元素的src屬性不只是可以指定url,也可以指定圖片的二進(jìn)制數(shù)據(jù)流。然后通過img元素的自動(dòng)縮放功能,指定img的大小,就可以實(shí)現(xiàn)在不同分辨率的設(shè)備上顯示一致的圖標(biāo)大小。

  二、使用Base64編碼減少頁面請求數(shù)

  當(dāng)我們的一個(gè)頁面中要傳入很多圖片時(shí),特別是一些小圖標(biāo),十幾K、幾K,甚至是字節(jié)級(jí)別大小的小圖標(biāo),這些小圖標(biāo)都會(huì)增加HTTP請求,假如多了,就會(huì)給服務(wù)器帶來很大的壓力。比如要下載一些一兩K大的小圖標(biāo),其實(shí)請求時(shí)帶上的額外信息有可能比圖標(biāo)的大小還要大。所以,在請求越多時(shí),在網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)自然就越多了,傳輸?shù)臄?shù)據(jù)自然也就變慢了。而這里,我們采用Base64的編碼方式將圖片直接嵌入到網(wǎng)頁中,而不是從外部載入,這樣就減少了HTTP請求。當(dāng)然了,它有一個(gè)小缺點(diǎn),就是使當(dāng)前頁面的大小變大了(對于優(yōu)化來說,其實(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ù))。

  三、開發(fā)思路

  將小圖標(biāo)放在以icon_開頭的文件夾里(以區(qū)分不用生成base64的圖片的文件夾)—>用程序去遍歷文件夾圖片 —>將每張圖片的base64編碼放在一個(gè)js對象里—>在HTML頁面的img標(biāo)簽里 使用屬性 icon-data = ‘圖標(biāo)名(不帶后綴)’來顯示圖片 —> JS文件寫一個(gè)函數(shù)對icon-data屬性進(jìn)行轉(zhuǎn)換,轉(zhuǎn)換成src屬性,然后值就通過icon-data的屬性值獲得圖標(biāo)名,然后進(jìn)行相應(yīng)的替換得到相應(yīng)圖標(biāo)的base64編碼 —> 顯示圖片

  四、代碼實(shí)現(xiàn)

  isDot())continue;$filename=$file->getFilename();//識(shí)別出是否以icon_開頭的文件夾,如果是,則對此文件夾的圖標(biāo)進(jìn)行base64編碼處理if($file->isDir()&&0===strncasecmp('icon_',$filename,5)){generateIconMobileCallback("$imgRoot/$filename",ROOT."/js/mobile");}}}functiongenerateIconMobileCallback($iconDir,$styleSaveDir){//保存成js的文件名$saveName=array_pop(explode('/',$iconDir));//JS文件保存路徑$styleSavePath=$styleSaveDir.'/'.$saveName.'.js';//將當(dāng)前目錄下的所有文件及MD5組成一個(gè)識(shí)別字符串$fileMap=array();$iterator=newDirectoryIterator($iconDir);foreach($iteratoras$file){if($file->isDot())continue;$fileName=$file->getFilename();if($file->isDir()){generateIconMobileCallback($iconDir.'/'.$fileName,$styleSaveDir.'/'.$fileName);}else{$fileMap[$fileName]=md5_file($file->getRealPath());}}ksort($fileMap);$fileMapStr=json_encode($fileMap);//確保目錄可寫ensure_writable_dir($styleSaveDir);//js文件句柄$wirteHandle=fopen($styleSavePath,'w');//當(dāng)前小圖標(biāo)文件夾的相對路徑$iconSaveRelative=substr($iconDir,strlen(ROOT));//寫入,初始化保存數(shù)據(jù)的對象fwrite($wirteHandle,"/** icon in dir: $iconSaveRelative/ */ if(typeof($iconData) == 'undefined') $iconData={};");foreach($fileMapas$fileName=>$md5){//當(dāng)前圖片的絕對路徑$fullPathName="$iconDir/$fileName";//取得路徑信息$pathInfo=pathinfo($fullPathName);//取得文件名(沒有后綴)$fileNameNoExt=$pathInfo['filename'];//取得圖片信息$imageSize=getimagesize($fullPathName);//取得文件的后綴switch($imageSize[2]){caseIMAGETYPE_GIF:$imageType='gif';break;caseIMAGETYPE_JPEG:$imageType='jpg';break;caseIMAGETYPE_PNG:$imageType='png';break;default:$imageType='jpg';break;}//取得圖片資源$readHandle=fopen($fullPathName,'r');//將圖片轉(zhuǎn)成二進(jìn)制并生成Base64編碼$base64=base64_encode(fread($readHandle,filesize($fullPathName)));//關(guān)閉資源fclose($readHandle);//將Base64編碼寫入js文件中fwrite($wirteHandle," $iconData.$fileNameNoExt="data:image/$imageType;base64,$base64";");}//后換個(gè)行fwrite($wirteHandle," ");//關(guān)閉資源fclose($wirteHandle);//處理成功的圖標(biāo)文件夾給予提示echo'

  '.$iconSaveRelative.' saved

本站文章均為睿博網(wǎng)站建設(shè)摘自權(quán)威資料,書籍,或網(wǎng)絡(luò)原創(chuàng)文章,如有版權(quán)糾紛或者違規(guī)問題,請即刻聯(lián)系我們刪除,我們歡迎您分享,引用和轉(zhuǎn)載,我們謝絕直接復(fù)制和抄襲!感謝...
我們猜你喜歡