中文字幕在线观看,亚洲а∨天堂久久精品9966,亚洲成a人片在线观看你懂的,亚洲av成人片无码网站,亚洲国产精品无码久久久五月天

大型網(wǎng)站優(yōu)化技術(shù):減少HTTP請求

2019-03-26    來源:盧松松博客

容器云強勢上線!快速搭建集群,上萬Linux鏡像隨意使用

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

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

為什么我會講解 “將圖片轉(zhuǎn)成二進制并生成Base64編碼,可以在網(wǎng)頁中通過url查看圖片” 這一種方式來減少HTTP請求,進而優(yōu)化頁面呢?這里呢,是涉及到移動端的圖標(biāo)使用。上一篇博文所講的方法能否使用于手機端的網(wǎng)頁呢?

但是,它會出現(xiàn)一個問題:背景圖+css顯示圖標(biāo)時,圖標(biāo)本身無法縮放,比如背景圖中64px*64px的圖標(biāo),顯示到界面時必須設(shè)置icon的大小也是64*64。在PC網(wǎng)頁中這通常不會有什么問題,但在移動端設(shè)備上就完全行不通。同樣是4英寸的手機屏幕,其分辨率有可能是320*400,也可能是640*800,甚至也可能是1920*1080。這樣64px*64px的圖標(biāo)在不同的設(shè)備上看起來的大小就會差別非常明顯。

幸運的是,手機上的瀏覽器基本對此做了優(yōu)化,會把設(shè)備模擬成更低的分辨率。比如在1136*640的IPHONE 5中獲取$(window).width(),取出來的是320而不是640,這樣一個寬度為160px的圖片占用的是屏幕寬度的一半,而不是1/4。手機設(shè)備這樣處理是為了解決兼容性問題。除了網(wǎng)頁,包括手機上app的界面,在retina屏幕上和非retina屏幕上的大小是完全一樣的,都是因為對分辨率做了處理。

但是,移動設(shè)備這樣的處理方式并不能完全解決問題,因為機器的假設(shè)性猜測在很多時候是不合適的,尤其是在android設(shè)備中。為了更好地控制元素顯示的大小,解決的辦法就是用pt代替ps,px是對應(yīng)屏幕的分辨率,而pt是針對人眼睛實際感覺的大小,無論在何種分辨率的設(shè)備上,72pt固定是1英寸。

HTML的img標(biāo)簽元素的src屬性不只是可以指定url,也可以指定圖片的二進制數(shù)據(jù)流。然后通過img元素的自動縮放功能,指定img的大小,就可以實現(xiàn)在不同分辨率的設(shè)備上顯示一致的圖標(biāo)大小。

二、使用Base64編碼減少頁面請求數(shù)

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

三、開發(fā)思路

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

四、代碼實現(xiàn)

<?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_開頭的文件夾,如果是,則對此文件夾的圖標(biāo)進行base64編碼處理             if($file->isDir()&&0===strncasecmp('icon_',$filename,5)){                 generateIconMobileCallback("$imgRoot/$filename",ROOT."/js/mobile");             }         }       }       functiongenerateIconMobileCallback($iconDir,$styleSaveDir){         //保存成js的文件名         $saveName=array_pop(explode('/',$iconDir));         //JS文件保存路徑         $styleSavePath=$styleSaveDir.'/'.$saveName.'.js';           //將當(dāng)前目錄下的所有文件及MD5組成一個識別字符串         $fileMap=array();         $iterator=newDirectoryIterator($iconDir);         foreach($iteratoras$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)文件夾的相對路徑         $iconSaveRelative=substr($iconDir,strlen(ROOT));         //寫入,初始化保存數(shù)據(jù)的對象         fwrite($wirteHandle,"/** icon in dir: $iconSaveRelative/ */ \nif(typeof(\$iconData) == 'undefined') \$iconData={};");         foreach($fileMapas$fileName=>$md5){             //當(dāng)前圖片的絕對路徑             $fullPathName="$iconDir/$fileName";             //取得路徑信息             $pathInfo=pathinfo($fullPathName);             //取得文件名(沒有后綴)             $fileNameNoExt=$pathInfo['filename'];             //取得圖片信息             $imageSize=getimagesize($fullPathName);               //取得文件的后綴             switch($imageSize[2]){                 caseIMAGETYPE_GIF:                     $imageType='gif';                     break;                 caseIMAGETYPE_JPEG:                     $imageType='jpg';                     break;                 caseIMAGETYPE_PNG:                     $imageType='png';                     break;                   default:                     $imageType='jpg';                     break;             }               //取得圖片資源             $readHandle=fopen($fullPathName,'r');             //將圖片轉(zhuǎn)成二進制并生成Base64編碼             $base64=base64_encode(fread($readHandle,filesize($fullPathName)));             //關(guān)閉資源             fclose($readHandle);             //將Base64編碼寫入js文件中             fwrite($wirteHandle,"\n\$iconData.$fileNameNoExt=\"data:image/$imageType;base64,$base64\";");         }         //最后換個行         fwrite($wirteHandle,"\n");         //關(guān)閉資源         fclose($wirteHandle);           //處理成功的圖標(biāo)文件夾給予提示         echo'<p>'.$iconSaveRelative.' saved</p>';       }       /**     * 確保文件夾存在并可寫     *     * @param string $dir     */     functionensure_writable_dir($dir){         if(!file_exists($dir)){             mkdir($dir,0766,true);             @chmod($dir,0766);             @chmod($dir,0777);         }         elseif(!is_writable($dir)){             @chmod($dir,0766);             @chmod($dir,0777);             if(!@is_writable($dir)){                 thrownewBusinessLogicException("目錄不可寫",$dir);             }         }     }     generateIcon_mobile(); ?>   <!DOCTYPE html> <html> <head>     <title></title> </head> <body> <br> <br> <br>   <div>我們直接引入所生成的js文件,測試一下是否成功</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(); });   functionsetIconData(){     if(typeof($iconData!='undefined')){         $('img[icon-data]').each(function(){             varself=$(this);             varname=self.attr('icon-data');             if(typeof($iconData[name])!='undefined'){                 self.attr('src',$iconData[name]);                 self.removeAttr('icon-data');             }         });     } }

標(biāo)簽: 網(wǎng)站優(yōu)化 HTTP請求 減少http請求 

版權(quán)申明:本站文章部分自網(wǎng)絡(luò),如有侵權(quán),請聯(lián)系:west999com@outlook.com
特別注意:本站所有轉(zhuǎn)載文章言論不代表本站觀點!
本站所提供的圖片等素材,版權(quán)歸原作者所有,如需使用,請與原作者聯(lián)系。

上一篇:SEO專員,如何快速診斷網(wǎng)站!

下一篇:用百度推薦提升PV和收益的小方法