在網站開發過程中，對於頁面的加載效率一般都想盡辦法求快。那么，怎么讓才能更快呢？減少頁面請求 是一個優化頁面加載速度很好的方法。上一篇博文我們講解了 “利用將小圖標合成一張背景圖來減少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編碼 —> 顯示圖片
四、代碼實現
1 <?php 2 $pathinfo = pathinfo($_SERVER['SCRIPT_FILENAME']); 3 define('ROOT', $pathinfo['dirname']); 4 5 function generateIcon_mobile() { 6 $imgRoot = ROOT."/img/mobile"; 7 $iterator = new DirectoryIterator($imgRoot); 8 foreach ($iterator as $file) { 9 if ($file->isDot()) continue; 10 $filename = $file->getFilename(); 11 12 //識別出是否以icon_開頭的文件夾，如果是，則對此文件夾的圖標進行base64編碼處理 13 if ($file->isDir() && 0 === strncasecmp('icon_', $filename, 5)) { 14 generateIconMobileCallback("$imgRoot/$filename", ROOT."/js/mobile"); 15 } 16 } 17 18 } 19 20 function generateIconMobileCallback($iconDir, $styleSaveDir) { 21 //保存成js的文件名 22 $saveName = array_pop(explode('/', $iconDir)); 23 //JS文件保存路徑 24 $styleSavePath = $styleSaveDir.'/'.$saveName.'.js'; 25 26 //將當前目錄下的所有文件及MD5組成一個識別字符串 27 $fileMap = array(); 28 $iterator = new DirectoryIterator($iconDir); 29 foreach ($iterator as $file) { 30 if ($file->isDot()) continue; 31 $fileName = $file->getFilename(); 32 if ($file->isDir()) { 33 generateIconMobileCallback($iconDir.'/'.$fileName, $styleSaveDir.'/'.$fileName); 34 } else { 35 $fileMap[$fileName] = md5_file($file->getRealPath()); 36 } 37 } 38 ksort($fileMap); 39 $fileMapStr = json_encode($fileMap); 40 41 //確保目錄可寫 42 ensure_writable_dir($styleSaveDir); 43 44 //js文件句柄 45 $wirteHandle = fopen($styleSavePath, 'w'); 46 //當前小圖標文件夾的相對路徑 47 $iconSaveRelative = substr($iconDir, strlen(ROOT)); 48 //寫入，初始化保存數據的對象 49 fwrite($wirteHandle, "/** icon in dir: $iconSaveRelative/ */ \nif(typeof(\$iconData) == 'undefined') \$iconData={};"); 50 foreach ($fileMap as $fileName => $md5) { 51 //當前圖片的絕對路徑 52 $fullPathName = "$iconDir/$fileName"; 53 //取得路徑信息 54 $pathInfo = pathinfo($fullPathName); 55 //取得文件名（沒有后綴） 56 $fileNameNoExt = $pathInfo['filename']; 57 //取得圖片信息 58 $imageSize = getimagesize($fullPathName); 59 60 //取得文件的后綴 61 switch ($imageSize[2]) { 62 case IMAGETYPE_GIF: 63 $imageType = 'gif'; 64 break; 65 case IMAGETYPE_JPEG: 66 $imageType = 'jpg'; 67 break; 68 case IMAGETYPE_PNG: 69 $imageType = 'png'; 70 break; 71 72 default: 73 $imageType = 'jpg'; 74 break; 75 } 76 77 //取得圖片資源 78 $readHandle = fopen($fullPathName, 'r'); 79 //將圖片轉成二進制並生成Base64編碼 80 $base64 = base64_encode(fread($readHandle, filesize($fullPathName))); 81 //關閉資源 82 fclose($readHandle); 83 //將Base64編碼寫入js文件中 84 fwrite($wirteHandle, "\n\$iconData.$fileNameNoExt=\"data:image/$imageType;base64,$base64\";"); 85 } 86 //最后換個行 87 fwrite($wirteHandle, "\n"); 88 //關閉資源 89 fclose($wirteHandle); 90 91 //處理成功的圖標文件夾給予提示 92 echo '<p>'.$iconSaveRelative. ' saved</p>'; 93 } 94 95 /** 96 * 確保文件夾存在並可寫 97 * 98 * @param string $dir 99 */ 100 function ensure_writable_dir($dir) { 101 if(!file_exists($dir)) { 102 mkdir($dir, 0766, true); 103 @chmod($dir, 0766); 104 @chmod($dir, 0777); 105 } 106 else if(!is_writable($dir)) { 107 @chmod($dir, 0766); 108 @chmod($dir, 0777); 109 if(!@is_writable($dir)) { 110 throw new BusinessLogicException("目錄不可寫", $dir); 111 } 112 } 113 } 114 generateIcon_mobile(); 115 ?> 116 117 <!DOCTYPE html> 118 <html> 119 <head> 120 <title></title> 121 </head> 122 <body> 123 <br> 124 <br> 125 <br> 126 127 <div>我們直接引入所生成的js文件，測試一下是否成功</div> 128 <br> 129 <div>直接在img標簽里加入 icon-data = '圖標文件名' 例如 <\img icon-data="tryit">,查看效果</div> 130 <br> 131 <br> 132 <br> 133 <img icon-data="tryit"> 134 <script src="js/mobile/icon_pink.js"></script> 135 <script src="js/mobile/jquery.all.min.js"></script> 136 <script src="js/mobile/attrHandle.js"></script> 137 </body> 138 </html>
然后這里附上屬性轉換的JS代碼
1 $(function(){ 2 setIconData(); 3 }); 4 5 function setIconData() { 6 if (typeof($iconData != 'undefined')) { 7 $('img[icon-data]').each(function() { 8 var self = $(this); 9 var name = self.attr('icon-data'); 10 if (typeof($iconData[name]) != 'undefined') { 11 self.attr('src', $iconData[name]); 12 self.removeAttr('icon-data'); 13 } 14 }); 15 } 16 }
五、實現效果
這是頁面輸入效果，小圖標正常顯示出來了
這里我們自動生成的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）當然可以配合其他優化技術一起使用，效果更明顯，比如緩存等。
這一次就分享那么多給大家，代碼我都貼上了，而且很多都標上了注釋，方便大家理解。
如果此博文中有哪里講得讓人難以理解，歡迎留言交流，若有講解錯的地方歡迎指出。
如果您覺得您能在此博文學到了新知識，請為我頂一個，如文章中有解釋錯的地方，歡迎指出。
互相學習，共同進步！