在網站開發過程當中,對於頁面的加載效率通常都想盡辦法求快。那麼,怎麼讓才能更快呢?減小頁面請求 是一個優化頁面加載速度很好的方法。上一篇博文咱們講解了 「利用將小圖標合成一張背景圖來減小HTTP請求」,那麼,這一篇博文將講解 「 將圖片轉成二進制並生成Base64編碼,能夠在網頁中經過url查看圖片」。php
1、爲什麼選擇將圖片轉成二進制並生成Base64編碼,能夠在網頁中經過url查看圖片的方法減小HTTP請求數?css
爲何我會講解 「將圖片轉成二進制並生成Base64編碼,能夠在網頁中經過url查看圖片」 這一種方式來減小HTTP請求,進而優化頁面呢?這裏呢,是涉及到移動端的圖標使用。上一篇博文所講的方法可否使用於手機端的網頁呢?html
可是,它會出現一個問題:背景圖+css顯示圖標時,圖標自己沒法縮放,好比背景圖中64px*64px的圖標,顯示到界面時必須設置icon的大小也是64*64。在PC網頁中這一般不會有什麼問題,但在移動端設備上就徹底行不通。一樣是4英寸的手機屏幕,其分辨率有多是320*400,也多是640*800,甚至也多是1920*1080。這樣64px*64px的圖標在不一樣的設備上看起來的大小就會差異很是明顯。jquery
幸運的是,手機上的瀏覽器基本對此作了優化,會把設備模擬成更低的分辨率。好比在1136*640的IPHONE 5中獲取$(window).width(),取出來的是320而不是640,這樣一個寬度爲160px的圖片佔用的是屏幕寬度的一半,而不是1/4。手機設備這樣處理是爲了解決兼容性問題。除了網頁,包括手機上app的界面,在retina屏幕上和非retina屏幕上的大小是徹底同樣的,都是由於對分辨率作了處理。android
可是,移動設備這樣的處理方式並不能徹底解決問題,由於機器的假設性猜想在不少時候是不合適的,尤爲是在android設備中。爲了更好地控制元素顯示的大小,解決的辦法就是用pt代替ps,px是對應屏幕的分辨率,而pt是針對人眼睛實際感受的大小,不管在何種分辨率的設備上,72pt固定是1英寸。json
HTML的img標籤元素的src屬性不僅是能夠指定url,也能夠指定圖片的二進制數據流。而後經過img元素的自動縮放功能,指定img的大小,就能夠實如今不一樣分辨率的設備上顯示一致的圖標大小。瀏覽器
2、使用Base64編碼減小頁面請求數緩存
當咱們的一個頁面中要傳入不少圖片時,特別是一些小圖標,十幾K、幾K,甚至是字節級別大小的小圖標,這些小圖標都會增長HTTP請求,假如多了,就會給服務器帶來很大的壓力。好比要下載一些一兩K大的小圖標,其實請求時帶上的額外信息有可能比圖標的大小還要大。因此,在請求越多時,在網絡傳輸的數據天然就越多了,傳輸的數據天然也就變慢了。而這裏,咱們採用Base64的編碼方式將圖片直接嵌入到網頁中,而不是從外部載入,這樣就減小了HTTP請求。固然了,它有一個小缺點,就是使當前頁面的大小變大了(對於優化來講,其實這個能夠忽略,影響不大)。看一下下圖,小圖標大小爲2.4k,等待響應時間是14ms,而接受數據,也就是下載時間約爲0ms;可想而知,在有大量小圖標下載的時候,這樣的方式去優化能大大提升網站的性能(在jquery mobile和天貓的手機站上面都有用到此技術)。性能優化
3、開發思路服務器
將小圖標放在以icon_開頭的文件夾裏(以區分不用生成base64的圖片的文件夾)—>用程序去遍歷文件夾圖片 —>將每張圖片的base64編碼放在一個js對象裏—>在HTML頁面的img標籤裏 使用屬性 icon-data = '圖標名(不帶後綴)'來顯示圖片 —> JS文件寫一個函數對icon-data屬性進行轉換,轉換成src屬性,而後值就經過icon-data的屬性值得到圖標名,而後進行相應的替換獲得相應圖標的base64編碼 —> 顯示圖片
4、代碼實現
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 }
5、實現效果
這是頁面輸入效果,小圖標正常顯示出來了
這裏咱們自動生成的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)固然能夠配合其餘優化技術一塊兒使用,效果更明顯,好比緩存等。
這一次就分享那麼多給你們,代碼我都貼上了,並且不少都標上了註釋,方便你們理解。
若是此博文中有哪裏講得讓人難以理解,歡迎留言交流,如有講解錯的地方歡迎指出。
若是您以爲您能在此博文學到了新知識,請爲我頂一個,如文章中有解釋錯的地方,歡迎指出。
互相學習,共同進步!