[jquery.ui.dialog] Dailog with a lot of HTML unbearably slow

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

[jquery.ui.dialog] Dailog with a lot of HTML unbearably slow

Mythin@gmail.com

As the subject says, when I have a dialog with a large amount of HTML
inside the div, the open and close slows to a crawl and sometimes
freezes the browser.  This can be duplicated fairly simply as follows:

<html>
    <head>
        <title>Test</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery.ui.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#dialogTest').dialog({
                    autoOpen:   false,
                    resizable:  false,
                    modal:      true,
                    overlay:    {
                                    opacity:    0.3,
                                    background: 'black'
                                },
                    height:     344,
                    width:      560
                });
                $('#openDialog').click(function() {
                    $('#dialogTest').dialog('open');
                });
            });
        </script>
    </head>
    <body>
        <a href="javascript:;" id="openDialog">Open Dialog!</a>
        <div id="dialogTest">
            <table>
                <tr>
                    <td>Column 1<input type="hidden" /><input
type="hidden" /><input type="hidden" /><input type="hidden" /></td>
                    <td>Column 2<input type="hidden" /><input
type="hidden" /><input type="hidden" /><input type="hidden" /></td>
                    <td>Column 3<input type="hidden" /><input
type="hidden" /><input type="hidden" /><input type="hidden" /></td>
                    <td>Column 4<input type="hidden" /><input
type="hidden" /><input type="hidden" /><input type="hidden" /></td>
                    <td>Column 5<input type="hidden" /><input
type="hidden" /><input type="hidden" /><input type="hidden" /></td>
                </tr>    [[[[ REPEAT TR MANY TIMES ]]]]
            </table>
        </div>
    </body>
</html>


Does anyone have any ideas as to how to solve this problem or if I
should be looking at something other than the jQuery UI Dialog for my
purposes?

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: [jquery.ui.dialog] Dailog with a lot of HTML unbearably slow

Dan G. Switzer, II

Jon,

On Fri, Jan 2, 2009 at 2:26 PM, Jon <[hidden email]> wrote:

>
> As the subject says, when I have a dialog with a large amount of HTML
> inside the div, the open and close slows to a crawl and sometimes
> freezes the browser.  This can be duplicated fairly simply as follows:
>
> <html>
>    <head>
>        <title>Test</title>
>        <script type="text/javascript" src="jquery.js"></script>
>        <script type="text/javascript" src="jquery.ui.js"></script>
>        <script type="text/javascript">
>            $(function() {
>                $('#dialogTest').dialog({
>                    autoOpen:   false,
>                    resizable:  false,
>                    modal:      true,
>                    overlay:    {
>                                    opacity:    0.3,
>                                    background: 'black'
>                                },
>                    height:     344,
>                    width:      560
>                });
>                $('#openDialog').click(function() {
>                    $('#dialogTest').dialog('open');
>                });
>            });
>        </script>
>    </head>
>    <body>
>        <a href="javascript:;" id="openDialog">Open Dialog!</a>
>        <div id="dialogTest">
>            <table>
>                <tr>
>                    <td>Column 1<input type="hidden" /><input
> type="hidden" /><input type="hidden" /><input type="hidden" /></td>
>                    <td>Column 2<input type="hidden" /><input
> type="hidden" /><input type="hidden" /><input type="hidden" /></td>
>                    <td>Column 3<input type="hidden" /><input
> type="hidden" /><input type="hidden" /><input type="hidden" /></td>
>                    <td>Column 4<input type="hidden" /><input
> type="hidden" /><input type="hidden" /><input type="hidden" /></td>
>                    <td>Column 5<input type="hidden" /><input
> type="hidden" /><input type="hidden" /><input type="hidden" /></td>
>                </tr>    [[[[ REPEAT TR MANY TIMES ]]]]
>            </table>
>        </div>
>    </body>
> </html>
>
>
> Does anyone have any ideas as to how to solve this problem or if I
> should be looking at something other than the jQuery UI Dialog for my
> purposes?

