前端性能優化：使用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