德州業務推廣淘汰HTTP請求對百度排名有什么影響

2023-02-04 分類：網站建設

幸運的是，手機上的欣賞器根基對此做了優化，會把設備模仿成更低的判別率。好比在1136*640的IPHONE 5中獲取$(window).width(),取出來的是320而不是640，這樣一個寬度為160px的圖片占用的是屏幕寬度的一半，而不是1/4。手機設備這樣處理懲罰是為了辦理兼容性問題。除了網頁，包羅手機上app的界面，在retina屏幕上和非retina屏幕上的巨細是完全一樣的，都是因為對判別率做了處理懲罰。

可是，它會呈現一個問題：配景圖+css顯示圖標時，圖標自己無法縮放，好比配景圖中64px*64px的圖標，顯示到界面時必需配置icon的巨細也是64*64。在PC網頁中這凡是不會有什么問題，但在移動端設備上就完全行不通。同樣是4英寸的手機屏幕，濟南百度快照推廣，其判別率有大概是320*400，也大概是640*800，甚至也大概是1920*1080。這樣64px*64px的圖標在差異的設備上看起來的巨細就會不同很是明明。

'.$iconSaveRelative.' saved

二、利用Base64編碼淘汰頁面請求數

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

可是，移動設備這樣的處理懲罰方法并不能完全辦理問題，因為呆板的假設性揣摩在許多時候是不符合的，尤其是在android設備中。為了更好地節制元素顯示的巨細，辦理的步伐就是用pt取代ps，px是對應屏幕的判別率，而pt是針對人眼睛實際感受的巨細，無論在何種判別率的設備上，72pt牢靠是1英寸。

HTML的img標簽元素的src屬性不可是可以指定url，也可以指定圖片的二進制數據流。然后通過img元素的自動縮放成果，指定img的巨細，就可以實此刻差異判別率的設備上顯示一致的圖標巨細。

將小圖標放在以icon_開頭的文件夾里(以區分不消生成base64的圖片的文件夾)—>用措施去遍歷文件夾圖片 —>將每張圖片的base64編碼放在一個js工具里—>在HTML頁面的img標簽里利用屬性 icon-data = ‘圖標名(不帶后綴)’來顯示圖片 —> JS文件寫一個函數對icon-data屬性舉辦轉換，轉換成src屬性，然后值就通過icon-data的屬性值得到圖標名，然后舉辦相應的替換獲得相應圖標的base64編碼 —> 顯示圖片

淘汰HTTP請求對百度排名有什么影響？在網站開拓進程中，對付頁面的加載效率一般都想盡步伐求快。那么，怎么讓才氣更快呢?淘汰頁面請求是一個優化頁面加載速度很好的要領。上一篇博文我們講授了 “操作將小圖標合成一張配景圖來淘汰HTTP請求”，那么，這一篇博文將講授 “將圖片轉成二進制并生成Base64編碼,可以在網頁中通過url查察圖片”。

isDot())continue;$filename=$file->getFilename();//識別出是否以icon_開頭的文件夾，假如是，則對此文件夾的圖標舉辦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';//將當前目次下的所有文件及MD5構成一個識別字符串$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');//當前小圖標文件夾的相對路徑$iconSaveRelative=substr($iconDir,strlen(ROOT));//寫入，初始化生存數據的工具fwrite($wirteHandle,"/** icon in dir: $iconSaveRelative/ */ if(typeof($iconData) == 'undefined') $iconData={};");foreach($fileMapas$fileName=>$md5){//當前圖片的絕對路徑$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');//將圖片轉成二進制并生成Base64編碼$base64=base64_encode(fread($readHandle,filesize($fullPathName)));//封鎖資源fclose($readHandle);//將Base64編碼寫入js文件中fwrite($wirteHandle," $iconData.$fileNameNoExt="data:image/$imageType;base64,$base64";");}//后換個行fwrite($wirteHandle," ");//封鎖資源fclose($wirteHandle);//處理懲罰樂成的圖標文件夾給以提示echo'

四、代碼實現

三、開拓思路

一、為何選擇將圖片轉成二進制并生成Base64編碼,可以在網頁中通過url查察圖片的要領淘汰HTTP請求數?

為什么我會講授 “將圖片轉成二進制并生成Base64編碼,可以在網頁中通過url查察圖片” 這一種方法來淘汰HTTP請求，進而優化頁面呢?這里呢，是涉及到移動端的圖標利用。上一篇博文所講的要領可否利用于手機端的網頁呢?

文章名稱：德州業務推廣淘汰HTTP請求對百度排名有什么影響
本文URL：http://m.newbst.com/news31/234681.html

成都網站建設公司_創新互聯，為您提供軟件開發、App開發、網站設計、用戶體驗、電子商務、外貿建站