The problem is with the DOM insertion of a huge block of HTML. From a
performance standpoint, you'd be better served by using an IFRAME in
your dialog with your really large HTML block then actually loaded
within the IFRAME.

-Dan

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: [jquery.ui.dialog] Dailog with a lot of HTML unbearably slow

Mythin@gmail.com

I tired this, but the iframe reloads every time I hide and show the
containing dialog.  Is there a reason DOM insertion is happening every
time instead of just showing and hiding the appropriate elements?

On Jan 2, 12:46 pm, "Dan G. Switzer, II" <[hidden email]>
wrote:

> Jon,
>
>
>
> On Fri, Jan 2, 2009 at 2:26 PM, Jon <[hidden email]> wrote:
>
> > As the subject says, when I have a dialog with a large amount of HTML
> > inside the div, the open and close slows to a crawl and sometimes
> > freezes the browser.  This can be duplicated fairly simply as follows:
>
> > <html>
> >    <head>
> >        <title>Test</title>
> >        <script type="text/javascript" src="jquery.js"></script>
> >        <script type="text/javascript" src="jquery.ui.js"></script>
> >        <script type="text/javascript">
> >            $(function() {
> >                $('#dialogTest').dialog({
> >                    autoOpen:   false,
> >                    resizable:  false,
> >                    modal:      true,
> >                    overlay:    {
> >                                    opacity:    0.3,
> >                                    background: 'black'
> >                                },
> >                    height:     344,
> >                    width:      560
> >                });
> >                $('#openDialog').click(function() {
> >                    $('#dialogTest').dialog('open');
> >                });
> >            });
> >        </script>
> >    </head>
> >    <body>
> >        <a href="javascript:;" id="openDialog">Open Dialog!</a>
> >        <div id="dialogTest">
> >            <table>
> >                <tr>
> >                    <td>Column 1<input type="hidden" /><input
> > type="hidden" /><input type="hidden" /><input type="hidden" /></td>
> >                    <td>Column 2<input type="hidden" /><input
> > type="hidden" /><input type="hidden" /><input type="hidden" /></td>
> >                    <td>Column 3<input type="hidden" /><input
> > type="hidden" /><input type="hidden" /><input type="hidden" /></td>
> >                    <td>Column 4<input type="hidden" /><input
> > type="hidden" /><input type="hidden" /><input type="hidden" /></td>
> >                    <td>Column 5<input type="hidden" /><input
> > type="hidden" /><input type="hidden" /><input type="hidden" /></td>
> >                </tr>    [[[[ REPEAT TR MANY TIMES ]]]]
> >            </table>
> >        </div>
> >    </body>
> > </html>
>
> > Does anyone have any ideas as to how to solve this problem or if I
> > should be looking at something other than the jQuery UI Dialog for my
> > purposes?
>
> The problem is with the DOM insertion of a huge block of HTML. From a
> performance standpoint, you'd be better served by using an IFRAME in
> your dialog with your really large HTML block then actually loaded
> within the IFRAME.
>
> -Dan
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: [jquery.ui.dialog] Dailog with a lot of HTML unbearably slow

Richard D. Worth-2
The dom insertion (moving, really) at init is required because that's the only way to get it on top in IE6 - put it at the end of the body. As for an iframe reloading each time you call .dialog("open") and .dialog("close"), that sounds like a bug.

- Richard

On Fri, Jan 2, 2009 at 6:27 PM, Jon <[hidden email]> wrote:

I tired this, but the iframe reloads every time I hide and show the
containing dialog.  Is there a reason DOM insertion is happening every
time instead of just showing and hiding the appropriate elements?

