減小HTTP請求之將圖片轉成二進制並生成Base64編碼,能夠在網頁中經過url查看圖片(大型網站優化技術)

  在網站開發過程當中,對於頁面的加載效率通常都想盡辦法求快。那麼,怎麼讓才能更快呢?減小頁面請求 是一個優化頁面加載速度很好的方法。上一篇博文咱們講解了 「利用將小圖標合成一張背景圖來減小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)固然能夠配合其餘優化技術一塊兒使用,效果更明顯,好比緩存等。

 

  這一次就分享那麼多給你們,代碼我都貼上了,並且不少都標上了註釋,方便你們理解。

  

  若是此博文中有哪裏講得讓人難以理解,歡迎留言交流,如有講解錯的地方歡迎指出。

  若是您以爲您能在此博文學到了新知識,請爲我頂一個,如文章中有解釋錯的地方,歡迎指出。

  互相學習,共同進步!

相關文章
相關標籤/搜索