jsf - 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明确设置为 true (这是默认值)。这在 PrimeFaces 5.3 final 之前运行良好。

The migration guide对此一无所知，但显然缓存发生了一些变化 <p:graphicImage> .

有什么建议可以解决问题吗？

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

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

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 上运行)的请求/响应 header 。

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 .

更改为 introduced由 Cagatay 提供，但未提及出票。因此，目前尚不清楚为什么要进行这种更改。但毕竟它不再为客户端提供缓存动态内容的机会，因此实际上会降低两端的性能。这在 PrimeFaces 绝对值得一票，所以我创建了一个:issue 1765 .

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

更新 :根据 issue 1765 ，它已在 PrimeFaces 6.1 中得到修复。