通过替代方法减少JSF组件树/状态.好吗？

Question

不幸的是,我错误地选择了面向互联网,高流量应用程序的JSF,现在我想知道如何提高这个JSF webapp的可伸缩性.

我有一个JSF页面,显示大量的项目,每个项目都可以评论.为了减少状态和提高性能,我试图减少页面上的forms/ no commandButtons.

1.通过什么方式可以减少JSF的组件树/状态？普通的html元素(在jsf标签之间混合)是否也构成了组件树的一部分？我不知道组件状态保存如何对我的应用程序有帮助,因为我在设计我的应用程序时一直遵循简单的请求/响应模型,(可能仅对JSF的内部要求有帮助)!？

2.我正在考虑一种方法,而不是为下面的每个项目创建一个单独的<h:form>(每个都有一个单独的commandButton),

(通常的做法)

<h:form> <!-- for each item a separately -->
      <h:outputText value="Add comment"/>
      <h:inputTextarea value="#{itemController.comment}"  required="true"/>

      <p:commandButton actionListener="#{itemController.addUserComment(123)}" value="Add" />
</h:form>

(替代方法)

我试图通过为所有项目放置一个remoteCommand并将所需参数传递给此remoteCommand来使上述更好.

<form>
   <input id="item1_comment"/>
   <button onclick="addComment(123, 'item1_comment');"/>  
</form>    

<script type="text/javascript">
    function addComment(itemId, id) {
        $('#comment_in').attr('value', $('#'+id).attr('value'));
        $('#forItem_in').attr('value', itemId);
        addComment_RC(); // call remoteCommand to show the content in dialog
    }
</script>

<h:form prependId="false" >  <!-- for all items, just single remoteCOmmand -->
    <h:inputHidden id="comment_in" value="#{itemController.comment}"/>
    <h:inputHidden id="forItem_in" value="#{itemController.forItem}"/>
    <p:remoteCommand name="addComment_RC" process="@form" actionListener="#{itemController.addComment()}" />
</h:form>

这样做是否更好(或者这种方法有什么问题)？

Answer 1

您描述的情况中的性能问题通常是由大量的EL表达式引起的,这会给服务器带来负担.

解决此问题的一种方法是在客户端计算注释,并将它们一次性传递给服务器.从而将注释EL表达式的数量减少到一个或没有,并且只使用一个按钮.

将所有元素放在一个表单中.注释字段没有绑定.

  <h:form>

       // first element 
       <h:outputText value=#{first element}
       // first comment 
       <h:inputTextarea id="comment1"/> <-- notice there is no EL expression 
                                            But we use a unique id for each comment 

       // second element 
       <h:outputText value=#{second element}
       // second comment 
       <h:inputTextarea id="comment2"/> 
       .
       .
       .



</h:form>

从这里你也可以

1.在任何注释字段中的每个模糊事件之后,ajax服务器并将注释和发出ajax调用的注释的id作为参数传递.在服务器上相应地更新您的模型

或者您也可以在客户端收集所有注释并一次将它们发送到服务器.

2.当用户按下提交按钮时,调用js函数来聚合您将能够在服务器端轻松解析的结构中的所有注释(即."{c1,comment a};{c2,comment b};{c5=,comment e}...").将该字符串传递给服务器,解析它并相应地更新您的模型.

3.在任何注释字段中的每个模糊事件之后,调用更新隐藏字段的js函数.

<h:inputHidden value="{myClass.allComments}" />

当用户提交表单解析allComments并相应地更新您的模型时.

编辑:

为了解决一般性能问题,我添加了一篇文章的建议,我发现有助于加速第1部分 加速第2部分.

希望这可以帮助

顺便说一句,我会推荐第一种方法,而不是最后两种方法.