1. 程式人生 > >[大型網站優化技術] -- 減少HTTP請求之將圖片轉成二進位制並生成Base64編碼,可以在網頁中通過url檢視圖片

[大型網站優化技術] -- 減少HTTP請求之將圖片轉成二進位制並生成Base64編碼,可以在網頁中通過url檢視圖片

複製程式碼
  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([email protected]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>
複製程式碼

相關推薦

[大型網站優化技術] -- 減少HTTP請求圖片二進位制生成Base64編碼,可以在網頁通過url檢視圖片

1 <?php 2 $pathinfo = pathinfo($_SERVER['SCRIPT_FILENAME']); 3 define('ROOT', $pathinfo['dirname']); 4 5 function generateIcon_

【架構】大型網站優化技術思路

操作系統 服務商 優點 控制 解決 維護 數據幀 緩存 使用 1、I/O優化 1、增加緩存,減少磁盤的訪問次數。 2、優化磁盤的管理系統,設計最優的磁盤方式策略,以及磁盤的尋址策略,這是在底層操作系統層面考慮的。 3、設計合理的磁盤存儲數據塊,

知識鞏固——性能優化減少http請求

做成 coord 性能優化 base .... ase ... 轉碼 樣式表 1、css 雪碧圖 sprites 其實更高深的應該是把圖標做成字體文件直接引用 2、圖片地圖 類似上,area標簽的coords屬性 3、合並腳本和樣式表,js和css 4、使用base64碼減

大型網站架構技術一覽

定時執行 挖掘 cnblogs soa 動態頁面 服務架構 調用 技術分享 人際關系 大型網站架構技術一覽 網站系統架構層次如下圖所示: 1、 前端架構 前端指用戶請求到達網站應用服務器之前經歷的環節,通常不包含網站業務邏輯,不處理動態內容。 (1

Robot Framework接口測試(2)--http請求get

pci frame font urllib status pac 只需要 install height 本來打算把http發送請求的get和post方法都介紹一下的,結果發現篇幅有點長,文本編輯也變得混亂,所以這裏先介紹一下get方法,下一次再post。其實這些方法大家

使用圖片地圖減少HTTP請求數量

點擊 有一個 str sha lan 映射 http請求 單位 圖片映射 前言   最近在看《高性能網站建設》,記錄一下所學。   現在很多網站都是圖片形式的導航,點擊圖片跳轉到對應的鏈接。如果導航項目很多的話,圖片的數量就會很多,每需要加載一張圖片就會多一個HTTP請求。

前端巧用localStorage做“緩存”,減少HTTP請求次數

http請求 code 存儲 http div data ora date() ESS 場景: 載入某個頁面,JS需要通過ajax請求獲取某些數據 那麽每次刷新頁面都會有請求,如果這些數據對實時性要求並不高,顯然這樣做並不可取。 如何減少服務端的壓力,使用localStor

一個大型網站技術架構是怎樣建成的

網站系統架構層次如下圖所示: 1.前端架構 前端指使用者請求到達網站應用伺服器之前經歷的環節,通常不包含網站業務邏輯,不處理動態內容。 瀏覽器優化技術 並不是優化瀏覽器,而是通過優化響應頁面,加快瀏覽器頁面的載入和顯示,常用的有頁面快取、合併HTTP減少請求次數、使用頁面壓縮等

大型網站架構技術》系列分享專欄

在這裡整理一些大型網站架構方面的技術文章,包括大型網站儲存,架構,靜態化處理,高併發,高效能方面的問題處理,解決方案等知識 《大型網站架構技術》已整理成PDF文件,點選可直接下載至本地查閱 https://www.webfalse.com/read/201727.html 文章

前端效能優化第一篇-http請求

前端效能優化第一篇-http請求 本系列文章是我在閱讀《高效能網站架設指南》時的讀書筆記,文章的順序基本和書的順序是相同的,同時由於這本書的出版時間比較早了,我會根據現代前端的發展變化做出備註。 http請求是提升效能的一個重要方面,我們可以在開啟一個網站的時候開啟

大型網站穩定性技術策略

從別的地方看到的介紹,感覺對自己學習很有幫助, 貼給大家:    監控報警策略實戰 冗餘設計理念實戰 限流原理與實現 降級的策略與實現 回滾策略規範與實踐 重試技術策略理解    面對峰值到來時候, 應該準備的工作。&nbs

python傳送http請求requests模組

python的requests模組比urllib、urllib2模組的介面更簡潔。 以下轉自:http://blog.csdn.net/iloveyin/article/details/21444613 迫不及待了嗎?本頁內容為如何入門Requests提供

PHP 大型網站優化 大資料大併發大流量

什麼是大型網站? 大型網站要滿足一下標準. pv(page views)值, 頁面瀏覽量,一個網站的所有頁面,在24小時內被瀏覽的總的次數, 一般說 到千萬. uv(unique visitor) 獨立訪客: 一個網站的24小時內,有多少個使用者來訪問該網站, 一般說 到10萬

關於大型網站調優的學習總結ab測試壓力

        根據韓順平老師講課筆記整理         ab.exe 是Apache自帶的一款壓力測試工具,可以測試併發量的大小和某個頁面訪問的時間。       a  準備首先把自己的程式碼放入Apache的PHP執行目錄下(如下程式碼 名字為ab.php) <

【前端開發】合併多個前端靜態資原始檔,減少HTTP請求次數

從優化請求靜態資原始檔(JS、CSS)的角度來說,載入多個檔案會發出多次請求,為了解決這個問題,我們可以把多個檔案合併成一個檔案,現在有一些前端工具可以把多個檔案合併成一個檔案,這種方式是靜態的在發版前就要合併成一個檔案,還有一種方式把多個檔案動態合併成一個檔案;所謂動態是把

接口測試Jmeterhttp請求get請求(三)

線程組 img 右擊 查看 user 接口 alt 接口測試 use 1、打開Jmeter,新建一個測試計劃 2、選擇測試計劃,右擊-Threads(Users)-線程組 3、接下來新建一個http請求,選擇線程組,右擊-Samper-HTTP請求。 4、

接口測試Jmeterhttp請求post請求(四)

thread -h 右擊 -s 分享圖片 alt 測試 use ima 1、打開Jmeter,新建一個測試計劃 2、選擇測試計劃,右擊-Threads(Users)-線程組 3、接下來新建一個http請求,選擇線程組,右擊-Samper-HTTP請求。 4

發起http請求HttpClient 關於(發生一個或多個錯誤) 的問題

很多 sof 設置 mic 大並發 關於 manage 使用 發生 最近項目遇到一個問題,同樣的程序,再本地調試跑沒問題,但是放到服務器上跑,卻會出現各種超時。 查了查日誌,發現多數是這樣的一個錯誤 message:發生一個或多個錯誤。 經過一步步排查發現是HttpC

網站優化的藝術與科學工具和基礎知識

  最近在閱讀一本網站優化的書,名叫《深入理解網站優化:提升網站轉化率的藝術與科學》,本書是對網站優化的4個學科(Web分析、網站易用性、線上營銷和網站測試)的最佳實踐。網站優化是一門新穎的藝術,結合前面這四門學科完成對網站的測試和分析,更好地吸引和轉化訪問者。   實施本書中的最佳實踐和測試思路,就能以

網站優化的藝術與科學實戰

  本文承接上一篇《網站優化的藝術與科學之工具和基礎知識》,將實戰分析網站的部分頁面。 一、首頁 1)首頁的評判方式   下面是訪問者可能有的常見負面想法。   1、不喜歡網站的佈局或組織。   2、不理解在網站上能做什麼。   3、對網站上的選擇或內容不知所措。   4、討厭看到這麼多廣告。