前端性能优化：使用Data URI代替图片SRC

日期：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相关推荐

前端性能优化的重要方案：图片懒加载
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的前端性能优化的重要方案:图片懒加载,主要包括其原理,我们常用的一些插件,及编写源码实现图片懒加载功能等,图片懒加载是项目比较常见的 ...
前端性能优化：使用媒体查询加载指定大小的背景图片
日期:2013-7-8 来源:GBin1.com 直到CSS @supports被广泛支持,CSS媒体查询的使用接近于CSS中写逻辑控制.我们经常用CSS媒体查询来根据设备调整CSS属性(通常根据屏 ...
前端性能优化最佳实践（转）
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...
前端性能优化之WebP图片
前言前端性能涉及方方面面, 根据优化角度切入点的不同可以分为页面工程优化和代码细节优化两大方向. 页面工程优化: 从页面请求开始, 涉及网络协议. 资源配置. 浏览器性能. 缓存等: 代码细节优化: ...
【前端性能优化实践】手把手教你实现webpack图片压缩插件
前言我想写一个系列:前端性能优化实践方案.网上虽然一搜一大把这样的文章,但大多缺乏体系化.也有很多讲性能优化的书籍,但其实想照着书上的知识进行实践,还是挺难的一件事. 这是该系列的第一篇文章由于自 ...
CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
前端性能优化（二）01-页面性能优化之浏览器——浏览器的主要作用浏览器的组成结构
前端性能优化(二)01-页面性能优化之浏览器--浏览器的主要作用 & 浏览器的组成结构页面性能优化前端性能优化可以分为两大部分:浏览器部分.代码部分. 浏览器部分又可以分为: 网络层面浏 ...
前端性能优化总结（遇到好的，就得珍惜）
前端性能优化(一) 前端是庞大的,包括 HTML. CSS. Javascript.Image .Flash等等各种各样的资源.前端优化是复杂的,针对方方面面的资源都有不同的方式.那么,前端优化的目的 ...
还是关于前端性能优化，真的是的从细节开始
前端性能优化(一) 前端是庞大的,包括 HTML. CSS. Javascript.Image .Flash等等各种各样的资源.前端优化是复杂的,针对方方面面的资源都有不同的方式.那么,前端优化的目的 ...

前端性能优化：使用Data URI代替图片SRC

来源：前端性能优化：使用Data URI代替图片SRC

前端性能优化：使用Data URI代替图片SRC相关推荐

最新文章

热门文章