在網站開發過程中，對於頁面的載入效率一般都想盡辦法求快。那麼，怎麼讓才能更快呢？減少頁面請求是一個最佳化頁面載入速度很好的方法。上一篇博文我們講解了 “利用將小圖示合成一張背景圖來減少HTTP請求”，那麼，這一篇博文將講解 “將圖片轉成二進位制並生成Base64編碼,可以在網頁中透過url檢視圖片”。
一、為何選擇將圖片轉成二進位制並生成Base64編碼,可以在網頁中透過url檢視圖片的方法減少HTTP請求數？
為什麼我會講解 “將圖片轉成二進位制並生成Base64編碼,可以在網頁中透過url檢視圖片” 這一種方式來減少HTTP請求，進而最佳化頁面呢？這裡呢，是涉及到移動端的圖示使用。上一篇博文所講的方法能否使用於手機端的網頁呢？
但是，它會出現一個問題：背景圖+css顯示圖示時，圖示本身無法縮放，比如背景圖中64px*64px的圖示，顯示到介面時必須設定icon的大小也是64*64。在PC網頁中這通常不會有什麼問題，但在移動端裝置上就完全行不通。同樣是4英寸的手機螢幕，其解析度有可能是320*400，也可能是640*800，甚至也可能是1920*1080。這樣64px*64px的圖示在不同的裝置上看起來的大小就會差別非常明顯。
幸運的是，手機上的瀏覽器基本對此做了最佳化，會把裝置模擬成更低的解析度。比如在1136*640的iPhone 5中獲取$(window).width(),取出來的是320而不是640，這樣一個寬度為160px的圖片佔用的是螢幕寬度的一半，而不是1/4。手機裝置這樣處理是為了解決相容性問題。除了網頁，包括手機上app的介面，在retina螢幕上和非retina螢幕上的大小是完全一樣的，都是因為對解析度做了處理。
但是，移動裝置這樣的處理方式並不能完全解決問題，因為機器的假設性猜測在很多時候是不合適的，尤其是在android裝置中。為了更好地控制元素顯示的大小，解決的辦法就是用pt代替ps，px是對應螢幕的解析度，而pt是針對人眼睛實際感覺的大小，無論在何種解析度的裝置上，72pt固定是1英寸。
HTML的img標籤元素的src屬性不只是可以指定url，也可以指定圖片的二進位制資料流。然後透過img元素的自動縮放功能，指定img的大小，就可以實現在不同解析度的裝置上顯示一致的圖示大小。
二、使用Base64編碼減少頁面請求數
當我們的一個頁面中要傳入很多圖片時，特別是一些小圖示，十幾K、幾K，甚至是位元組級別大小的小圖示，這些小圖示都會增加HTTP請求，假如多了，就會給伺服器帶來很大的壓力。比如要下載一些一兩K大的小圖示，其實請求時帶上的額外資訊有可能比圖示的大小還要大。所以，在請求越多時，在網路傳輸的資料自然就越多了，傳輸的資料自然也就變慢了。而這裡，我們採用Base64的編碼方式將圖片直接嵌入到網頁中，而不是從外部載入，這樣就減少了HTTP請求。當然了，它有一個小缺點，就是使當前頁面的大小變大了（對於最佳化來說，其實這個可以忽略，影響不大）。看一下下圖，小圖示大小為2.4k，等待響應時間是14ms，而接受資料，也就是下載時間約為0ms；可想而知，在有大量小圖示下載的時候，這樣的方式去最佳化能大大提高網站的效能（在jquery mobile和天貓的手機站上面都有用到此技術）。
三、開發思路
將小圖示放在以icon_開頭的資料夾裡（以區分不用生成base64的圖片的資料夾）—>用程式去遍歷資料夾圖片 —>將每張圖片的base64編碼放在一個js物件裡—>在HTML頁面的img標籤裡 使用屬性 icon-data = ‘圖示名(不帶字尾)’來顯示圖片 —> JS檔案寫一個函式對icon-data屬性進行轉換，轉換成src屬性，然後值就透過icon-data的屬性值獲得圖示名，然後進行相應的替換得到相應圖示的base64編碼 —> 顯示圖片
四、程式碼實現
XHTML| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 | <?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));//寫入，初始化儲存資料的物件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');//將圖片轉成二進位制並生成Base64編碼$base64=base64_encode(fread($readHandle,filesize($fullPathName)));//關閉資源fclose($readHandle);//將Base64編碼寫入js檔案中fwrite($wirteHandle,"/n/$iconData.$fileNameNoExt=/"data:image/$imageType;base64,$base64/";");}//最後換個行fwrite($wirteHandle,"/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> |
然後這裡附上屬性轉換的JS程式碼
JavaScript| 12345678910111213141516 | $(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');}});}} |
五、實現效果
這是頁面輸入效果，小圖示正常顯示出來了
這裡我們自動生成的JS檔案是這樣子的格式：
頁面呼叫的程式碼：
JS對img的icon-data屬性轉換處理的程式碼：
我們對比下用base64編碼和不用base64時所花費的時間：
先看不用的速度
再看我們用了base64編碼的速度 
假如一個頁面有很多小圖示，那麼這種方式對網站的效能最佳化會有大大的提升。如今此種最佳化方案是用在我現在的專案中移動端，而上一篇博文講解的生成背景圖的最佳化方案用在我們專案中的PC端。最佳化效果是很明顯的！當然了，base64編碼這種方法也可以用在PC端，我們的專案為啥將它用在手機端，本博文開頭部分也有對其做解釋。這裡測試我就直接在PC端測試，手機端測試也是一個樣的。
這裡我補充一點：
（1）所生成的base64的js檔案是在開發中就生成的了，而不是在使用者訪問時才去生成，我把HTML程式碼和PHP程式碼寫在一個檔案裡是方便，在真實專案中是分開的；
（2）使用此種最佳化技術有它的優點，當然也會有它的缺點，只有適合自己專案的最佳化技術才是好技術；
（3）此中最佳化技術建議使用在手機端（可以解決背景圖最佳化方式所不能解決的問題），而PC端的則用合併小圖示生成背景圖的方式（看此文：http://www.cnblogs.com/it-cen/p/4618954.html）；
（4）此種最佳化技術一般用於小圖示（十幾K以下），也就是HTTP響應時間遠遠大於下載時間的時候，用此方法最佳化會看到明顯的效果；
（5）當然可以配合其他最佳化技術一起使用，效果更明顯，比如快取等。
這一次就分享那麼多給大家，程式碼我都貼上了，而且很多都標上了註釋，方便大家理解。