On Jan 2, 12:46 pm, "Dan G. Switzer, II" <[hidden email]>
wrote:
> Jon,
>
>
>
> On Fri, Jan 2, 2009 at 2:26 PM, Jon <[hidden email]> wrote:
>
> > As the subject says, when I have a dialog with a large amount of HTML
> > inside the div, the open and close slows to a crawl and sometimes
> > freezes the browser.  This can be duplicated fairly simply as follows:
>
> > <html>
> >    <head>
> >        <title>Test</title>
> >        <script type="text/javascript" src="jquery.js"></script>
> >        <script type="text/javascript" src="jquery.ui.js"></script>
> >        <script type="text/javascript">
> >            $(function() {
> >                $('#dialogTest').dialog({
> >                    autoOpen:   false,
> >                    resizable:  false,
> >                    modal:      true,
> >                    overlay:    {
> >                                    opacity:    0.3,
> >                                    background: 'black'
> >                                },
> >                    height:     344,
> >                    width:      560
> >                });
> >                $('#openDialog').click(function() {
> >                    $('#dialogTest').dialog('open');
> >                });
> >            });
> >        </script>
> >    </head>
> >    <body>
> >        <a href="javascript:;" id="openDialog">Open Dialog!</a>
> >        <div id="dialogTest">
> >            <table>
> >                <tr>
> >                    <td>Column 1<input type="hidden" /><input
> > type="hidden" /><input type="hidden" /><input type="hidden" /></td>
> >                    <td>Column 2<input type="hidden" /><input
> > type="hidden" /><input type="hidden" /><input type="hidden" /></td>
> >                    <td>Column 3<input type="hidden" /><input
> > type="hidden" /><input type="hidden" /><input type="hidden" /></td>
> >                    <td>Column 4<input type="hidden" /><input
> > type="hidden" /><input type="hidden" /><input type="hidden" /></td>
> >                    <td>Column 5<input type="hidden" /><input
> > type="hidden" /><input type="hidden" /><input type="hidden" /></td>
> >                </tr>    [[[[ REPEAT TR MANY TIMES ]]]]
> >            </table>
> >        </div>
> >    </body>
> > </html>
>
> > Does anyone have any ideas as to how to solve this problem or if I
> > should be looking at something other than the jQuery UI Dialog for my
> > purposes?
>
> The problem is with the DOM insertion of a huge block of HTML. From a
> performance standpoint, you'd be better served by using an IFRAME in
> your dialog with your really large HTML block then actually loaded
> within the IFRAME.
>
> -Dan



--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: [jquery.ui.dialog] Dailog with a lot of HTML unbearably slow

Mythin@gmail.com

Yeah, it wasn't just doing the DOM insertion on init.  I had run
across that before.  It's actually doing the DOM insertion every time
the .dialog('open') gets called.  What the jQuery UI code was calling
was:

