在網(wǎng)站開發(fā)過程中，對于頁面的加載效率一般都想盡辦法求快。那么，怎么讓才能更快呢？減少頁面請求是一個優(yōu)化頁面加載速度很好的方法。上一篇博文我們講解了 “利用將小圖標合成一張背景圖來減少HTTP請求”，那么，這一篇博文將講解 “將圖片轉(zhuǎn)成二進制并生成Base64編碼,可以在網(wǎng)頁中通過url查看圖片”。

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

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

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

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

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

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

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

當我們的一個頁面中要傳入很多圖片時，特別是一些小圖標，十幾K、幾K，甚至是字節(jié)級別大小的小圖標，這些小圖標都會增加HTTP請求，假如多了，就會給服務(wù)器帶來很大的壓力。比如要下載一些一兩K大的小圖標，其實請求時帶上的額外信息有可能比圖標的大小還要大。所以，在請求越多時，在網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)自然就越多了，傳輸?shù)臄?shù)據(jù)自然也就變慢了。而這里，我們采用Base64的編碼方式將圖片直接嵌入到網(wǎng)頁中，而不是從外部載入，這樣就減少了HTTP請求。當然了，它有一個小缺點，就是使當前頁面的大小變大了（對于優(yōu)化來說，其實這個可以忽略，影響不大）?？匆幌孪聢D，小圖標大小為2.4k，等待響應(yīng)時間是14ms，而接受數(shù)據(jù)，也就是下載時間約為0ms；可想而知，在有大量小圖標下載的時候，這樣的方式去優(yōu)化能大大提高網(wǎng)站的性能（在jquery mobile和天貓的手機站上面都有用到此技術(shù)）。

三、開發(fā)思路

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

四、代碼實現(xiàn)

<?php$pathinfo=pathinfo($_SERVER['SCRIPT_FILENAME']);define('ROOT',$pathinfo['dirname']);functiongenerateIcon_mobile(){$imgRoot=ROOT."/img/mobile";$iterator=newDirectoryIterator($imgRoot);foreach($iteratoras$file){if($file->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));//寫入，初始化保存數(shù)據(jù)的對象fwrite($wirteHandle,"/** icon in dir: $iconSaveRelative/ */ /nif(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');//將圖片轉(zhuǎn)成二進制并生成Base64編碼$base64=base64_encode(fread($readHandle,filesize($fullPathName)));//關(guān)閉資源fclose($readHandle);//將Base64編碼寫入js文件中fwrite($wirteHandle,"/n/$iconData.$fileNameNoExt=/"data:image/$imageType;base64,$base64/";");}//最后換個行fwrite($wirteHandle,"/n");//關(guān)閉資源fclose($wirteHandle);//處理成功的圖標文件夾給予提示echo'<p>'.$iconSaveRelative.' saved</p>';}/*** 確保文件夾存在并可寫** @param string $dir*/functionensure_writable_dir($dir){if(!file_exists($dir)){mkdir($dir,0766,true);@chmod($dir,0766);@chmod($dir,0777);}elseif(!is_writable($dir)){@chmod($dir,0766);@chmod($dir,0777);if(!@is_writable($dir)){thrownewBusinessLogicException("目錄不可寫",$dir);}}}generateIcon_mobile();?><!DOCTYPE html><html><head><title></title></head><body><br><br><br><div>我們直接引入所生成的js文件，測試一下是否成功</div><br><div>直接在img標簽里加入 icon-data = '圖標文件名'例如</img icon-data="tryit">,查看效果</div><br><br><br><img icon-data="tryit"><script src="js/mobile/icon_pink.js"></script><script src="js/mobile/jquery.all.min.js"></script><script src="js/mobile/attrHandle.js"></script></body></html>

然后這里附上屬性轉(zhuǎn)換的JS代碼

$(function(){setIconData();});functionsetIconData(){if(typeof($iconData!='undefined')){$('img[icon-data]').each(function(){varself=$(this);varname=self.attr('icon-data');if(typeof($iconData[name])!='undefined'){self.attr('src',$iconData[name]);self.removeAttr('icon-data');}});}}