1 2 Previous Next 15 Replies Latest reply on Sep 27, 2007 6:04 AM by viggo.navarsete

    Richfaces in Firefox vs Internet Explorer (7)

    viggo.navarsete

      I have a jsf application that uses Richfaces. In Firefox it looks ok and performs well. But when I try to access the same application from Internet Explorer 7 it seems to slow down, and the styling is uggly. What I've seen is that the label of nodes in a tree doesn't have the same styling as e.g outputText in a panelGrid.
      Questions:
      1. Are there any tuning options to make IE7 perform better?
      In web.xml I have the following context-param's. Could they be changed, and/or others added?

      <context-param>
       <param-name>com.sun.faces.verifyObjects</param-name>
       <param-value>false</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>


      2. Perhaps precompilation of the JSP files could help? Any input how to do this? I'm using Netbeans 6 as my IDE, and I'm deploying to both Glassfish and JBoss.

      3, What about styling? Any best practices of how to do proper styling?

        • 1. Re: Richfaces in Firefox vs Internet Explorer (7)

          I do not understand your point how pre-compiling JSP on the server might help to avoid bugs in IE

          • 2. Re: Richfaces in Firefox vs Internet Explorer (7)
            viggo.navarsete

            precompiling JSP does not prevent bugs in IE, but perhaps speed up the initial loading of the page for the user (both in Firefox AND IE)?!

            • 3. Re: Richfaces in Firefox vs Internet Explorer (7)

              I think the point was that precompilation might improve performance. But that only improves performance initially. From my experience facelets perform better than JSP and I do not see a performance hit on IE7 using facelets.

              I have not seen styling changes in IE7 using facelets.

              • 4. Re: Richfaces in Firefox vs Internet Explorer (7)

                Facelets with JSF 1.2 set context type to application/xhtml+xml by default. FireFox understands this context type and switch itself to the xhml mode. IE does not support this context type and proceeds with text/html

                I am very pessimistic regarding pre-compiling as a way to improve something. Especially, if we speak about the production environment where application is running many days without reloading.

                Before speaking about performance, try to understand the operation(s) during the page lifecycle is a time-consuming for your particular application. There is no universal pill here.

                • 5. Re: Richfaces in Firefox vs Internet Explorer (7)
                  viggo.navarsete

                  Thanks for input SergeySmirnov: I think I understand the impact of the page lifecycle operations. What I don't understand is that it seems that the same application doesn't perform equally in Firefox and IE7. What/where can I look to see what is causing this?

                  • 6. Re: Richfaces in Firefox vs Internet Explorer (7)

                    If I were you I look closely to the layout of the page.
                    1. How deep the hierarchy is?
                    2. do you use semantic layout or set of embedded to each other tables.
                    3. if you use ajax, does you update only the areas that are might be changed actually.

                    IE starts to be very lazy during the manipulation with the DOM element. Especially, the DOM path to the modified element is long.

                    The example from my real life:
                    couple weeks about, one of our local product manager came to me and asked the direct question "do you know the issue with RichFaces when it degrades the performance in IE?"

                    The short investigation showed that the IE became very slow only on the page where the home-made flash move was located. Flash movie, actually, did nothing, but showed the map with the running clock on it.

                    So, it might be very hard to figure our what is going on without looking at real stuff.

                    • 7. Re: Richfaces in Firefox vs Internet Explorer (7)
                      viggo.navarsete

                      I think it might be related to the layout, and perhaps the deepness of the hierarchy. I'm using ajax to update certain areas of the page as well. I will look through the layout, and perhaps post a sample of it at the forum to give more information to look into when debugging it.

                      • 8. Re: Richfaces in Firefox vs Internet Explorer (7)

                        Just for the testing purpose, try to move the updated area to the top of the DOM

                        • 9. Re: Richfaces in Firefox vs Internet Explorer (7)
                          mail.micke

                          One "performance" hit we have had (with IE) with pages that updates a lot of things via ajax is the virus scanner (McAfee for us),
                          while the page is being rendered the scanner consumes loads of cpu.

                          • 10. Re: Richfaces in Firefox vs Internet Explorer (7)
                            viggo.navarsete

                            mail.micke: interesting! I did some testing and it didn't seem to make any difference for us. Just a slow, no matter if we had virus scanner enabled or disabled.

                            • 11. Re: Richfaces in Firefox vs Internet Explorer (7)
                              viggo.navarsete

                              What we've seen now is that when we do mouseover on the nodes in the tree I have, then the CPU load goes to 100%, and when we stop moving the mouse, the CPU load goes back to normal.
                              I don't have anything that's triggered on mouseover, so I just wonder why the CPU is so high.

                              • 12. Re: Richfaces in Firefox vs Internet Explorer (7)
                                viggo.navarsete

                                I will post my jsp so that you guys can have a look at it. All changes are welcome :)

                                <%@page contentType="text/html"%>
                                <%@page pageEncoding="UTF-8"%>
                                
                                <!-- Core JSF taglibraries -->
                                <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
                                <%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
                                
                                <!-- JSTL tablibrary -->
                                <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
                                
                                <!-- ajax4jsf tablibrary -->
                                <%@ taglib prefix="a" uri="http://richfaces.org/a4j"%>
                                
                                <!-- Richfaces taglibrary -->
                                <%@ taglib prefix="r" uri="http://richfaces.org/rich"%>
                                
                                <!DOCTYPE html
                                PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                                <html xmlns="http://www.w3.org/1999/xhtml">
                                 <head>
                                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
                                 <title>JSP Page</title>
                                 </head>
                                 <body>
                                 <f:view>
                                 <style>
                                 .treeContent {
                                 vertical-align:top;
                                 horizontal-align:left;
                                 }
                                 .treeDetails {
                                 vertical-align:top;
                                 horizontal-align:right;
                                 }
                                 .treeLink {
                                 text-decoration: none;
                                 color: black;
                                 }
                                 .treeLink:hover {
                                 text-decoration: underline;
                                 }
                                 .summaryGrid {
                                 width: 100%;
                                 margin: 0;
                                 padding: 0;
                                 border: 0;
                                 }
                                 .scroller {
                                 overflow: auto;
                                 height: 500px;
                                 }
                                 .tabContent {
                                 padding: 0;
                                 margin: 0;
                                 }
                                 .entityIcon {
                                 vertical-align: middle;
                                 margin-right: 5px;
                                 }
                                 .basicDetails {
                                 padding-left: 4px;
                                 }
                                 .complexDetails {
                                 margin: 4px;
                                
                                 }
                                
                                 </style>
                                 <h:form>
                                 <r:panel style="width:100%;" >
                                 <f:facet name="header">
                                 <f:verbatim>Search</f:verbatim>
                                 </f:facet>
                                 <table>
                                 <tr>
                                 <td>
                                 <h:outputLabel for="searchInputString" value="Search input"/>
                                 </td>
                                 <td>
                                 <h:inputText id="searchInputString" value="#{searchBean.searchString}" size="40"/>
                                 <h:commandButton action="#{searchBean.search}" value="Search"/>
                                 </td>
                                 <td>
                                 <h:selectBooleanCheckbox id="searchEntitiesCheck" value="#{searchBean.searchEntity}"/><h:outputLabel for="searchEntitiesCheck" value="Entities"/>
                                 </td>
                                 </tr>
                                 <tr>
                                 <td>
                                 <h:outputLabel for="fromCal" value="From"/>
                                 </td>
                                 <td>
                                 <r:calendar id="fromCal" value="#{searchBean.searchFrom}" enableManualInput="false" popup="true"/>
                                 </td>
                                 <td>
                                 <h:selectBooleanCheckbox id="searchTBUCheck" value="#{searchBean.searchTBU}"/><h:outputLabel for="searchTBUCheck" value="TBU"/>
                                 </td>
                                 </tr>
                                 <tr>
                                 <td>
                                 <h:outputLabel for="toCal" value="To"/>
                                 </td>
                                 <td>
                                 <r:calendar id="toCal" value="#{searchBean.searchTo}" enableManualInput="false" popup="true"/>
                                 </td>
                                 <td>
                                 <h:selectBooleanCheckbox id="searchPropertiesCheck" value="#{searchBean.searchPropertyValue}"/><h:outputLabel for="searchPropertiesCheck" value="Property value"/>
                                 </td>
                                 </tr>
                                 </table>
                                 </r:panel>
                                 <r:spacer height="3px"/>
                                 <h:panelGroup style="width:40%" rendered="#{searchBean.currentGTNetSearch.searchResult.entitiesInResult}">
                                 <h:panelGrid columnClasses="treeContent, treeDetails" columns="3" cellpadding="0" cellspacing="0">
                                 <r:panel bodyClass="scroller">
                                 <f:facet name="header">
                                 <f:verbatim>Search Result</f:verbatim>
                                 </f:facet>
                                
                                 <r:tree switchType="ajax" value="#{searchBean.searchResultNode.data}" var="item" nodeFace="#{item.type}">
                                 <r:treeNode icon="resources/images/#{item.entity.entityClass}.png" highlightedClass="treeLink" type="entityNode" changeExpandListener="#{item.lookupOrgDetails}">
                                 <h:selectBooleanCheckbox value="#{item.selected}">
                                 <a:support event="onclick" actionListener="#{item.selectDetailsForSummary}" reRender="summaryPanel"/>
                                 </h:selectBooleanCheckbox>
                                 <a:commandLink styleClass="treeLink" reRender="detailsPanel,traceabilityGraph" actionListener="#{item.lookupDetails}" value="#{item.entityId}"/>
                                 </r:treeNode>
                                 <r:treeNode icon="resources/images/org.png" iconLeaf="resources/images/org.png" type="organizationNode">
                                 <h:selectBooleanCheckbox value="#{item.selected}"/>
                                 <h:outputText value="#{item.organizationName}" />
                                 </r:treeNode>
                                 <r:treeNode icon="resources/images/station.png" iconLeaf="resources/images/station.png" type="stationNode">
                                 <h:selectBooleanCheckbox value="#{item.selected}">
                                 <a:support event="onclick" actionListener="#{item.selectDetailsForSummary}" reRender="summaryPanel"/>
                                 </h:selectBooleanCheckbox>
                                 <a:commandLink styleClass="treeLink" reRender="detailsPanel" actionListener="#{item.lookupDetails}" value="#{item.entityId}"/>
                                 </r:treeNode>
                                 </r:tree>
                                
                                 </r:panel>
                                
                                 <r:spacer width="3px"/>
                                 <r:tabPanel switchType="client" style="width:60%;" contentClass="tabContent">
                                
                                 <r:tab label="Details">
                                 <div class="scroller">
                                 <h:panelGroup id="detailsPanel">
                                 <h:panelGrid styleClass="basicDetails" columns="2" rendered="#{!empty searchBean.currentGTNetSearch.currentEntityDetails}">
                                 <h:outputText value="Name:"/>
                                 <h:outputText value="#{searchBean.currentGTNetSearch.currentEntityDetails.traceable.label}"/>
                                 <h:outputText value="Type:"/>
                                 <h:panelGroup>
                                 <h:graphicImage styleClass="entityIcon" value="resources/images/#{searchBean.currentGTNetSearch.currentEntityDetails.traceable.entityClass}.png"/> <h:outputText value="#{searchBean.currentGTNetSearch.currentEntityDetails.traceable.entityClass}"/>
                                 </h:panelGroup>
                                 <h:outputText value="Local Id:"/>
                                 <h:outputText value="#{searchBean.currentGTNetSearch.currentEntityDetails.traceable.localId}"/>
                                 <h:outputText value="Created:"/>
                                 <h:outputText value="#{searchBean.currentGTNetSearch.currentEntityDetails.traceable.timestamp}"/>
                                 <h:outputText value="Description:"/>
                                 <h:outputText value="#{searchBean.currentGTNetSearch.currentEntityDetails.traceable.description}"/>
                                 <h:outputText value="Organization: TODO: http://jira.pd.tracetracker.com:8080/jira/browse/TIX-338"/>
                                 </h:panelGrid>
                                 <h:panelGrid styleClass="basicDetails" columns="2" rendered="#{!empty searchBean.currentGTNetSearch.currentStationDetails}">
                                 <h:outputText value="Name:"/>
                                 <h:outputText value="#{searchBean.currentGTNetSearch.currentStationDetails.station.label}"/>
                                 <h:outputText value="Type:"/>
                                 <h:panelGroup>
                                 <h:graphicImage styleClass="entityIcon" value="resources/images/#{searchBean.currentGTNetSearch.currentStationDetails.station.entityClass}.png"/> <h:outputText value="#{searchBean.currentGTNetSearch.currentStationDetails.station.entityClass}"/>
                                 </h:panelGroup>
                                 <h:outputText value="Local Id:"/>
                                 <h:outputText value="#{searchBean.currentGTNetSearch.currentStationDetails.station.localId}"/>
                                 <h:outputText value="Created:"/>
                                 <h:outputText value="#{searchBean.currentGTNetSearch.currentStationDetails.station.timestamp}"/>
                                 <h:outputText value="Description:"/>
                                 <h:outputText value="#{searchBean.currentGTNetSearch.currentStationDetails.station.description}"/>
                                 <h:outputText value="Organization: TODO: Fill out"/>
                                 </h:panelGrid>
                                 <r:dataTable styleClass="complexDetails" rendered="#{!empty searchBean.currentGTNetSearch.currentEntityDetails.properties}" width="100%" value="#{searchBean.currentGTNetSearch.currentEntityDetails.properties}" var="prop">
                                 <f:facet name="header">
                                 <r:columnGroup>
                                 <r:column colspan="2">
                                 <h:outputText value="TRD Properties"/>
                                 </r:column>
                                 </r:columnGroup>
                                 </f:facet>
                                 <r:column>
                                 <h:outputText value="#{prop.value.label}"/>
                                 </r:column>
                                 <r:column>
                                 <h:outputText value="#{prop.value.value}"/>
                                 </r:column>
                                 </r:dataTable>
                                 <r:dataTable styleClass="complexDetails" rendered="#{!empty searchBean.currentGTNetSearch.currentStationDetails.properties}" width="100%" value="#{searchBean.currentGTNetSearch.currentStationDetails.properties}" var="prop">
                                 <f:facet name="header">
                                 <r:columnGroup>
                                 <r:column colspan="2">
                                 <h:outputText value="TRD Properties"/>
                                 </r:column>
                                 </r:columnGroup>
                                 </f:facet>
                                 <r:column>
                                 <h:outputText value="#{prop.propertyValue.label}"/>
                                 </r:column>
                                 <r:column>
                                 <h:outputText value="#{prop.propertyValue.value}"/>
                                 </r:column>
                                 </r:dataTable>
                                 <r:dataTable styleClass="complexDetails" columns="3" rendered="#{!empty searchBean.currentGTNetSearch.currentEntityDetails.tradeUnitLinks}" width="100%" value="#{searchBean.currentGTNetSearch.currentEntityDetails.tradeUnitLinks}" var="link">
                                 <f:facet name="header">
                                 <r:columnGroup>
                                 <r:column colspan="3">
                                 <h:outputText value="Deliveries"/>
                                 </r:column>
                                 <r:column breakBefore="true">
                                 <h:outputText value="Type"/>
                                 </r:column>
                                 <r:column>
                                 <h:outputText value="Org."/>
                                 </r:column>
                                 <r:column>
                                 <h:outputText value="When"/>
                                 </r:column>
                                 </r:columnGroup>
                                 </f:facet>
                                 <r:column>
                                 <h:outputText rendered="#{link.type == 'receivedfrom'}" value="Received from"/>
                                 <h:outputText rendered="#{link.type == 'sentto'}" value="Sent to"/>
                                 </r:column>
                                 <r:column>
                                 <h:outputText value="#{link.organization.fullName}"/>
                                 </r:column>
                                 <r:column>
                                 <h:outputText value="#{link.timestamp}"/>
                                 </r:column>
                                 </r:dataTable>
                                 <%-- It seems this component only renders every time the value of "data" changes. That is why I generate a random number --%>
                                 <r:paint2D rendered="#{!empty searchBean.currentGTNetSearch.currentEntityDetails}" id="traceabilityGraph" width="500" height="400" data="#{searchBean.randomLong}" format="png" paint="#{searchBean.paint}"/>
                                 </h:panelGroup>
                                 </div>
                                 </r:tab>
                                 <r:tab label="Summary" >
                                 <div class="scroller">
                                 <r:dataGrid id="summaryPanel" border="0" rowClasses="summaryGrid" columnClasses="summaryGrid" styleClass="summaryGrid" columns="1" value="#{searchBean.currentGTNetSearch.currentEntitySummaryDetails}" var="summaryDetails">
                                 <h:panelGroup styleClass="scroller">
                                 <h:panelGrid columns="2" styleClass="basicDetails">
                                 <h:outputText value="Name:"/>
                                 <h:outputText value="#{summaryDetails.traceable.label}"/>
                                 <h:outputText value="Type:"/>
                                 <h:panelGroup>
                                 <h:graphicImage styleClass="entityIcon" value="resources/images/#{summaryDetails.traceable.entityClass}.png"/> <h:outputText value="#{summaryDetails.traceable.entityClass}"/>
                                 </h:panelGroup>
                                 <h:outputText value="Local Id:"/>
                                 <h:outputText value="#{summaryDetails.traceable.localId}"/>
                                 <h:outputText value="Created:"/>
                                 <h:outputText value="#{summaryDetails.traceable.timestamp}"/>
                                 <h:outputText value="Description:"/>
                                 <h:outputText value="#{summaryDetails.traceable.description}"/>
                                 <h:outputText value="Organization: TODO: Fill out"/>
                                 </h:panelGrid>
                                 <r:dataTable styleClass="complexDetails" rendered="#{!empty summaryDetails.properties}" width="100%" value="#{summaryDetails.properties}" var="prop">
                                 <f:facet name="header">
                                 <r:columnGroup>
                                 <r:column colspan="2">
                                 <h:outputText value="TRD Properties"/>
                                 </r:column>
                                 </r:columnGroup>
                                 </f:facet>
                                 <r:column>
                                 <h:outputText value="#{prop.value.label}"/>
                                 </r:column>
                                 <r:column>
                                 <h:outputText value="#{prop.value.value}"/>
                                 </r:column>
                                 </r:dataTable>
                                 <r:dataTable styleClass="complexDetails" columns="3" rendered="#{!empty summaryDetails.tradeUnitLinks}" width="100%" value="#{summaryDetails.tradeUnitLinks}" var="link">
                                 <f:facet name="header">
                                 <r:columnGroup>
                                 <r:column colspan="3">
                                 <h:outputText value="Deliveries"/>
                                 </r:column>
                                 <r:column breakBefore="true">
                                 <h:outputText value="Type"/>
                                 </r:column>
                                 <r:column>
                                 <h:outputText value="Org."/>
                                 </r:column>
                                 <r:column>
                                 <h:outputText value="When"/>
                                 </r:column>
                                 </r:columnGroup>
                                 </f:facet>
                                 <r:column>
                                 <h:outputText rendered="#{link.type == 'receivedfrom'}" value="Received from"/>
                                 <h:outputText rendered="#{link.type == 'sentto'}" value="Sent to"/>
                                 </r:column>
                                 <r:column>
                                 <h:outputText value="#{link.organization.fullName}"/>
                                 </r:column>
                                 <r:column>
                                 <h:outputText value="#{link.timestamp}"/>
                                 </r:column>
                                 </r:dataTable>
                                 <r:separator/>
                                 </h:panelGroup>
                                 </r:dataGrid>
                                 </div>
                                 </r:tab>
                                 </r:tabPanel>
                                 </h:panelGrid>
                                 </h:panelGroup>
                                 </h:form>
                                 </f:view>
                                 </body>
                                </html>


                                • 13. Re: Richfaces in Firefox vs Internet Explorer (7)
                                  viggo.navarsete

                                  When running the same application in Safari and Opera everything seems better than IE. Firefox performs best.

                                  • 14. Re: Richfaces in Firefox vs Internet Explorer (7)
                                    mail.micke

                                    Hi,
                                    for us it was really obvious that mcaffee was causing problems, we see the process consuming cpu in the task manager.

                                    - Mike

                                    1 2 Previous Next