在網(wǎng)站開發(fā)過(guò)程中，對(duì)于頁(yè)面的加載效率一般都想盡辦法求快。那么，怎么讓才能更快呢？減少頁(yè)面請(qǐng)求 是一個(gè)優(yōu)化頁(yè)面加載速度很好的方法。上一篇博文我們講解了 “利用將小圖標(biāo)合成一張背景圖來(lái)減少HTTP請(qǐng)求”，那么，這一篇博文將講解 “ 將圖片轉(zhuǎn)成二進(jìn)制并生成Base64編碼,可以在網(wǎng)頁(yè)中通過(guò)url查看圖片”。

一、為何選擇將圖片轉(zhuǎn)成二進(jìn)制并生成Base64編碼,可以在網(wǎng)頁(yè)中通過(guò)url查看圖片的方法減少HTTP請(qǐng)求數(shù)？

為什么我會(huì)講解 “將圖片轉(zhuǎn)成二進(jìn)制并生成Base64編碼,可以在網(wǎng)頁(yè)中通過(guò)url查看圖片” 這一種方式來(lái)減少HTTP請(qǐng)求，進(jìn)而優(yōu)化頁(yè)面呢？這里呢，是涉及到移動(dòng)端的圖標(biāo)使用。上一篇博文所講的方法能否使用于手機(jī)端的網(wǎng)頁(yè)呢？
但是，它會(huì)出現(xiàn)一個(gè)問(wèn)題：背景圖+css顯示圖標(biāo)時(shí)，圖標(biāo)本身無(wú)法縮放，比如背景圖中64px*64px的圖標(biāo)，顯示到界面時(shí)必須設(shè)置icon的大小也是64*64。在PC網(wǎng)頁(yè)中這通常不會(huì)有什么問(wèn)題，但在移動(dòng)端設(shè)備上就完全行不通。同樣是4英寸的手機(jī)屏幕，其分辨率有可能是320*400，也可能是640*800，甚至也可能是1920*1080。這樣64px*64px的圖標(biāo)在不同的設(shè)備上看起來(lái)的大小就會(huì)差別非常明顯。
幸運(yùn)的是，手機(jī)上的瀏覽器基本對(duì)此做了優(yōu)化，會(huì)把設(shè)備模擬成更低的分辨率。比如在1136*640的IPHONE 5中獲取$(window).width(),取出來(lái)的是320而不是640，這樣一個(gè)寬度為160px的圖片占用的是屏幕寬度的一半，而不是1/4。手機(jī)設(shè)備這樣處理是為了解決兼容性問(wèn)題。除了網(wǎng)頁(yè)，包括手機(jī)上app的界面，在retina屏幕上和非retina屏幕上的大小是完全一樣的，都是因?yàn)閷?duì)分辨率做了處理。
但是，移動(dòng)設(shè)備這樣的處理方式并不能完全解決問(wèn)題，因?yàn)闄C(jī)器的假設(shè)性猜測(cè)在很多時(shí)候是不合適的，尤其是在android設(shè)備中。為了更好地控制元素顯示的大小，解決的辦法就是用pt代替ps，px是對(duì)應(yīng)屏幕的分辨率，而pt是針對(duì)人眼睛實(shí)際感覺(jué)的大小，無(wú)論在何種分辨率的設(shè)備上，72pt固定是1英寸。
HTML的img標(biāo)簽元素的src屬性不只是可以指定url，也可以指定圖片的二進(jìn)制數(shù)據(jù)流。然后通過(guò)img元素的自動(dòng)縮放功能，指定img的大小，就可以實(shí)現(xiàn)在不同分辨率的設(shè)備上顯示一致的圖標(biāo)大小。

二、使用Base64編碼減少頁(yè)面請(qǐng)求數(shù)

