日期：2013-7-6??來源：GBin1.com

提升頁(yè)面大小的效率，不僅僅是取決于使用精靈或是壓縮代碼，給定頁(yè)面的請(qǐng)求數(shù)量在前端性能中也占有了很不小的重量。減少請(qǐng)求可以讓你的網(wǎng)站加載更快，而其中一種減少頁(yè)面請(qǐng)求的方法就是用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 -->

當(dāng)然頁(yè)面大小會(huì)增加（如果你的服務(wù)器使用適當(dāng)?shù)膅zip內(nèi)容，這個(gè)增加會(huì)很小），但是你減少了潛在的請(qǐng)求，同時(shí)也在過程中減少了服務(wù)器請(qǐng)求的數(shù)量。現(xiàn)在大多數(shù)瀏覽器都支持Data URI，在CSS中的背景骨片也可以使用Data URI，因此這個(gè)策略現(xiàn)在已經(jīng)可以在應(yīng)用層級(jí)，廣泛應(yīng)用。

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

via 極客社區(qū)

來源：前端性能優(yōu)化：使用Data URI代替圖片SRC

轉(zhuǎn)載于:https://www.cnblogs.com/snake-hand/p/3178121.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。