日期：2013-7-6??來源：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，因此這個策略現在已經可以在應用層級，廣泛應用。

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

via 極客社區

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

轉載于:https://www.cnblogs.com/snake-hand/p/3178121.html

總結

以上是生活随笔為你收集整理的前端性能优化：使用Data URI代替图片SRC的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。