11 Replies Latest reply on Sep 16, 2008 9:21 AM by Marcelo Leiras

    Bad ModalPanel performance (RF-3670)

    Marcelo Leiras Newbie

      Hi all,

      i'm having performance problem with ModalPanel on my application, so i made a simple project to test its performance "isolatedly" (sorry about my english).
      Then i noted that the time to open and close the modal increases according the number of rendered components in my page. Here is my relevant test code:


      <body>
      
      <rich:modalPanel id="mpDefault" resizeable="false" autosized="true">
       <h:form id="formModalPanel">
       <a4j:outputPanel id="opModalPanel" ajaxRendered="true">
       <rich:panel id="pnModalPanel" binding="#{testModalPanel.pnModalPanel}" />
       </a4j:outputPanel>
       </h:form>
      </rich:modalPanel>
      
      <h:form id="startForm">
      
      <a4j:commandButton value="show modal" oncomplete="Richfaces.showModalPanel('mpDefault');" />
      
      <rich:panel id="pnPanel" binding="#{testPanel.pnPanel}" />
      
      </h:form>
      


      public class TestModalPanel {
      
       private HtmlPanel pnModalPanel;
      
       public TestModalPanel() {
       pnModalPanel = new HtmlPanel();
       pnModalPanel.setStyle("background-color: blue; height: 200px; width: 200px; text-align: center;");
      
      
       HtmlAjaxCommandButton btClose = new HtmlAjaxCommandButton();
       btClose.setValue("fechar");
       btClose.setOncomplete("Richfaces.hideModalPanel('mpDefault');");
       pnModalPanel.getChildren().add(btClose);
       }
      
       public HtmlPanel getPnModalPanel() {
       return pnModalPanel;
       }
      
       public void setPnModalPanel(HtmlPanel pnModalPanel) {
       this.pnModalPanel = pnModalPanel;
       }
      
      }
      



      public class TestPanel {
      
       private HtmlPanel pnPanel;
      
       public TestPanel() {
       this.pnPanel = new HtmlPanel();
       this.pnPanel.setStyle("height: 400px; width: 800px; margin-left: auto; margin-right: auto; background-color: yellow; overflow: auto;");
      
       HtmlPanel pn = null;
       HtmlOutputText ot = null;
       HtmlInputTextarea ta = null;
       HtmlInputText it = null;
      
       for (int i=0, iLen=1000; i<iLen; i++) {
       pn = new HtmlPanel();
       pn.setId("pn"+i);
       pn.setStyle("width: 100%; height: 100px;");
      
       ot = new HtmlOutputText();
       ot.setId("ot"+i);
       ot.setValue("HtmlOutputText ["+i+"]");
       pn.getChildren().add(ot);
      
       ta = new HtmlInputTextarea();
       ta.setId("ta"+i);
       pn.getChildren().add(ta);
      
       it = new HtmlInputText();
       it.setId("it"+i);
       pn.getChildren().add(it);
       this.pnPanel.getChildren().add(pn);
       }
       }
      
       public HtmlPanel getPnPanel() {
       return pnPanel;
       }
      
       public void setPnPanel(HtmlPanel pnPanel) {
       this.pnPanel = pnPanel;
       }
      
      }
      


      With the iLen=1000, the Modal takes around 8s to open and 4s to close. If i set iLen=1, the Modal takes less than 1s to open or close.
      I found some posts with same problem, and some reported bugs too.

      http://jira.jboss.com/jira/browse/RF-3670
      http://jira.jboss.com/jira/browse/RF-3572

      Is this a bug? Am i doing something wrong? Any tip to increase the performance?

      My setup:
      Apache Tomcat/6.0.14
      rf3.2.2 GA
      IE 7 and FF2.0

      Thanks a lot.






        • 1. Re: Bad ModalPanel performance (RF-3670)
          Marcelo Leiras Newbie

          Accidentaly i discovered an interesting behaviour. Maybe the problem is not with the ModalPanel. I made another test, very simple too.
          I have an <a4j:commandButton> and a <h:outputText>. Every time i click on the button, the outputText shows current Date in ms. Please take a look at my code:

          <a4j:commandButton value="test rerender" limitToList="true" actionListener="#{testPanel.buttonClicked}" reRender="otStatus" />
          
          <h:outputText id="otStatus" value="#{testPanel.txtStatus}"/>
          


          public void buttonClicked(ActionEvent event) throws Exception {
           long now = new Date().getTime();
           this.setTxtStatus(now+"");
          }
          


          I'm still using the previous post loop to create some components. If i set iLen=1, the outputText content changes immediately. But, if i set iLen=1000, it takes at least 4s to change.
          Again, the performance decreases if i have "lot" of components in the page.
          Is there something wrong in my code? What should i change to have a best performance?
          Thanks for any help.


          • 2. Re: Bad ModalPanel performance (RF-3670)
            Ilya Shaikovsky Master

            ok.. please add ajaxSingle="true" to your commang button which opens a modal. This is not modal panel question. The time lost at server side. Many components in component tree and all of them will be decoded and processed as for normal request (non ajax) if you will not limit this with ajaxSingle or region.

            • 3. Re: Bad ModalPanel performance (RF-3670)
              Marcelo Leiras Newbie

              Thanks for the answer ilya. I made the change but the performance continues the same. Here is the new code:

              <rich:modalPanel id="mpDefault" resizeable="false" autosized="true">
               <h:form id="formModalPanel">
               <a4j:outputPanel id="opModalPanel" ajaxRendered="true">
               <rich:panel id="pnModalPanel" binding="#{testModalPanel.pnModalPanel}" />
               </a4j:outputPanel>
               </h:form>
              </rich:modalPanel>
              
              <h:form id="startForm">
              
              <a4j:commandButton value="show modal" oncomplete="Richfaces.showModalPanel('mpDefault');" ajaxSingle="true"/>
              
              <rich:panel id="pnPanel" binding="#{testPanel.pnPanel}" />
              
              </h:form>
              


              Maybe some problem with my web.xml?

              <?xml version="1.0" encoding="UTF-8"?>
              <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
               xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
              
               <context-param>
               <param-name>org.ajax4jsf.xmlparser.ORDER</param-name>
               <param-value>NEKO</param-value>
               </context-param>
               <context-param>
               <param-name>com.sun.faces.verifyObjects</param-name>
               <param-value>true</param-value>
               </context-param>
               <context-param>
               <param-name>com.sun.faces.validateXml</param-name>
               <param-value>true</param-value>
               </context-param>
               <context-param>
               <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
               <param-value>client</param-value>
               </context-param>
              
               <servlet>
               <servlet-name>Faces Servlet</servlet-name>
               <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
               <load-on-startup>1</load-on-startup>
               </servlet>
               <servlet-mapping>
               <servlet-name>Faces Servlet</servlet-name>
               <url-pattern>/faces/*</url-pattern>
               </servlet-mapping>
               <welcome-file-list>
               <welcome-file>faces/index.jsp</welcome-file>
               </welcome-file-list>
               <filter>
               <display-name>RichFaces Filter</display-name>
               <filter-name>richfaces</filter-name>
               <filter-class>org.ajax4jsf.Filter</filter-class>
               <init-param>
               <param-name>createTempFiles</param-name>
               <param-value>false</param-value>
               </init-param>
               </filter>
               <filter-mapping>
               <filter-name>richfaces</filter-name>
               <servlet-name>Faces Servlet</servlet-name>
               <dispatcher>REQUEST</dispatcher>
               <dispatcher>FORWARD</dispatcher>
               <dispatcher>INCLUDE</dispatcher>
               </filter-mapping>
               <session-config>
               <session-timeout>30</session-timeout>
               </session-config>
              
              </web-app>
              


              • 4. Re: Bad ModalPanel performance (RF-3670)
                Ilya Shaikovsky Master

                could you please paste phase tracker log for this request?

                • 5. Re: Bad ModalPanel performance (RF-3670)
                  Marcelo Leiras Newbie

                  Ilya, here is the log when the page starts:


                  12/09/2008 11:31:18 org.exadel.jsf.PhaseTracker beforePhase
                  INFO: BEFORE RESTORE_VIEW 1
                  12/09/2008 11:31:18 org.exadel.jsf.PhaseTracker beforePhase
                  INFO: BEFORE RESTORE_VIEW 1
                  12/09/2008 11:31:18 org.exadel.jsf.PhaseTracker afterPhase
                  INFO: AFTER RESTORE_VIEW 1
                  12/09/2008 11:31:18 org.exadel.jsf.PhaseTracker afterPhase
                  INFO: AFTER RESTORE_VIEW 1
                  12/09/2008 11:31:18 org.exadel.jsf.PhaseTracker beforePhase
                  INFO: BEFORE RENDER_RESPONSE 6
                  12/09/2008 11:31:18 org.exadel.jsf.PhaseTracker beforePhase
                  INFO: BEFORE RENDER_RESPONSE 6
                  12/09/2008 11:31:19 org.exadel.jsf.PhaseTracker afterPhase
                  INFO: AFTER RENDER_RESPONSE 6
                  12/09/2008 11:31:19 org.exadel.jsf.PhaseTracker afterPhase
                  INFO: AFTER RENDER_RESPONSE 6


                  and here the log when i click the button to open ModalPanel:


                  12/09/2008 11:34:36 org.exadel.jsf.PhaseTracker beforePhase
                  INFO: BEFORE RESTORE_VIEW 1
                  12/09/2008 11:34:36 org.exadel.jsf.PhaseTracker beforePhase
                  INFO: BEFORE RESTORE_VIEW 1
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker afterPhase
                  INFO: AFTER RESTORE_VIEW 1
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker afterPhase
                  INFO: AFTER RESTORE_VIEW 1
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker beforePhase
                  INFO: BEFORE APPLY_REQUEST_VALUES 2
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker beforePhase
                  INFO: BEFORE APPLY_REQUEST_VALUES 2
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker afterPhase
                  INFO: AFTER APPLY_REQUEST_VALUES 2
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker afterPhase
                  INFO: AFTER APPLY_REQUEST_VALUES 2
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker beforePhase
                  INFO: BEFORE PROCESS_VALIDATIONS 3
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker beforePhase
                  INFO: BEFORE PROCESS_VALIDATIONS 3
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker afterPhase
                  INFO: AFTER PROCESS_VALIDATIONS 3
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker afterPhase
                  INFO: AFTER PROCESS_VALIDATIONS 3
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker beforePhase
                  INFO: BEFORE UPDATE_MODEL_VALUES 4
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker beforePhase
                  INFO: BEFORE UPDATE_MODEL_VALUES 4
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker afterPhase
                  INFO: AFTER UPDATE_MODEL_VALUES 4
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker afterPhase
                  INFO: AFTER UPDATE_MODEL_VALUES 4
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker beforePhase
                  INFO: BEFORE INVOKE_APPLICATION 5
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker beforePhase
                  INFO: BEFORE INVOKE_APPLICATION 5
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker afterPhase
                  INFO: AFTER INVOKE_APPLICATION 5
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker afterPhase
                  INFO: AFTER INVOKE_APPLICATION 5
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker beforePhase
                  INFO: BEFORE RENDER_RESPONSE 6
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker beforePhase
                  INFO: BEFORE RENDER_RESPONSE 6
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker afterPhase
                  INFO: AFTER RENDER_RESPONSE 6
                  12/09/2008 11:34:37 org.exadel.jsf.PhaseTracker afterPhase
                  INFO: AFTER RENDER_RESPONSE 6


                  thanks a lot for your help.

                  • 6. Re: Bad ModalPanel performance (RF-3670)
                    Marcelo Leiras Newbie

                    I forgot the log when i close the ModalPanel:


                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE RESTORE_VIEW 1
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE RESTORE_VIEW 1
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER RESTORE_VIEW 1
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER RESTORE_VIEW 1
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE APPLY_REQUEST_VALUES 2
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE APPLY_REQUEST_VALUES 2
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER APPLY_REQUEST_VALUES 2
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER APPLY_REQUEST_VALUES 2
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE PROCESS_VALIDATIONS 3
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE PROCESS_VALIDATIONS 3
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER PROCESS_VALIDATIONS 3
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER PROCESS_VALIDATIONS 3
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE UPDATE_MODEL_VALUES 4
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE UPDATE_MODEL_VALUES 4
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER UPDATE_MODEL_VALUES 4
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER UPDATE_MODEL_VALUES 4
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE INVOKE_APPLICATION 5
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE INVOKE_APPLICATION 5
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER INVOKE_APPLICATION 5
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER INVOKE_APPLICATION 5
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE RENDER_RESPONSE 6
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE RENDER_RESPONSE 6
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER RENDER_RESPONSE 6
                    12/09/2008 11:37:19 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER RENDER_RESPONSE 6


                    • 7. Re: Bad ModalPanel performance (RF-3670)
                      Marcelo Leiras Newbie

                      If i change the STATE_SAVING_METHOD from "client" to "server", the performance increases a little, but the ModalPanel still takes a good seconds to open and close.

                      <context-param>
                       <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
                       <param-value>server</param-value>
                      </context-param>
                      


                      • 8. Re: Bad ModalPanel performance (RF-3670)
                        Marcelo Leiras Newbie

                        I hosted a test application at
                        http://200.169.232.139/test_rf
                        to demonstrate the performance of ModalPanel.
                        When you click populate, it populates a yellow panel with 1000 panels. Clear button clears the panel. Show modal panel opens the Modal panel. The time to open and close the Modal Panel variates accordng the number of components in yellow panel.
                        I'm using STATE_SAVING_METHOD "server", just because it increases the performance, but i don't know the complications of it. I think it could be a problem when the user quantity grow. Am i wright?
                        I made some modifications at my code too. Here is the last version of relevant code.

                        <body>
                        
                        <rich:modalPanel id="mpDefault" resizeable="false" autosized="true">
                         <h:form id="formModalPanel">
                         <rich:panel id="pnModalPanel" style="background-color: yellow; height: 200px; width: 200px; text-align: center;">
                         <a4j:commandButton id="btClose" value="close" oncomplete="Richfaces.hideModalPanel('mpDefault');" ajaxSingle="true" limitToList="true" reRender="mpDefault"/>
                         <h:outputText id="otNow" value="#{testModalPanel.now}"/>
                         </rich:panel>
                         </h:form>
                        </rich:modalPanel>
                        
                        <h:form id="startForm">
                        <a4j:commandButton id="btShowModal" value="show modal" oncomplete="Richfaces.showModalPanel('mpDefault');" actionListener="#{testModalPanel.buttonClicked}" ajaxSingle="true" limitToList="true" reRender="mpDefault"/>
                        <a4j:commandButton id="btPopulate" value="populate" actionListener="#{testModalPanel.populate}" ajaxSingle="true" limitToList="true" reRender="pnOverhead"/>
                        <a4j:commandButton id="btClear" value="clear" actionListener="#{testModalPanel.clear}" ajaxSingle="true" limitToList="true" reRender="pnOverhead"/>
                        <rich:panel id="pnOverhead" binding="#{testModalPanel.pnOverhead}" />
                        </h:form>
                        
                        </body>
                        



                         public TestModalPanel() {
                         //pnOverhead
                         this.pnOverhead = new HtmlPanel();
                         this.pnOverhead.setStyle("height: 400px; width: 800px; margin-left: auto; margin-right: auto; background-color: yellow; overflow: auto;");
                         }
                        
                         public void buttonClicked(ActionEvent event) throws Exception {
                         this.setNow("Current date in ms ["+new Date().getTime()+"]");
                         }
                        
                         public void populate(ActionEvent event) throws Exception {
                         this.populatePanelOverhead();
                         }
                        
                         public void clear(ActionEvent event) throws Exception {
                         this.pnOverhead.getChildren().clear();
                         }
                        
                         private void populatePanelOverhead() {
                         this.pnOverhead.getChildren().clear();
                         HtmlPanel pn = null;
                         HtmlOutputText ot = null;
                         HtmlInputTextarea ta = null;
                         HtmlInputText it = null;
                        
                         for (int i=0, iLen=1000; i<iLen; i++) {
                         pn = new HtmlPanel();
                         pn.setId("pn"+i);
                         pn.setStyle("width: 100%; height: 100px;");
                        
                         ot = new HtmlOutputText();
                         ot.setId("ot"+i);
                         ot.setValue("HtmlOutputText ["+i+"]");
                         pn.getChildren().add(ot);
                        
                         ta = new HtmlInputTextarea();
                         ta.setId("ta"+i);
                         pn.getChildren().add(ta);
                        
                         it = new HtmlInputText();
                         it.setId("it"+i);
                         pn.getChildren().add(it);
                         this.pnOverhead.getChildren().add(pn);
                         }
                         }
                        


                        The server config:
                        Sun Java System Application Server 9.1_02 (build b04-fcs)
                        Intel Xeon 3065
                        2GB RAM

                        Can i do any other change in my code to increase the performance? Thanks a lot. [/url]

                        • 9. Re: Bad ModalPanel performance (RF-3670)
                          Ilya Shaikovsky Master

                          It takes about 3s to open and lesser that 1s to close for me using test you created.

                          • 10. Re: Bad ModalPanel performance (RF-3670)
                            Marcelo Leiras Newbie

                            Have you tested on FF 2? Please try it at IE.
                            On my IE7 test, it takes about 7s to open and 2s to close. Is this a IE bug?
                            But, anyway, why the performance of modalpanel is associated with the other components of the page?
                            If i use ajaxSingle="true" limitToList="true" and reRender="mpDefault", the other components should not take influence over Modal Panel. Wright?

                            • 11. Re: Bad ModalPanel performance (RF-3670)
                              Marcelo Leiras Newbie

                              If i use ajaxSingle ("boolean attribute which provides possibility to limit JSF tree processing(decoding, conversion/validation, value applying) to the component which send the request only"), is necessary the use of <a4j:region>?