Dynamic dialog opening very slow (approx. 8 seconds)

bbot · 18 Jun 2018, 13:09

Hi all,
I have two different dialogs, both are opened with

 
<p:commandButton  actionListener="#{bean.method}"  icon="ui-icon-pencil" />

and subsequently calling

Code: Select all

 
RequestContext.getCurrentInstance().openDialog(outcome, options, params);

"outcome" is an xhtml file like

Code: Select all

 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
    </h:head>

    <h:body>

        <h:form>
            <h:panelGrid columns="2" style="margin-bottom:10px; width: 600px" cellpadding="5">
                <ui:repeat value="#{bean.elements}" var="element"  >
......
                </ui:repeat>
            </h:panelGrid>
        </h:form>

    </h:body>
    
</html>

Performance was good with PrimeFaces 5.2.
Now, after upgrading to 6.1, it takes approx. 8 seconds for the dialog to appear after clicking the button. This is really unsatisfactory.
I'm sure it doesn't have anything to do with either database performance or the content of my dialog panel, because if I change the xhtml files for the dialogs to something like

Code: Select all

 
<p:dialog appenTo="@(body)">
        <h:form>
            <h:panelGrid columns="2" style="margin-bottom:10px; width: 600px" cellpadding="5">
                <ui:repeat value="#{bean.elements}" var="element"  >
......
                </ui:repeat>
            </h:panelGrid>
        </h:form>
<p:dialog>

the response is fast. (This is, however, no solution because it's malfunctional).

How can I improve performance with PrimeFaces 6.1?

Any help is appreciated,
Boris

Primefaces 6.1 (upgrading vom 5.2)
JSF 2.2
payara-4.1.2.181

kukeltje · 18 Jun 2018, 20:45

Please edit your question and use [c o d e] ... [/c o d e] tags (without the spaces) and good indentation. Does it happen in all browsers? Did you debug where the delay is (client side, server side, and if server-side did you debug the time in each jsf phase with the PrimeFaces https://www.primefaces.org/showcase/ui/ ... ycle.xhtml. And please explicitly state what the difference is between the two pieces of code.

19 Jun 2018, 01:05

Can you also try it without the appendTo="@(body)" to see if that helps performance?

bbot · 19 Jun 2018, 11:37

I've added <p:lifecycle/> (nice tool, didn't know it before, thanks for your hint).
It helped me to understand that the performance issue may not be related to PrimeFaces after all, because the total "ALL" time for all phases is around 40 ms. So far, I have no significant performance issues with other components too.

As I understand, if a dialog is opened programmatically via

Code: Select all

RequestContext.getCurrentInstance().openDialog(outcome, options, params);

the client/browser requests a full new page, or view.

The reason of my problem are perhaps network performance issues.
Using Chrome web developer tools I've now detected that it takes 9 to 12 seconds to download "components.js" and "jquery-plugins.js", for whatever reason I still don't know.

BTW: Using

Code: Select all

 
<p:dialog appendTo="@(body)">
...
<p:dialog>

with or without

Code: Select all

appendTo="@(body)"

is no solution. It displays much faster (because no new page and no js libraries are downloaded), but you can't use forms.

kukeltje · 19 Jun 2018, 13:04

bbot wrote: ↑
19 Jun 2018, 11:37
The reason of my problem are perhaps network performance issues.
Using Chrome web developer tools I've now detected that it takes 9 to 12 seconds to download "components.js" and "jquery-plugins.js", for whatever reason I still don't know.

That is strange

bbot wrote: ↑
19 Jun 2018, 11:37
BTW: Using
Code: Select all
 
<p:dialog appendTo="@(body)">
...
<p:dialog> 
with or without
Code: Select all
appendTo="@(body)"
is no solution. It displays much faster (because no new page and no js libraries are downloaded), but you can't use forms.

The 'no new page' is strange and illogical. Does not make any sense. And not being able to use forms is also not completely true. You can have a form around a dialog if you do not need to have a modal in a specific construct. Please post a http://stackoverflow.com/help/mcve

kukeltje · 19 Jun 2018, 17:33

Can you try FireFox? And can you profile the client-side to see if a certain piece of code is responsible?

19 Jun 2018, 20:46

I will say I have been noticing dialogs slower in 6.2 as well and I am not using dynamic dialogs. Same behavior decribed above the network request is fast like 100 ms but then it takes a while for the dialog to appear. I wonder if its something related to Jquery 3 vs Jquery 2.

kukeltje · 20 Jun 2018, 09:22

That too can be debugged with a developer tool

20 Jun 2018, 13:22

Yep I just haven't had time to dig into it. Also mine is not 8 seconds but there is a good 1 to 1.5 second delay from the time the AJAX request returns and the time the dialog is displayed. I just wanted to let @bbot know he was not crazy.

bbot · 20 Jun 2018, 21:40

Okay, here we go with an example:

https://github.com/borisheithecker/prim ... alog-issue

The example displays two dialogs. dialog.xhtml loads more resources than the other, and therefore it is slower. However, pDialog.xhtml is malfunctional because it does not submit selection changes in p:selectOneRadio. So, one can use forms in p:dialog if it is located in a separate file, but not in every case.

As to my own issue, as I've said, I use chrome developer tools to debug and monitor the client side. My perfomance issue is definitely related to network performance. I takes 10 seconds to download the js libraries mentioned before. It's "download content" time.

Dynamic dialog opening very slow (approx. 8 seconds)

Who is online