- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我正在查看 greasemonkey 用户脚本的源代码,并在他们的 CSS 中注意到以下内容:
.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}
我能理解 greasemonkey 脚本想要在源代码中捆绑任何它能捆绑的东西,而不是将它托管在服务器上,这很明显。但由于我以前没有见过这种技术,所以我考虑了它的用途,它看起来很有吸引力,原因有很多:
考虑到 IE6(例如)在背景图像缓存方面存在问题,这似乎不是最糟糕的想法...
那么,这是好事还是坏事?为什么不使用它?您会使用什么工具对图像进行 base64 编码?
更新 - 测试结果
测试图像:http://fragged.org/dev/map-shot.jpg - 133.6Kb
专用 CSS 文件: http://fragged.org/dev/base64.css -178.1Kb
GZIP编码服务器端
发送给客户端的结果大小(YSLOW组件测试):59.3Kb
保存发送到客户端浏览器的数据:74.3Kb
不错,但我想它对于较小的图像来说用处会稍微小一些。
UPDATE: Bryan McQuade, a software engineer at Google, working on PageSpeed, expressed at ChromeDevSummit 2013 that data:uris in CSS is considered a render-blocking anti-pattern for delivering critical/minimal CSS during his talk
#perfmatters: Instant mobile web apps
. See http://developer.chrome.com/devsummit/sessions and keep that in mind - actual slide
最佳答案
当您希望单独缓存图像和样式信息时,这不是一个好主意。此外,如果您将大图像或大量图像编码到您的 css 文件中,那么浏览器将花费更长的时间来下载文件,而在下载完成之前,您的网站将没有任何样式信息。对于您不打算经常更改的小图像,这是一个很好的解决方案。
就生成 base64 编码而言:
关于css - 将背景图像数据作为 Base64 嵌入到 CSS 中是好事还是坏事?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1124149/
我是一名优秀的程序员,十分优秀!