Уменьшение дерева/состояния компонента JSF с помощью альтернативного подхода. Это нормально?

К сожалению, я допустил ошибку в выборе JSF для приложения с высоким доступом к интернету, теперь мне интересно, как улучшить масштабируемость этого веб-приложения JSF.

У меня есть страница JSF, в которой отображается большое количество элементов, каждый из которых может быть прокомментирован. Чтобы уменьшить состояние и улучшить производительность, я пытаюсь уменьшить значение forms/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 для всех элементов и передав необходимые параметры этой удаленной команде.

<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>

Лучше ли это делать (или есть ли какие-либо проблемы с этим подходом)?

Ответы

Ответ 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 был сделан. на сервере обновите свою модель соответственно

Или Вы также можете собрать все комментарии на стороне клиента и отправить их на сервер за один раз.

2.. Когда пользователь нажимает кнопку отправки, вызывается функция js для агрегирования всех комментариев в структуре, которые вы сможете легко анализировать на стороне сервера (т.е. "{c1,comment a};{c2,comment b};{c5=,comment e}..."). передать эту строку на сервер, проанализировать ее и соответствующим образом обновить вашу модель.

3. после каждого события размытия в любом из полей комментариев вызовите функцию js, которая обновляет скрытое поле.

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

когда пользователь отправляет форму, разобрать allComments и соответствующим образом обновить вашу модель.

EDIT:

Чтобы решить проблему с общей производительностью, я добавил рекомендации из статьи, которую я нашел полезной ускорить часть 1 Ускорить часть 2.

Надеюсь, что это поможет

btw, я бы рекомендовал первый подход, а не последние два.