(this.uiDialog.next().length && this.uiDialog.appendTo('body');

I changed it to:

(this.uiDialog.parent().not('body').length && this.uiDialog.appendTo
('body');

For some reason, in my case, the uiDialog was never last.  It may be
because I have multiple dialogs on the page.  The new way works in
both IE (tested on 6) and FF (tested on 3.0.5).

On Jan 2, 3:36 pm, "Richard D. Worth" <[hidden email]> wrote:

> The dom insertion (moving, really) at init is required because that's the
> only way to get it on top in IE6 - put it at the end of the body. As for an
> iframe reloading each time you call .dialog("open") and .dialog("close"),
> that sounds like a bug.
>
> - Richard
>
> On Fri, Jan 2, 2009 at 6:27 PM, Jon <[hidden email]> wrote:
>
> > I tired this, but the iframe reloads every time I hide and show the
> > containing dialog.  Is there a reason DOM insertion is happening every
> > time instead of just showing and hiding the appropriate elements?
>
> > On Jan 2, 12:46 pm, "Dan G. Switzer, II" <[hidden email]>
> > wrote:
> > > Jon,
>
> > > On Fri, Jan 2, 2009 at 2:26 PM, Jon <[hidden email]> wrote:
>
> > > > As the subject says, when I have a dialog with a large amount of HTML
> > > > inside the div, the open and close slows to a crawl and sometimes
> > > > freezes the browser.  This can be duplicated fairly simply as follows:
>
> > > > <html>
> > > >    <head>
> > > >        <title>Test</title>
> > > >        <script type="text/javascript" src="jquery.js"></script>
> > > >        <script type="text/javascript" src="jquery.ui.js"></script>
> > > >        <script type="text/javascript">
> > > >            $(function() {
> > > >                $('#dialogTest').dialog({
> > > >                    autoOpen:   false,
> > > >                    resizable:  false,
> > > >                    modal:      true,
> > > >                    overlay:    {
> > > >                                    opacity:    0.3,
> > > >                                    background: 'black'
> > > >                                },
> > > >                    height:     344,
> > > >                    width:      560
> > > >                });
> > > >                $('#openDialog').click(function() {
> > > >                    $('#dialogTest').dialog('open');
> > > >                });
> > > >            });
> > > >        </script>
> > > >    </head>
> > > >    <body>
> > > >        <a href="javascript:;" id="openDialog">Open Dialog!</a>
> > > >        <div id="dialogTest">
> > > >            <table>
> > > >                <tr>
> > > >                    <td>Column 1<input type="hidden" /><input
> > > > type="hidden" /><input type="hidden" /><input type="hidden" /></td>
> > > >                    <td>Column 2<input type="hidden" /><input
> > > > type="hidden" /><input type="hidden" /><input type="hidden" /></td>
> > > >                    <td>Column 3<input type="hidden" /><input
> > > > type="hidden" /><input type="hidden" /><input type="hidden" /></td>
> > > >                    <td>Column 4<input type="hidden" /><input
> > > > type="hidden" /><input type="hidden" /><input type="hidden" /></td>
> > > >                    <td>Column 5<input type="hidden" /><input
> > > > type="hidden" /><input type="hidden" /><input type="hidden" /></td>
> > > >                </tr>    [[[[ REPEAT TR MANY TIMES ]]]]
> > > >            </table>
> > > >        </div>
> > > >    </body>
> > > > </html>
>
> > > > Does anyone have any ideas as to how to solve this problem or if I
> > > > should be looking at something other than the jQuery UI Dialog for my
> > > > purposes?
>
> > > The problem is with the DOM insertion of a huge block of HTML. From a
> > > performance standpoint, you'd be better served by using an IFRAME in
> > > your dialog with your really large HTML block then actually loaded
> > > within the IFRAME.
>
> > > -Dan
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Dailog with a lot of HTML unbearably slow

Erich Musick-2

I was experiencing this same problem, however my performance issue
occurred primarily when closing the dialog. I didn't have tons of HTML
in the dialog, but it would take sometimes 15-20 seconds to close it.
I used Firebug's profiler and found that 120,000 function calls were
being executed. The culprit turned out to be the following line in
jQuery UI Dialog:

        $('a, :input').add([document, window]).unbind('.dialog-overlay');

Having read about event delegation recently, I decided to modify both
the bind and unbind code for the .dialog-overlay event to use event
delegation. Something like the following:

Bind:
        // ORIGINAL: $('a, :input').bind($.ui.dialog.overlay.events, function
() {
        $(document).bind($.ui.dialog.overlay.events, function(e) {
                if ($(e.target).is("a, :input")) {
                        // code here is the same as what was present previously, except the
first reference to
                        // $(this) should be changed to $(e.target)
                }
        });

Unbind:
        $(document).unbind('.dialog-overlay');


I did not do extensive testing to see whether the behavior is exactly
identical, but poking around in IE 7 and FF 3 suggested that it is.
Performance was GREATLY improved; dialog began closing almost
instantly. Firebug's profiler showed only 12,000 total function calls
(still a lot, but hey it's down by a factor of 10).

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: [jquery.ui.dialog] Dailog with a lot of HTML unbearably slow

roy hu
In reply to this post by Mythin@gmail.com
juery ui dialog repeat tr , i think it's bug.
you can fix it by self.

add $("#divname tr:not(:has(td)):not(:has(th))").remove(); behind dialog('open');