當(dāng)我們的一個(gè)頁(yè)面中要傳入很多圖片時(shí)，特別是一些小圖標(biāo)，十幾K、幾K，甚至是字節(jié)級(jí)別大小的小圖標(biāo)，這些小圖標(biāo)都會(huì)增加HTTP請(qǐng)求，假如多了，就會(huì)給服務(wù)器帶來(lái)很大的壓力。比如要下載一些一兩K大的小圖標(biāo)，其實(shí)請(qǐng)求時(shí)帶上的額外信息有可能比圖標(biāo)的大小還要大。所以，在請(qǐng)求越多時(shí)，在網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)自然就越多了，傳輸?shù)臄?shù)據(jù)自然也就變慢了。而這里，我們采用Base64的編碼方式將圖片直接嵌入到網(wǎng)頁(yè)中，而不是從外部載入，這樣就減少了HTTP請(qǐng)求。當(dāng)然了，它有一個(gè)小缺點(diǎn)，就是使當(dāng)前頁(yè)面的大小變大了（對(duì)于優(yōu)化來(lái)說(shuō)，其實(shí)這個(gè)可以忽略，影響不大）。看一下下圖，小圖標(biāo)大小為2.4k，等待響應(yīng)時(shí)間是14ms，而接受數(shù)據(jù)，也就是下載時(shí)間約為0ms；可想而知，在有大量小圖標(biāo)下載的時(shí)候，這樣的方式去優(yōu)化能大大提高網(wǎng)站的性能（在jquery mobile和天貓的手機(jī)站上面都有用到此技術(shù)）。

三、開發(fā)思路

將小圖標(biāo)放在以icon_開頭的文件夾里（以區(qū)分不用生成base64的圖片的文件夾）—>用程序去遍歷文件夾圖片 —>將每張圖片的base64編碼放在一個(gè)js對(duì)象里—>在HTML頁(yè)面的img標(biāo)簽里 使用屬性 icon-data = ‘圖標(biāo)名(不帶后綴)’來(lái)顯示圖片 —> JS文件寫一個(gè)函數(shù)對(duì)icon-data屬性進(jìn)行轉(zhuǎn)換，轉(zhuǎn)換成src屬性，然后值就通過(guò)icon-data的屬性值獲得圖標(biāo)名，然后進(jìn)行相應(yīng)的替換得到相應(yīng)圖標(biāo)的base64編碼 —> 顯示圖片

四、代碼實(shí)現(xiàn)

