Data url 总结

data url 通常在 lighbox 这类插件中被使用。

data:[<mediatype>][;base64],<data>

mediatype是一种MIME类型字符串, 例如 “image/jpeg” 代表 JPEG 图像文件.如果省略这个参数, 则默认值为text/plain;charset=US-ASCII.

通常这么使用

 <img src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmC
YsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOn
KPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7l
EewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7" alt="jack" />

使用 base64 编码文件(Base64是一种基于64个可打印字符来表示二进制数据的表示方法。由于2的6次方等于64,所以每6个比特为一个单元),所以大小上会比URL编码的要小。
1、使用这种方式来替代图片,最明显的好处是可以减少一个HTTP请求,坏处是文件的大小会变大。

2、并且阻塞关键下载和渲染。

3、另一个就是 GZIP压缩并不能减少文件大小,相反由于新增的 base64文件还会降低原本的压缩比。

那么体积变大的同时,如果更新了css文件,用户又需要下载那么一份大文件。设置缓存这些手段就不能体现其意义。

4、Base64跟CSS混在一起,大大增加了浏览器需要解析CSS树的耗时。

增加的解析时间全部都在关键渲染路径上。

综上,使用时要考虑是否会被频繁修改,像插件中的loading使用就可以避免上述问题。