前端性能優化：使用Data URI代替圖片SRC

來源：GBin1.com

提升頁面大小的效率，不僅僅是取決於使用精靈或是壓縮代碼，給定頁面的請求數量在前端性能中也占有了很不小的重量。減少請求可以讓你的網站加載更快，而其中一種減少頁面請求的方法就是用Data URI代替圖片的src屬性：

<!-- 以前的寫法 -->
<img src="http://images.cnblogs.com/logo.png" />

<!-- 使用data URI的寫法 -->
<img src="data: image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fH ...." />

<-- 范例:  http://davidwalsh.name/demo/data-uri-php.php -->

當然頁面大小會增加（如果你的服務器使用適當的gzip內容，這個增加會很小），但是你減少了潛在的請求，同時也在過程中減少了服務器請求的數量。現在大多數瀏覽器都支持Data URI，在CSS中的背景骨片也可以使用Data URI，因此這個策略現在已經可以在應用層級，廣泛應用。

下一篇我們將介紹使用媒體隊列加載指定大小的背景圖片。

相關閱讀：

• 前端性能優化：DocumentFragments或innerHTML取代復雜的元素注入
• 前端性能優化：高頻執行事件/方法的防抖
• 前端性能優化：網絡存儲的靜態緩存和非必要內容優化
• 前端性能優化：使用異步加載，延遲加載依賴
• 前端性能優化：使用Array.prototype.join代替字符串連接
• 前端性能優化：盡可能使用CSS動畫
• 前端性能優化：使用事件委托

via 極客社區

來源：前端性能優化：使用Data URI代替圖片SRC