1. 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使用就可以避免上述问题。