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