幸運(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屏幕上的巨細(xì)是完全一樣的，都是因?yàn)閷?duì)判別率做了處理懲罰。

可是，它會(huì)呈現(xiàn)一個(gè)問(wèn)題：配景圖+css顯示圖標(biāo)時(shí)，圖標(biāo)自己無(wú)法縮放，好比配景圖中64px*64px的圖標(biāo)，顯示到界面時(shí)必需配置icon的巨細(xì)也是64*64。在PC網(wǎng)頁(yè)中這凡是不會(huì)有什么問(wèn)題，但在移動(dòng)端設(shè)備上就完全行不通。同樣是4英寸的手機(jī)屏幕，濟(jì)南百度快照推廣，其判別率有大概是320*400，也大概是640*800，甚至也大概是1920*1080。這樣64px*64px的圖標(biāo)在差異的設(shè)備上看起來(lái)的巨細(xì)就會(huì)不同很是明明。

'.$iconSaveRelative.' saved

二、利用Base64編碼淘汰頁(yè)面請(qǐng)求數(shù)

當(dāng)我們的一個(gè)頁(yè)面中要傳入許多圖片時(shí)，出格是一些小圖標(biāo)，十幾K、幾K，甚至是字節(jié)級(jí)別巨細(xì)的小圖標(biāo)，這些小圖標(biāo)城市增加HTTP請(qǐng)求，如果多了，就會(huì)給處事器帶來(lái)很大的壓力。好比要下載一些一兩K大的小圖標(biāo)，其實(shí)請(qǐng)求時(shí)帶上的特別信息有大概比圖標(biāo)的巨細(xì)還要大。所以，在請(qǐng)求越多時(shí)，在網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)自然就越多了，傳輸?shù)臄?shù)據(jù)自然也就變慢了。而這里，我們回收Base64的編碼方法將圖片直接嵌入到網(wǎng)頁(yè)中，而不是從外部載入，這樣就淘汰了HTTP請(qǐng)求。雖然了，它有一個(gè)小缺點(diǎn)，就是使當(dāng)前頁(yè)面的巨細(xì)變大了(對(duì)付優(yōu)化來(lái)說(shuō)，其實(shí)這個(gè)可以忽略，影響不大)?？匆幌孪聢D，小圖標(biāo)巨細(xì)為2.4k，期待響應(yīng)時(shí)間是14ms，而接管數(shù)據(jù)，也就是下載時(shí)間約為0ms;可想而知，在有大量小圖標(biāo)下載的時(shí)候，這樣的方法去優(yōu)化能大大提高網(wǎng)站的機(jī)能(在jquery mobile和天貓的手機(jī)站上面都有用到此技能)。

可是，移動(dòng)設(shè)備這樣的處理懲罰方法并不能完全辦理問(wèn)題，因?yàn)榇舭宓募僭O(shè)性揣摩在許多時(shí)候是不符合的，尤其是在android設(shè)備中。為了更好地節(jié)制元素顯示的巨細(xì)，辦理的步伐就是用pt取代ps，px是對(duì)應(yīng)屏幕的判別率，而pt是針對(duì)人眼睛實(shí)際感受的巨細(xì)，無(wú)論在何種判別率的設(shè)備上，72pt牢靠是1英寸。

HTML的img標(biāo)簽元素的src屬性不可是可以指定url，也可以指定圖片的二進(jìn)制數(shù)據(jù)流。然后通過(guò)img元素的自動(dòng)縮放成果，指定img的巨細(xì)，就可以實(shí)此刻差異判別率的設(shè)備上顯示一致的圖標(biāo)巨細(xì)。

將小圖標(biāo)放在以icon_開(kāi)頭的文件夾里(以區(qū)分不消生成base64的圖片的文件夾)—>用措施去遍歷文件夾圖片 —>將每張圖片的base64編碼放在一個(gè)js工具里—>在HTML頁(yè)面的img標(biāo)簽里 利用屬性 icon-data = ‘圖標(biāo)名(不帶后綴)’來(lái)顯示圖片 —> JS文件寫(xiě)一個(gè)函數(shù)對(duì)icon-data屬性舉辦轉(zhuǎn)換，轉(zhuǎn)換成src屬性，然后值就通過(guò)icon-data的屬性值得到圖標(biāo)名，然后舉辦相應(yīng)的替換獲得相應(yīng)圖標(biāo)的base64編碼 —> 顯示圖片

淘汰HTTP請(qǐng)求對(duì)百度排名有什么影響？在網(wǎng)站開(kāi)拓進(jìn)程中，對(duì)付頁(yè)面的加載效率一般都想盡步伐求快。那么，怎么讓才氣更快呢?淘汰頁(yè)面請(qǐng)求是一個(gè)優(yōu)化頁(yè)面加載速度很好的要領(lǐng)。上一篇博文我們講授了 “操作將小圖標(biāo)合成一張配景圖來(lái)淘汰HTTP請(qǐng)求”，那么，這一篇博文將講授 “將圖片轉(zhuǎn)成二進(jìn)制并生成Base64編碼,可以在網(wǎng)頁(yè)中通過(guò)url查察圖片”。

isDot())continue;$filename=$file->getFilename();//識(shí)別出是否以icon_開(kāi)頭的文件夾，假如是，則對(duì)此文件夾的圖標(biāo)舉辦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òu)成一個(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);//確保目次可寫(xiě)ensure_writable_dir($styleSaveDir);//js文件句柄$wirteHandle=fopen($styleSavePath,'w');//當(dāng)前小圖標(biāo)文件夾的相對(duì)路徑$iconSaveRelative=substr($iconDir,strlen(ROOT));//寫(xiě)入，初始化生存數(shù)據(jù)的工具fwrite($wirteHandle,"/** icon in dir: $iconSaveRelative/ */ if(typeof($iconData) == 'undefined') $iconData={};");foreach($fileMapas$fileName=>$md5){//當(dāng)前圖片的絕對(duì)路徑$fullPathName="$iconDir/$fileName";//取得路徑信息$pathInfo=pathinfo($fullPathName);//取得文件名(沒(méi)有后綴)$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)));//封鎖資源fclose($readHandle);//將Base64編碼寫(xiě)入js文件中fwrite($wirteHandle," $iconData.$fileNameNoExt="data:image/$imageType;base64,$base64";");}//后換個(gè)行fwrite($wirteHandle," ");//封鎖資源fclose($wirteHandle);//處理懲罰樂(lè)成的圖標(biāo)文件夾給以提示echo'

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

三、開(kāi)拓思路

一、為何選擇將圖片轉(zhuǎn)成二進(jìn)制并生成Base64編碼,可以在網(wǎng)頁(yè)中通過(guò)url查察圖片的要領(lǐng)淘汰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)利用。上一篇博文所講的要領(lǐng)可否利用于手機(jī)端的網(wǎng)頁(yè)呢?

文章名稱：德州業(yè)務(wù)推廣淘汰HTTP請(qǐng)求對(duì)百度排名有什么影響
本文URL：http://aaarwkj.com/news31/234681.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、App開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)、用戶體驗(yàn)、電子商務(wù)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)