在網站開發過程中，對於頁面的加載效率一般都想盡辦法求快。那麼，怎麼讓才能更快呢？減少頁面請求 是一個優化頁面加載速度很好的方法。上一篇博文我們講解了 “利用將小圖標合成一張背景圖來減少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編碼 —> 顯示圖片
四、代碼實現
<?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->i