相关疑难解决方法(0)

我正在查看一个greasemonkey用户脚本的来源,并在他们的css中注意到以下内容:

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

我可以理解,一个greasemonkey脚本想要在源代码中捆绑任何东西而不是在服务器上托管它,这是显而易见的.但由于我以前没有看过这种技术,我考虑过它的使用,看起来很有吸引力有很多原因:

1. 它将减少页面加载时的HTTP请求量,从而提高性能
2. 如果没有CDN,那么它将减少通过cookie与图像一起发送产生的流量
3. CSS文件可以缓存
4. CSS文件可以是GZIPPED

考虑到IE6(例如)有背景图像缓存问题,这似乎不是最糟糕的想法......

那么,这是一个好的或坏的做法,为什么你不使用它,你会使用什么工具base64编码图像？

更新 - 测试结果

• 用图像测试:http://fragged.org/dev/map-shot.jpg - 133.6Kb

• 测试网址:http://fragged.org/dev/base64.html

• 专用的CSS文件: http://fragged.org/dev/base64.css - 178.1Kb

• GZIP编码服务器端

• 结果发送给客户端的大小(YSLOW组件测试):59.3Kb

• 保存发送到客户端浏览器的数据:74.3Kb

不错,但我认为它对于较小的图像会稍微有用.

更新:谷歌的软件工程师Bryan McQuade正在研究PageSpeed,他在ChromeDevSummit 2013上表达了数据:CSS中的uris被认为是一种渲染阻止反模式,用于在他的演讲中提供关键/最小的CSS #perfmatters: Instant mobile web apps.请参阅http://developer.chrome.com/devsum​​mit/sessions并记住这一点 - 实际幻灯片

我想显示的保存在数据库中的图像字节StreamedContent中<p:graphicImage>,如下所示:

<p:graphicImage  value="#{item.imageF}" width="50"  id="grpImage" height="80"/>

private StreamedContent content; // getter and setter

public StreamedContent getImageF() {

    if (student.getImage() != null) {
        InputStream is = new ByteArrayInputStream(student.getImage());
        System.out.println("Byte :"+student.getImage());
        content = new DefaultStreamedContent(is, "", student.getStuID());
        System.out.println("ddd ------------------------------- " + content);
        return content;
    }

    return content;
}

这将返回一个空白图像.这是怎么造成的,我该如何解决？

标准输出打印以下内容:

INFO: Byte :[B@a2fb48
INFO: ddd ------------------------------- org.primefaces.model.DefaultStreamedContent@b0887b
INFO: Byte :[B@a2fb48
INFO: ddd ------------------------------- org.primefaces.model.DefaultStreamedContent@1d06a92
INFO: Byte :[B@d52f0b
INFO: ddd ------------------------------- org.primefaces.model.DefaultStreamedContent@39a60
INFO: Byte :[B@d52f0b
INFO: ddd ------------------------------- org.primefaces.model.DefaultStreamedContent@8c3daa …

我正在考虑使用base64编码的图像为我正在努力的网站优化加载时间.

无论如何,在我开始之前,我想知道:这样做的优点和缺点是什么？

目前,我没有看到任何不利因素,但我也发现它不是经常使用的技术,这让我想知道我是不是错过了什么.

在谷歌主题后我没有找到任何清楚的东西所以我决定在这里问.

我需要使用JSF <h:graphicimage>标记或HTML <img>标记在Web应用程序中显示驻留在deploy文件夹之外的图像.我怎样才能做到这一点？