Axon.ivy 7.0 - the Digital Business Platform - is out now...

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 at 07:54

SupportIvyTeam's gravatar image

SupportIvyTeam ♦♦
930445976
accept rate: 75%


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 at 07:56

Reguel%20Wermelinger's gravatar image

Reguel Werme... ♦♦
6.0k11035
accept rate: 69%

edited 20.11 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 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 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:

×63
×51
×4

Asked: 20.11 at 07:54

Seen: 45 times

Last updated: 20.11 at 08:45