<?php
$pathinfo = pathinfo($_SERVER['SCRIPT_FILENAME']);
define('ROOT', $pathinfo['dirname']);
function generateIcon_mobile() {
$imgRoot = ROOT."/img/mobile";
$iterator = new DirectoryIterator($imgRoot);
foreach ($iterator as $file) {
if ($file->isDot()) continue;
$filename = $file->getFilename();
//識(shí)別出是否以icon_開頭的文件夾，如果是，則對(duì)此文件夾的圖標(biāo)進(jìn)行base64編碼處理
if ($file->isDir() && 0 === strncasecmp('icon_', $filename, 5)) {
generateIconMobileCallback("$imgRoot/$filename", ROOT."/js/mobile");
}
}
}
function generateIconMobileCallback($iconDir, $styleSaveDir) {
//保存成js的文件名
$saveName = array_pop(explode('/', $iconDir));
//JS文件保存路徑
$styleSavePath = $styleSaveDir.'/'.$saveName.'.js';
//將當(dāng)前目錄下的所有文件及MD5組成一個(gè)識(shí)別字符串
$fileMap = array();
$iterator = new DirectoryIterator($iconDir);
foreach ($iterator as $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');
//當(dāng)前小圖標(biāo)文件夾的相對(duì)路徑
$iconSaveRelative = substr($iconDir, strlen(ROOT));
//寫入，初始化保存數(shù)據(jù)的對(duì)象
fwrite($wirteHandle, "/** icon in dir: $iconSaveRelative/ */ if(typeof($iconData) == 'undefined') $iconData={};");
foreach ($fileMap as $fileName => $md5) {
//當(dāng)前圖片的絕對(duì)路徑
$fullPathName = "$iconDir/$fileName";
//取得路徑信息
$pathInfo = pathinfo($fullPathName);
//取得文件名（沒(méi)有后綴）
$fileNameNoExt = $pathInfo['filename'];
//取得圖片信息
$imageSize = getimagesize($fullPathName);
//取得文件的后綴
switch ($imageSize[2]) {
case IMAGETYPE_GIF:
$imageType = 'gif';
break;
case IMAGETYPE_JPEG:
$imageType = 'jpg';
break;
case IMAGETYPE_PNG:
$imageType = 'png';
break;
default:
$imageType = 'jpg';
break;
}
//取得圖片資源
$readHandle = fopen($fullPathName, 'r');
//將圖片轉(zhuǎn)成二進(jìn)制并生成Base64編碼
$base64 = base64_encode(fread($readHandle, filesize($fullPathName)));
//關(guān)閉資源
fclose($readHandle);
//將Base64編碼寫入js文件中
fwrite($wirteHandle, " $iconData.$fileNameNoExt="data:image/$imageType;base64,$base64";");
}
//最后換個(gè)行
fwrite($wirteHandle, " ");
//關(guān)閉資源
fclose($wirteHandle);
//處理成功的圖標(biāo)文件夾給予提示
echo '<p>'.$iconSaveRelative. ' saved</p>';
}
/**
* 確保文件夾存在并可寫
*
* @param string $dir
*/
function ensure_writable_dir($dir) {
if(!file_exists($dir)) {
mkdir($dir, 0766, true);
@chmod($dir, 0766);
@chmod($dir, 0777);
}
else if(!is_writable($dir)) {
@chmod($dir, 0766);
@chmod($dir, 0777);
if(!@is_writable($dir)) {
throw new BusinessLogicException("目錄不可寫", $dir);
}
}
}
generateIcon_mobile();
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<br>
<br>
<br>
<div>我們直接引入所生成的js文件，測(cè)試一下是否成功</div>
<br>
<div>直接在img標(biāo)簽里加入 icon-data = '圖標(biāo)文件名' 例如 <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>
然后這里附上屬性轉(zhuǎn)換的JS代碼
$(function(){
setIconData();
});
function setIconData() {
if (typeof($iconData != 'undefined')) {
$('img[icon-data]').each(function() {
var self = $(this);
var name = self.attr('icon-data');
if (typeof($iconData[name]) != 'undefined') {
self.attr('src', $iconData[name]);
self.removeAttr('icon-data');
}
});
}
}

五、實(shí)現(xiàn)效果

這是頁(yè)面輸入效果，小圖標(biāo)正常顯示出來(lái)了
這里我們自動(dòng)生成的JS文件是這樣子的格式：
頁(yè)面調(diào)用的代碼：
JS對(duì)img的icon-data屬性轉(zhuǎn)換處理的代碼：
我們對(duì)比下用base64編碼和不用base64時(shí)所花費(fèi)的時(shí)間：
先看不用的速度
再看我們用了base64編碼的速度
假如一個(gè)頁(yè)面有很多小圖標(biāo)，那么這種方式對(duì)網(wǎng)站的性能優(yōu)化會(huì)有大大的提升。如今此種優(yōu)化方案是用在我現(xiàn)在的項(xiàng)目中移動(dòng)端，而上一篇博文講解的生成背景圖的優(yōu)化方案用在我們項(xiàng)目中的PC端。優(yōu)化效果是很明顯的！當(dāng)然了，base64編碼這種方法也可以用在PC端，我們的項(xiàng)目為啥將它用在手機(jī)端，本博文開頭部分也有對(duì)其做解釋。這里測(cè)試我就直接在PC端測(cè)試，手機(jī)端測(cè)試也是一個(gè)樣的。
這里我補(bǔ)充一點(diǎn)：
（1）所生成的base64的js文件是在開發(fā)中就生成的了，而不是在用戶訪問(wèn)時(shí)才去生成，我把HTML代碼和PHP代碼寫在一個(gè)文件里是方便，在真實(shí)項(xiàng)目中是分開的；
（2）使用此種優(yōu)化技術(shù)有它的優(yōu)點(diǎn)，當(dāng)然也會(huì)有它的缺點(diǎn)，只有適合自己項(xiàng)目的優(yōu)化技術(shù)才是好技術(shù)；
（3）此中優(yōu)化技術(shù)建議使用在手機(jī)端（可以解決背景圖優(yōu)化方式所不能解決的問(wèn)題），而PC端的則用合并小圖標(biāo)生成背景圖的方式（看此文：http://www.cnblogs.com/it-cen/p/4618954.html）；
（4）此種優(yōu)化技術(shù)一般用于小圖標(biāo)（十幾K以下），也就是HTTP響應(yīng)時(shí)間遠(yuǎn)遠(yuǎn)大于下載時(shí)間的時(shí)候，用此方法優(yōu)化會(huì)看到明顯的效果；
（5）當(dāng)然可以配合其他優(yōu)化技術(shù)一起使用，效果更明顯，比如緩存等。
這一次就分享那么多給大家，代碼我都貼上了，而且很多都標(biāo)上了注釋，方便大家理解。如果此博文中有哪里講得讓人難以理解，歡迎留言交流，若有講解錯(cuò)的地方歡迎指出。如果您覺(jué)得您能在此博文學(xué)到了新知識(shí)，請(qǐng)為我頂一個(gè)，如文章中有解釋錯(cuò)的地方，歡迎指出。互相學(xué)習(xí)，共同進(jìn)步！