We have a huge Html Dialog that uses around 80 MB memory per session on the engine side. The dialog is like a wrapper for the full application. It contains multiple tabs and modal dialogs <p:dialog />.

Why is this Dialog consuming so much memory? Are there any best practices to build lightweight JSF dialogs?

asked 20.11.2017 at 07:54

SupportIvyTeam's gravatar image

SupportIvyTeam ♦♦
1.2k6383105
accept rate: 76%


Why so much memory is used

Invisible parts on the UI take memory on the engine because normally the HTML of these dialogs and tabs are eagerly loaded. The whole HTML code is generated and the view state is held on the engine. This requires processing power and memory. One can quickly identify such parts in a JSF dialog by using the Firefox + Inspect the page content. Loaded but not visible parts are shown as grayed out HTML in the console:

sample of eagerly loaded content

How to solve it

Use the rendered attribute to avoid eager loading of large UI parts that are not visible on the initial dialog. Load them on demand with Ajax requests.

A lightweight solution for modal dialogs: In this example we have a button that controls the rendered attribute of a <p:dialog />.

<h:form id="form">
    <p:outputPanel id="address">
        <p:commandButton value="Add Address" icon="fa fa-list-alt"
            actionListener="#{logic.showAddress(true)}" oncomplete="PF('addressDialog').show()"
            update="form:address" />
        <p:dialog id="dialog" widgetVar="addressDialog" 
            header="Large sample component" 
            modal="true" visible="true" rendered="#{data.showAddress}" closable="false" >
                <ic:ch.ivyteam.htmldialog.demo.component.AddressComponent id="input" >
                    <p:commandButton value="close" 
                    actionListener="#{logic.showAddress(false)}" onclick="PF('addressDialog').hide()"
                    update="form:address"/>
                    <br/>
                </ic:ch.ivyteam.htmldialog.demo.component.AddressComponent>
        </p:dialog>
    </p:outputPanel>
</h:form>

With the Weisshorn Sprint 3 release of Axon.ivy the full sample can be analyzed in the HtmlDialogDemos. Import > Axon.ivy > Sample Project > Html Dialog Demos > Component/lazyLoadComponent.ivp

link

answered 20.11.2017 at 07:56

Reguel%20Wermelinger's gravatar image

Reguel Werme... ♦♦
7.4k11347
accept rate: 70%

edited 20.11.2017 at 08:07

one of our customers has 24 modal dialogs in multiple tabs. by applying the rendered attribute as shown above, the memory usage on the engine side could be lowered from 80 MB to 25 MB.

(20.11.2017 at 08:09) SupportIvyTeam ♦♦ SupportIvyTeam's gravatar image

From the ivy.core we want to lower the pain of these refactorings by solving the following issues:

(20.11.2017 at 08:33) Reguel Werme... ♦♦ Reguel%20Wermelinger's gravatar image
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "Title")
  • image?![alt text](/path/img.jpg "Title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×73
×53
×5

Asked: 20.11.2017 at 07:54

Seen: 402 times

Last updated: 20.11.2017 at 08:45