5 Replies Latest reply on Apr 1, 2008 7:39 AM by ilya_shaikovsky

    Huge performance problem

    fabboco

      Hi,

      I have a page with a dataTable and a contextMenu.

      Problem is that when I select a menu item the back-end is called after about 20 seconds.

      Look at the log and the time spent between request state 1 and request state 2.

      Obviously, I'm doing something wrong.

      Please, help me !

      Thank you

      Fab.

      <!DOCTYPE xsl:stylesheet [
       <!ENTITY nbsp " "> <!-- NO-BREAK SPACE -->
       ]>
      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:s="http://jboss.com/products/seam/taglib"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:rich="http://richfaces.org/rich"
       template="/layout/layout.xhtml">
      
      <ui:define name="windowTitle">
       <h:outputText value="#{msgs.list_Bug_title}" />
      </ui:define>
      
      <ui:define name="pageTitle">
       <h:outputText value="#{msgs.list_Bug_title}" styleClass="titleText" />
      </ui:define>
      
      <ui:define name="menubar">
       <a4j:form>
       <rich:toolBar>
       <rich:menuItem immediate="true" value="#{msgs.Application_index}" action="/Index.seam" ajaxSingle="true" />
       <rich:menuItem immediate="true" value="#{msgs.list_Bug_new}" action="#{BugManager.initCreate}" ajaxSingle="true" />
      
      ...........
      
       </rich:toolBar>
       </a4j:form>
      </ui:define>
      
      <ui:define name="localSearch">
      .......
      </ui:define>
      
      <ui:define name="path">
      <h:outputText value="#{BugManager.path}" styleClass="listPath" />
      
      </ui:define>
      
      
      <ui:define name="content">
      
       <link href="../styles/custom.css" rel="stylesheet" type="text/css" />
      
      <script type="text/javascript" language="javascript">
      //<![CDATA[
      
       function startup()
       {
       }
      
      //]]>
      </script>
      
      <a4j:form id="form" >
      
      <!-- POPUP MENU -->
      <rich:contextMenu attached="false" id="menu" submitMode="ajax" >
      
       <rich:menuItem ajaxSingle="true" submitMode="ajax" value="#{msgs.list_Bug_display}" actionListener="#{BugManager.poupMenuSelectItem}" action="#{BugManager.initDisplay}" requestDelay="0" >
       <a4j:actionparam name="selectedId" value="{selectedBean}" />
       </rich:menuItem>
      
      ..........
      
      </rich:contextMenu>
      
      
      <a4j:log popup="true" level="ALL" style="width: 1200px; height: 300px;"></a4j:log>
      
      <table width="100%" cellpadding="0" cellspacing="0" >
      <!-- DATA SCROLLER: BUTTONS -->
       <tr>
       <td align="center">
       <rich:datascroller id="dataScroll_1" for="bug"
       fastStep="3"
       paginator="true"
       paginatorMaxPages="4"
       styleClass="formBorderHighlight"
       requestDelay="0"
       pageIndexVar="pageIndex"
       pagesVar="pages">
       </rich:datascroller>
       </td>
       </tr>
      <!-- DATA TABLE -->
       <tr>
       <td>
       <rich:panel>
       <rich:dataTable id="bug" var="bug" rows="25" value="#{bugList}" width="100%" immediate="true"
       onRowMouseOver = "this.style.backgroundColor='#F8F8F8'"
       onRowMouseOut = "this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
       columnClasses = "dataColumnCenterAlignment,dataColumnLeftAlignment,dataColumnLeftAlignment,dataColumnLeftAlignment,dataColumnCenterAlignment,dataColumnCenterAlignment,dataColumnLeftAlignment,dataColumnLeftAlignment,dataColumnLeftAlignment,dataColumnLeftAlignment,dataColumnCenterAlignment"
      
       >
       <f:facet name="header">
       <h:outputText value="Records: #{e1List.size}" />
       </f:facet>
      <!-- POPUP MENU COLUMN -->
       <rich:column>
       <f:facet name="header"> </f:facet>
       <h:panelGroup>
       <h:graphicImage url="../img/action.gif" id="pic" >
       <rich:componentControl event="onclick" for="menu" operation="show" >
       <f:param value="#{bug.id}" name="selectedBean"/>
       </rich:componentControl>
       </h:graphicImage>
       </h:panelGroup>
       </rich:column>
      <!-- OTHER COLUMS -->
      <rich:column>
       <f:facet name="header">
       <h:panelGroup style="white-space: nowrap;">
       <h:outputText value="#{msgs.list_Bug_uid}" />
       <h:commandButton action="#{BugManager.orderBy1A}" image="../img/asc.gif" rendered="#{BugManager.order!=1}" />
       <h:commandButton action="#{BugManager.orderBy1A}" image="../img/asc_selected.gif" rendered="#{BugManager.order==1}" />
       <h:commandButton action="#{BugManager.orderBy1D}" image="../img/desc.gif" rendered="#{BugManager.order!=2}" />
       <h:commandButton action="#{BugManager.orderBy1D}" image="../img/desc_selected.gif" rendered="#{BugManager.order==2}" />
       </h:panelGroup>
       </f:facet>
       <h:outputText value="#{bug.uid}" >
       </h:outputText>
      </rich:column>
      
      ...................
      
       </rich:dataTable>
       </rich:panel>
       </td>
       </tr>
      </table>
      </a4j:form>
      
      </ui:define>
      
      </ui:composition>
      
      


      debug[11:00:10,020]: Have Event [object Object] with properties: target: [object HTMLSpanElement], srcElement: undefined, type: click
      debug[11:00:10,021]: NEW AJAX REQUEST !!! with form :form
      debug[11:00:10,022]: Append hidden control form with value [form] and value attribute [form]
      debug[11:00:10,024]: Append hidden control autoScroll with value [] and value attribute []
      debug[11:00:10,025]: Append hidden control form:_idcl with value [] and value attribute []
      debug[11:00:10,025]: Append hidden control form:_link_hidden_ with value [] and value attribute []
      debug[11:00:10,026]: Append hidden control javax.faces.ViewState with value [_id4] and value attribute [_id4]
      debug[11:00:10,027]: parameter selectedId with value 76
      debug[11:00:10,027]: parameter form:j_id58 with value form:j_id58
      debug[11:00:10,029]: Start XmlHttpRequest
      debug[11:00:10,031]: Reqest state : 1
      debug[11:00:10,031]: QueryString: AJAXREQUEST=_viewRoot&form=form&autoScroll=&form%3A_idcl=&form%3A_link_hidden_=&javax.faces.ViewState=_id4&selectedId=76&form%3Aj_id58=form%3Aj_id58&
      debug[11:00:10,043]: Reqest state : 1
      debug[11:00:35,491]: Reqest state : 2
      debug[11:00:35,492]: Reqest state : 3
      debug[11:00:35,497]: Reqest state : 4
      debug[11:00:35,498]: Reqest end with state 4
      debug[11:00:35,499]: Response with content-type: text/xml;charset=UTF-8
      debug[11:00:35,499]: Full response content: <?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="Ajax-Response" content="redirect" /><meta name="Location" content="/anomalie/Bug.seam?conversationId=3" /></head></html>
      debug[11:00:35,500]: Header Ajax-Expired not found, search in <meta>
      debug[11:00:35,501]: search for elements by name 'meta' in element #document
      debug[11:00:35,506]: getElementsByTagName found 2
      debug[11:00:35,508]: Find <meta name='Ajax-Response' content='redirect'>
      debug[11:00:35,508]: Find <meta name='Location' content='/anomalie/Bug.seam?conversationId=3'>
      warn[11:00:35,509]: No ajax response header
      debug[11:00:35,521]: call getElementById for id= org.ajax4jsf.oncomplete
      





        • 1. Re: Huge performance problem
          fabboco

          It looks like that each ajax request contains every single field that is present into the form(s).

          Setting up this long request is very time consuming.

          I got better performance using

          <a4j:region>
          


          since this tag controls which field is sent into the ajax request.

          Any better idea ?

          Fab.

          <a4j:region>
          <rich:contextMenu attached="false" id="menu" submitMode="ajax" >
          ....
          </rich:contextMenu>
          </a4j:region>
          


          <a4j:region>
           <rich:datascroller id="dataScroll_1" for="bug" ......... />
          </a4j:region>
          


          <rich:column>
           <f:facet name="header">
           <h:panelGroup style="white-space: nowrap;">
           <h:outputText value="#{msgs.list_Bug_uid}" />
           <a4j:region>
           <a4j:commandButton action="#{BugManager.orderBy1A}" image="../img/asc.gif" rendered="#{BugManager.order!=1}" ajaxSingle="true" reRender="bug"/>
           <a4j:commandButton action="#{BugManager.orderBy1A}" image="../img/asc_selected.gif" rendered="#{BugManager.order==1}" ajaxSingle="true" reRender="bug"/>
           <a4j:commandButton action="#{BugManager.orderBy1D}" image="../img/desc.gif" rendered="#{BugManager.order!=2}" ajaxSingle="true" reRender="bug"/>
           <a4j:commandButton action="#{BugManager.orderBy1D}" image="../img/desc_selected.gif" rendered="#{BugManager.order==2}" ajaxSingle="true" reRender="bug"/>
           </a4j:region>
           </h:panelGroup>
           </f:facet>
           <h:outputText value="#{bug.uid}" >
           </h:outputText>
          </rich:column>
          


          • 2. Re: Huge performance problem
            ilya_shaikovsky

            check from our guide ways available to optimize ajax requests.

            • 3. Re: Huge performance problem
              rwilson9

              check from our guide ways available to optimize ajax requests. ??? Is there support for RichFaces that gives complete answers?

              • 4. Re: Huge performance problem

                $$$

                • 5. Re: Huge performance problem
                  ilya_shaikovsky

                  We spending a lot of time to writing demosite and guide in order not to spend much more time answering hundred times the same questions.

                  If you read the article and not sure that understand something clear or something doesn't works - you are welcome at forum.