PrimeFaces 6.0 不在客户端缓存图像

Question

给定 <p:dataTable> 在其中一列中渲染图像。

<p:dataTable id="dataTable" var="row" value="#{bean}"
             lazy="true"
             skipChildren="true">

    <p:column headerText="Image">
        <p:cellEditor>
            <f:facet name="output">
                <p:graphicImage value="#{imageBean.image}" stream="true" cache="true">
                    <f:param name="id" value="#{row.id}"/>
                    <f:param name="width" value="100"/>
                    <f:param name="height" value="100"/>
                </p:graphicImage>
            </f:facet>

            <f:facet name="input">
                <p:graphicImage value="#{imageBean.image}" stream="true" cache="true">
                    <f:param name="id" value="#{row.id}"/>
                    <f:param name="width" value="100"/>
                    <f:param name="height" value="100"/>
                </p:graphicImage>

                <!-- <p:overlayPanel> here for file upload -->
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Edit">
        <p:rowEditor/>
    </p:column>
</p:dataTable>

_{数据表可以根据需要包含其他基本的常用属性和列。}

当这个表被（Ajaxically）更新时，所有图像都从数据库（或磁盘文件系统，如果使用）中获取，就好像它们根本没有被浏览器缓存一样，即使 cache 显式设置为 @987654325 @（这是默认值）。这在 PrimeFaces 5.3 final 之前运行良好。

The migration guide 对此一无所知，但显然有关缓存 <p:graphicImage> 的某些内容已经改变。

有解决问题的建议吗？

在上面的示例中，例如，如果表包含 5 行中的 5 张图像，则每次对 <p:dataTable> 进行更新时都会查询数据库 10 次（内联行编辑默认为当前行除外）这不应该发生，因为从数据库中获取图像的成本非常高。

---

使用 PrimeFaces 6.0 final（在 WildFly 10.0.0 final 上运行）的请求/响应标头，当向服务器发出初始请求以提供图像时（不起作用 - 图像未缓存）。

General
    Request URL:https://localhost:8443/ContextRoot/javax.faces.resource/dynamiccontent.properties.xhtml?ln=primefaces&v=6.0&pfdrid=aed903cc-daba-4822-a62b-888b9a0ef2ac&pfdrt=sc&id=14&width=100&height=100&pfdrid_c=true
    Request Method:GET
    Status Code:200 OK
    Remote Address:127.0.0.1:8443
Response Headers
    Cache-Control:max-age=29030400
    Connection:keep-alive
    Date:Sat, 23 Jul 2016 06:59:54 GMT
    Expires:Sun, 23 Jul 2017 06:59:54 GMT
    Server:WildFly/10
    Transfer-Encoding:chunked
    X-Powered-By:Undertow/1
Request Headers
    Accept:image/webp,image/*,*/*;q=0.8
    Accept-Encoding:gzip, deflate, sdch
    Accept-Language:en-US,en;q=0.8
    Connection:keep-alive
    Cookie:JSESSIONID=4AoRGa1IAPTB4KssnikbO9uUetcQpMupli8BkGga.om-f6b0ea3ad206; __utma=111872281.616526714.1454485589.1468749319.1468751735.4; __utmz=111872281.1454485589.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
    Host:localhost:8443
    Referer:https://localhost:8443/ContextRoot/admin/Brand
    User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36
Query String Parameters
    ln:primefaces
    v:6.0
    pfdrid:aed903cc-daba-4822-a62b-888b9a0ef2ac
    pfdrt:sc
    id:14
    width:100
    height:100
    pfdrid_c:true

---

使用 PrimeFaces 5.3 final（在 GlassFish 4.1 上运行）的请求/响应标头，当向服务器发出初始请求以提供图像时（按预期工作 - 图像被缓存）。

General
    Request URL:https://localhost:8181/ContextRoot/javax.faces.resource/dynamiccontent.properties.xhtml?ln=primefaces&v=5.3&pfdrid=aAPHlxcQ2lcqfvzacYoCC6iUxLU1VVFp&pfdrt=sc&id=11&width=100&height=100&pfdrid_c=true
    Request Method:GET
    Status Code:200 OK
    Remote Address:127.0.0.1:8181
Response Headers
    Cache-Control:max-age=29030400
    Date:Sat, 23 Jul 2016 07:15:03 GMT
    Expires:Sun, 23 Jul 2017 07:15:04 GMT
    Pragma:No-cache
    Server:GlassFish Server Open Source Edition  4.1
    Transfer-Encoding:chunked
    X-Powered-By:Servlet/3.1 JSP/2.3 (GlassFish Server Open Source Edition  4.1  Java/Oracle Corporation/1.8)
Request Headers
    Accept:image/webp,image/*,*/*;q=0.8
    Accept-Encoding:gzip, deflate, sdch
    Accept-Language:en-US,en;q=0.8
    Connection:keep-alive
    Cookie:JSESSIONID=69b5070218cfe0fc6eaac2141c13; __utma=111872281.616526714.1454485589.1468749319.1468751735.4; __utmz=111872281.1454485589.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
    Host:localhost:8181
    Referer:https://localhost:8181/ContextRoot/admin/Brand
    User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36
Query String Parameters
    ln:primefaces
    v:5.3
    pfdrid:aAPHlxcQ2lcqfvzacYoCC6iUxLU1VVFp
    pfdrt:sc
    id:11
    width:100
    height:100
    pfdrid_c:true

Answer 1

标题看起来不错。这表明查询字符串参数中的某些内容因请求而异。这也将被解释为一个全新的资源，因此即使基本 URI（URL 查询字符串分隔符 ? 之前的部分）完全相同，也会破坏缓存。

事实上，PrimeFaces 6.0 改变了pfdrid 查询字符串参数的生成方式。它已成为一个完全随机的UUID，每次呈现 HTML <img src> 时都会发生变化。另见line 59 of PF 6.0 source code。在 PrimeFaces 5.3 中，它是基于 EL 表达式字符串加密的，因此只要 EL 表达式字符串相同，就可以保证跨请求相同。另见line 53 of PF 5.3 source code。

更改是 Cagatay 的 introduced，没有提及问题单。因此，尚不清楚为什么要进行此更改。但毕竟它不再为客户端提供缓存动态内容的机会，因此实际上会降低两端的性能。这在 PrimeFaces 上绝对值得一张问题单，所以我创建了一张：issue 1765。

除了破解 PrimeFaces 源代码之外，我没有看到解决此问题的干净方法。最好的办法是用“plain vanilla servlet”替换<p:graphicImage> 为<h:graphicImage>，或者如果您碰巧使用JSF 实用程序库OmniFaces，则将<o:graphicImage> 替换为一个简单的bean。这些方法已在此相关问答中详细介绍：Show image as byte[] from database as graphic image in JSF page。

---

更新：根据issue 1765，PrimeFaces 6.1 已修复此问题。

Answer 2

我对图像的primefaces这个组件有同样的问题，因为它添加了用于控制Cache-Control的参数?pfdrid_c=true

我是这样使用它的（primefaces 元素）：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"...>


<p:graphicImage value="/url/images" />

我选择使用这个对我来说非常适合的其他 jsf 元素，因为它不引入参数：

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"...>


<h:graphicImage value="/url/images" />

正如@BalusC 所阐明的那样，这仅在值是表示 URL 的字符串时才有效。