Question

在其中一列中给出<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sidebar" id="sidebar"> <div class="list-group"> <a href="#" class="list-group-item">Library</a> <a href="#" class="list-group-item">Stats</a> <a href="#" class="list-group-item">History</a> </div> </div> <div class="content"> <div class="container-fluid"> <div class="page-header"> <h2>Music Library <small>by Mathieu Brochard</small></h2> </div> <div class="row"> <div class="form-group col-sm-6 col-md-4"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search artist, genre or rate" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-search"></span> </span> </div> </div> </div> <table class="table table-striped table-hover"> <tr> <th>Artist</th> <th>Genre</th> <th>Rate</th> </tr> <tr> <td>The Beatles</td> <td>Rock'n'Roll</td> <td>5</td> </tr> <tr> <td>Kaaris</td> <td>Rap</td> <td>1</td> </tr> </table> <button class="btn btn-primary" id="toggle-sidebar">Add artist</button> </div> </div>渲染图像。

<p:dataTable>

_{数据表可能包含其他必要的常用属性和列。}

当此表（Ajaxically）更新时，所有图像都从数据库（或磁盘文件系统，如果使用）中获取，就好像它们根本没有被浏览器缓存一样，即使<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>  </f:facet> </p:cellEditor> </p:column> <p:column headerText="Edit"> <p:rowEditor/> </p:column> </p:dataTable>被明确设置为cache（这是默认值）。这在PrimeFaces 5.3决赛中表现良好。

The migration guide对此一无所知，但显然有些内容已经更改为缓存true。

有任何解决问题的建议吗？

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

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

<p:dataTable>

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

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

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源代码之外，我没有看到解决此问题的干净方法。最好的办法是用<p:graphicImage>替换<h:graphicImage>和“普通的vanilla servlet”，或者如果您碰巧使用JSF实用程序库OmniFaces，那么<o:graphicImage>与一个简单的豆子。这些方法已在此相关问答中详细说明：Show image as byte[] from database as graphic image in JSF page。

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

Answer 2

我在图像的素面部分上也遇到了同样的问题，因为它添加了用于控制?pfdrid_c=true的参数Cache-Control

我这样使用它（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的字符串时才有效。

PrimeFaces 6.0不会在客户端缓存图像

2 个答案: