ScrollableDataTable - JavaScript optimisation ---------------------------------------------- Key: RF-726 URL: http://jira.jboss.com/jira/browse/RF-726 Project: RichFaces Issue Type: Bug Affects Versions: 3.1.0 Reporter: Mikhail Grushinskiy Assigned To: Konstantin Mishin Fix For: 3.2.0 Attachments: AnotherRun.jpg, Java Profiler results.jpg, JBossProfile.GIF Old title was Render Phase is too long with RichFaces table (scrollableDataTable) Table of 100 records with 20 columns takes 3.5 sec to render (on server side) Rendering in browser takes even longer 7.5 (!!!!!!) seconds to render on client side (FireFox 2.0) My environment Release ID: JBoss [EAP] 4.2.0.GA (build: SVNTag=JBPAPP_4_2_0_GA date=200706281411) Java version: 1.6.0_02,Sun Microsystems Inc. JBoss Seam 1.2.1 JSF Sun RI 1.2 (comes with JBoss EAP) Server side state saving Here is output from FireBug JavaScript profiler (apologies for formatting) scrollTo, setOpacity, _calcDefaultRowHeight, and getViewportHeight javascript functions are main culprits on client side (90% of 7.5 seconds) Function Calls Percent Own Time Time Avg Min Max File scrollTo 272 52.8% 3984.375ms 3984.375ms 14.648ms 0ms 578.125ms a4j_3_1_0-SNAPSHO... (line 110) setOpacity 221 25.88% 1953.125ms 3531.25ms 15.979ms 0ms 875ms a4j_3_1_0-SNAPSHO... (line 114) _calcDefaultRowHeight 1 10.56% 796.875ms 796.875ms 796.875ms 796.875ms 796.875ms scrollable-data-t... (line 183) getViewportHeight 8 5.18% 390.625ms 406.25ms 50.781ms 0ms 296.875ms scrollable-data-t... (line 59) times 566 2.07% 156.25ms 187.5ms 0.331ms 0ms 187.5ms a4j_3_1_0-SNAPSHO... (line 25) $ 1893 1.04% 78.125ms 93.75ms 0.05ms 0ms 15.625ms a4j_3_1_0-SNAPSHO... (line 90) setListeners 1 0.62% 46.875ms 62.5ms 62.5ms 62.5ms 62.5ms scrollable-data-t... (line 222) parseTemplate 1 0.21% 15.625ms 812.5ms 812.5ms 812.5ms 812.5ms scrollable-data-t... (line 144) initialize 1 0.21% 15.625ms 2500ms 2500ms 2500ms 2500ms scrollable-data-t... (line 134) hasAttribute 1 0.21% 15.625ms 15.625ms 15.625ms 15.625ms 15.625ms a4j_3_1_0-SNAPSHO... (line 128) extend 1893 0.21% 15.625ms 15.625ms 0.008ms 0ms 15.625ms a4j_3_1_0-SNAPSHO... (line 97) requireClass 76 0.21% 15.625ms 31.25ms 0.411ms 0ms 15.625ms scrollable-data-t... (line 8) getElement 56 0.21% 15.625ms 1156.25ms 20.647ms 0ms 578.125ms scrollable-data-t... (line 45) getOpacity 206 0.21% 15.625ms 218.75ms 1.062ms 0ms 187.5ms a4j_3_1_0-SNAPSHO... (line 111) observe 400 0.21% 15.625ms 15.625ms 0.039ms 0ms 15.625ms scrollable-data-t... (line 21) parseTemplate 1 0.21% 15.625ms 390.625ms 390.625ms 390.625ms 390.625ms scrollable-data-t... (line 99) getState 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 217) _calcDefaultRowHeight 1 0% 0ms 312.5ms 312.5ms 312.5ms 312.5ms scrollable-data-t... (line 183) _getCellElements 69 0% 0ms 15.625ms 0.226ms 0ms 15.625ms scrollable-data-t... (line 117) _getCellElements 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 117) _hideSplitter 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 125) _hideSplitter 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 125) _observeAndCache 475 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 217) _setPendingTask 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 158) adjustScrollPosition 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 197) adjustScrollPosition 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 197) adjustScrollPosition 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 152) adjustScrollPosition 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 152) bindAsEventListener 45 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 12) bindAsEventListener 3 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 12) bindAsEventListener 411 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 12) capitalize 3 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 26) clean 69 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 32) clean 69 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 32) clear 6 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 46) click 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 14) click 2 0% 0ms 7468.75ms 3734.375ms 0ms 7468.75ms scrollable-data-t... (line 14) click 1 0% 0ms 7468.75ms 7468.75ms 7468.75ms 7468.75ms scrollable-data-t... (line 14) clone 5 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 11) clone 4 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 11) clone 1 0% 0ms 62.5ms 62.5ms 62.5ms 62.5ms a4j_3_1_0-SNAPSHO... (line 11) clone 21 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 48) collect 1 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 32) collect 5 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 32) constructor 55 0% 0ms 0ms 0ms 0ms 0ms extend.js.seam (line 27) constructor 22 0% 0ms 0ms 0ms 0ms 0ms extend.js.seam (line 28) copy 6 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 133) create 22 0% 0ms 0ms 0ms 0ms 0ms extend.js.seam (line 64) create 38 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 3) create 86 0% 0ms 4484.375ms 52.144ms 0ms 2906.25ms a4j_3_1_0-SNAPSHO... (line 3) createControl 1 0% 0ms 7062.5ms 7062.5ms 7062.5ms 7062.5ms scrollable-data-t... (line 200) each 105 0% 0ms 7500ms 71.429ms 0ms 7468.75ms a4j_3_1_0-SNAPSHO... (line 29) each 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 218) each 26 0% 0ms 7500ms 288.462ms 0ms 7468.75ms a4j_3_1_0-SNAPSHO... (line 29) ensureVisible 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 211) execOnLoad 2 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 30) execOnLoad 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 30) execOnLoad 2 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 30) execOnLoad 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 30) extend 64 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 4) initialize 1 0% 0ms 796.875ms 796.875ms 796.875ms 796.875ms scrollable-data-t... (line 97) findDOMClass 4 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 135) findOrStore 787 0% 0ms 6171.875ms 7.842ms 0ms 875ms a4j_3_1_0-SNAPSHO... (line 101) findOrStore 79 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 101) from 1228 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 40) getBorderWidth 17 0% 0ms 31.25ms 1.838ms 0ms 15.625ms scrollable-data-t... (line 63) getBorderWidth 3 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 63) getBorderWidth 14 0% 0ms 31.25ms 2.232ms 0ms 15.625ms scrollable-data-t... (line 63) getColumns 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 120) getColumns 16 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 120) getColumnsFrozenWidth 6 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 209) getColumnsTotalWidth 4 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 208) getContainer 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 89) getCount 2 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 85) getDomDocument 1 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 12) load 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 2) getElement 427 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 45) getForm 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 240) getHeader 6 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 206) getHeader 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 206) getHeader 4 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 206) moveTo 13 0% 0ms 15.625ms 1.202ms 0ms 15.625ms scrollable-data-t... (line 55) (no name) 5 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 5) TimedObserver 2 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 207) getHeight 124 0% 0ms 1750ms 14.113ms 0ms 578.125ms a4j_3_1_0-SNAPSHO... (line 106) getPane 27 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 92) getHeader 17 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 206) moveTo 6 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 55) Insertion 4 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 138) getValue 2 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 209) setListeners 400 0% 0ms 15.625ms 0.039ms 0ms 15.625ms scrollable-data-t... (line 222) getWidth 53 0% 0ms 1765.625ms 33.314ms 0ms 875ms scrollable-data-t... (line 49) getX 2 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 66) getX 45 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 66) getX 3 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 66) observe 479 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 70) include 1 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 35) initialize 1 0% 0ms 7468.75ms 7468.75ms 7468.75ms 7468.75ms scrollable-data-t... (line 199) initialize 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 238) initialize 1 0% 0ms 62.5ms 62.5ms 62.5ms 62.5ms scrollable-data-t... (line 238) initialize 1 0% 0ms 15.625ms 15.625ms 15.625ms 15.625ms scrollable-data-t... (line 238) initialize 1 0% 0ms 390.625ms 390.625ms 390.625ms 390.625ms scrollable-data-t... (line 97) initialize 9 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 69) initialize 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 75) initialize 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 83) registerEvents 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 87) initialize 2 0% 0ms 7468.75ms 3734.375ms 0ms 7468.75ms scrollable-data-t... (line 238) initialize 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 83) initialize 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 90) initialize 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 95) initialize 1 0% 0ms 7468.75ms 7468.75ms 7468.75ms 7468.75ms scrollable-data-t... (line 238) registerEvents 2 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 91) initialize 1 0% 0ms 2421.875ms 2421.875ms 2421.875ms 2421.875ms scrollable-data-t... (line 95) initialize 1 0% 0ms 2906.25ms 2906.25ms 2906.25ms 2906.25ms scrollable-data-t... (line 134) initialize 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 134) inspectRanges 1 0% 0ms 62.5ms 62.5ms 62.5ms 62.5ms scrollable-data-t... (line 219) isFunction 100 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 35) isObject 73 0% 0ms 2406.25ms 32.962ms 0ms 406.25ms scrollable-data-t... (line 38) restoreState 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 220) loadRows 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 86) makeAbsolute 12 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 64) getState 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 217) toQueryString 1 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 56) setHeight 23 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 48) moveTo 3 0% 0ms 15.625ms 5.208ms 0ms 15.625ms scrollable-data-t... (line 55) moveToY 15 0% 0ms 15.625ms 1.042ms 0ms 15.625ms scrollable-data-t... (line 54) update 396 0% 0ms 0ms 0ms 0ms 0ms extend.js.seam (line 38) observe 475 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 218) (no name) 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 194) setListeners 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 222) setListeners 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 222) parseTemplate 1 0% 0ms 312.5ms 312.5ms 312.5ms 312.5ms scrollable-data-t... (line 185) pckg 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 9) updateHeaders 2 0% 0ms 406.25ms 203.125ms 187.5ms 218.75ms scrollable-data-t... (line 126) registerEvents 3 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 91) registerEvents 2 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 87) updateHeaders 1 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 126) setupClass 22 0% 0ms 0ms 0ms 0ms 0ms extend.js.seam (line 3) requireClass 21 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 8) requireClass 20 0% 0ms 31.25ms 1.563ms 0ms 15.625ms scrollable-data-t... (line 8) updateLayout 1 0% 0ms 2640.625ms 2640.625ms 2640.625ms 2640.625ms scrollable-data-t... (line 203) getHeight 97 0% 0ms 1781.25ms 18.363ms 0ms 875ms a4j_3_1_0-SNAPSHO... (line 106) getScrollOffset 4 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 207) updateLayout 2 0% 0ms 406.25ms 203.125ms 187.5ms 218.75ms scrollable-data-t... (line 119) OnSepMouseMove 43 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 121) Level 8 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 94) _each 1 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 60) updateLayout 1 0% 0ms 109.375ms 109.375ms 109.375ms 109.375ms scrollable-data-t... (line 196) setWidth 24 0% 0ms 15.625ms 0.651ms 0ms 15.625ms scrollable-data-t... (line 52) (no name) 22 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 194) updateLayout 1 0% 0ms 2078.125ms 2078.125ms 2078.125ms 2078.125ms scrollable-data-t... (line 148) moveToX 38 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 53) R 1 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 58) OnSepMouseMove 3 0% 0ms 0ms 0ms 0ms 0ms scrollable-data-t... (line 121) _each 1 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 60) _calcDefaultRowHeight 1 0% 0ms 703.125ms 703.125ms 703.125ms 703.125ms scrollable-data-t... (line 183) _each 26 0% 0ms 7500ms 288.462ms 0ms 7468.75ms a4j_3_1_0-SNAPSHO... (line 45) unregister 2 0% 0ms 0ms 0ms 0ms 0ms a4j_3_1_0-SNAPSHO... (line 61) Timing of server side rendering from log: 2007-08-25 22:16:20,562 DEBUG [org.ajax4jsf.event.AjaxPhaseListener] Process before phase RESTORE_VIEW 1 2007-08-25 22:16:20,562 DEBUG [org.jboss.seam.jsf.SeamPhaseListener] before phase: RESTORE_VIEW 1 2007-08-25 22:16:20,562 DEBUG [org.jboss.seam.jsf.AbstractSeamPhaseListener] beginning transaction prior to phase: RESTORE_VIEW 1 2007-08-25 22:16:20,562 DEBUG [org.jboss.seam.jsf.SeamPhaseListener] after phase: RESTORE_VIEW 1 2007-08-25 22:16:20,562 DEBUG [org.jboss.seam.jsf.AbstractSeamPhaseListener] committing transaction after phase: RESTORE_VIEW 1 2007-08-25 22:16:20,562 DEBUG [org.ajax4jsf.event.AjaxPhaseListener] Process after phase RESTORE_VIEW 1 2007-08-25 22:16:20,562 DEBUG [org.ajax4jsf.event.AjaxPhaseListener] Process before phase RENDER_RESPONSE 6 2007-08-25 22:16:20,562 DEBUG [org.jboss.seam.jsf.SeamPhaseListener] before phase: RENDER_RESPONSE 6 2007-08-25 22:16:20,562 DEBUG [org.jboss.seam.jsf.AbstractSeamPhaseListener] beginning transaction prior to phase: RENDER_RESPONSE 6 2007-08-25 22:16:23,796 DEBUG [org.jboss.seam.jsf.SeamPhaseListener] after phase: RENDER_RESPONSE 6 2007-08-25 22:16:23,796 DEBUG [org.jboss.seam.jsf.AbstractSeamPhaseListener] committing transaction after phase: RENDER_RESPONSE 6 2007-08-25 22:16:23,796 DEBUG [org.ajax4jsf.event.AjaxPhaseListener] Process after phase RENDER_RESPONSE 6 2007-08-25 22:16:24,250 DEBUG [org.ajax4jsf.webapp.BaseXMLFilter] Parsing html total time 454ms 2007-08-25 22:16:24,250 DEBUG [org.ajax4jsf.webapp.BaseFilter] Finished request processing total time 3688ms for uri: /Table/recordListRich.seam Test page <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://jboss.com/products/seam/taglib" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" template="layout/template.xhtml"> <ui:define name="body"> <h1>recordList</h1> <p>Generated list page</p> <h:messages globalOnly="true" styleClass="message"/> <h:outputText value="No record exists" rendered="#{empty recordList.resultList}"/> <rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1" height="400px" width="100%" id="recordList" columnClasses="col" value="#{recordList.resultList}" var="record" sortMode="single" rendered="#{not empty recordList.resultList}"> <rich:column id="recId"> <f:facet name="header">Id</f:facet> #{record.id} </rich:column> <rich:column id="recName"> <f:facet name="header">Name</f:facet> <s:link id="record" value="#{record.name}" view="/record.xhtml"> <f:param name="recordId" value="#{record.id}"/> </s:link> </rich:column> <rich:column id="recF01"> <f:facet name="header">F01</f:facet> <s:link id="record" value="#{record.f01}" view="/record.xhtml"> <f:param name="recordId" value="#{record.id}"/> </s:link> </rich:column> ... </rich:scrollableDataTable> <div class="actionButtons"> <s:button id="done" value="Create record" view="/record.xhtml"/> </div> </ui:define> </ui:composition> I hope this can help to fix the performance, cause with current implementation it is waaay to clow Thanks