[jQuery] Re: Extremely poor performance of jQuery on AJAX partial page updates
$(parent).append(state.html) did the trick - thanks a ton polyrythmic!
[jQuery] Re: Extremely poor performance of jQuery on AJAX partial page updates
> Should I just use DOM's createElement() and appendChild() directly? > Or use innerHTML? > And would it execute
[jQuery] Re: Extremely poor performance of jQuery on AJAX partial page updates
I'm just throwing this out here -- haven't tested this for performance and
this may be way off base for what you need. So here goes nothing.
What if you:
1. Created a hidden div on the page (style="display:none")
2. Have the ajax call return updates as html, with the changes having a new
class, such as "changed".
3. Appended the new updates to the div: div.html(ajaxResults);
4. Iterate through the changes like this:
div.find('.changed').each(function(i){update_element(this);});
What do you think?
JK
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of koollx
Sent: Monday, October 15, 2007 9:29 AM
To: jQuery (English)
Subject: [jQuery] Re: Extremely poor performance of jQuery on AJAX partial
page updates
Thanks for your suggestion. I think it may help but it won't
completely solve the problem. Let me give a little background on what
I'm actually trying to do. In response to an Ajax call the server
returns an array of component updates that need to be applied to the
page. Updates include DELETE, INSERT, UPDATE. Delete is easy, insert
and update is where the performance is bad. For each component the
server provides component id in DOM, it's parent id and the HTML
markup, which can include nested
[jQuery] Re: Extremely poor performance of jQuery on AJAX partial page updates
Thanks for your suggestion. I think it may help but it won't completely solve the problem. Let me give a little background on what I'm actually trying to do. In response to an Ajax call the server returns an array of component updates that need to be applied to the page. Updates include DELETE, INSERT, UPDATE. Delete is easy, insert and update is where the performance is bad. For each component the server provides component id in DOM, it's parent id and the HTML markup, which can include nested
[jQuery] Re: Extremely poor performance of jQuery on AJAX partial page updates
Thanks for the suggestion. I can try it but I think it won't do the same thing I was doing earlier. Let me give a little background on my algorithm. The server sends a list of changes to the page and the client script has to apply. Changes can be delete, insert and update. The markup sent by the server includes
[jQuery] Re: Extremely poor performance of jQuery on AJAX partial page updates
Thanks for your suggestion. I think it may help but it won't completely solve the problem. Let me give a little background on what I'm actually trying to do. In response to an Ajax call the server returns an array of component updates that need to be applied to the page. Updates include DELETE, INSERT, UPDATE. Delete is easy, insert and update is where the performance is bad. For each component the server provides component id in DOM, it's parent id and the HTML markup, which can include nested
[jQuery] Re: Extremely poor performance of jQuery on AJAX partial page updates
I was only suggesting PasteMonkey because you had a lot of HTML to paste and a large amount of code is hard to read through Groups, Groups fudges the formatting and doesn't do syntax highlighting. Plus, it's a jQuery project :-). The problem is in the HTML, kind of. When you create a DOM element (or set of elements) with plain text HTML jQuery will be forced to run that regex against all of it. There is no way around it, in order to allow jQuery to make sure it's parsing HTML and not a selector, the regex has to find HTML tags or special characters in the text - even if its 1000 words of plaintext and just one tag. The problem is that you're trying to load a very large amount of text, and making jQuery figure out that it's HTML. The easiest workaround is as Wizzud suggested - if you tell jQuery that it's HTML by using .html(), you skip the regex. Looking at the jQuery source, using appendTo is fine also*, just don't use $(state.html) - there's no need to make a jQuery object from the HTML, since jQuery can append anything -- text, DOM elements, HTML, etc. *Example: $(parent).append(state.html); If you do need a jQuery object from the HTML, for manipulation or parsing, there are quick ways to do that, too. Let us know how this works out. Charles doublerebel.com On Oct 13, 1:33 pm, koollx <[EMAIL PROTECTED]> wrote: > I can use PasteMonkey but I don't see how it can help in this case - > what exactly do you want me to paste in it? The line that takes over > 20 seconds to execute is the regexp applied to the HTML that's passed > to jQuery constructor. There is no point in editing HTML (I think) > because it is automatically generated by the server and is very > dynamic. I just pasted one example of it. There is no way to predict > all possible combinations of that HTML. > > The issue I think is in regexp, or IE performance when applying > regexp. The regexp is in jquery.js. > > Are you suggesting that the problem is in the HTML markup I'm trying > to insert into the page? > > On Oct 12, 7:12 pm, polyrhythmic <[EMAIL PROTECTED]> wrote: > > > Alex, > > > May I recommend to you PasteMonkey? > > >http://pastemonkey.org/ > > > Charles > > doublerebel.com > > > On Oct 12, 11:42 am, koollx <[EMAIL PROTECTED]> wrote: > > > > I'm trying to use jQuery 1.2.1 to add AJAX functionality to my web > > > application. I am using jQuery Form plugin to submit te form via AJAX > > > and have a server-side algorithm that returns page updates. The server > > > returns a JSON array with HTML elements to be updated and then I loop > > > through that array and process each item. For update, I first remove > > > the existing DOM element, then recreate it using jQuery constructor, > > > and then append it to the parent. It works find in FireFox, but in IE > > > the performance is horrendous. It takes 25 seconds in IE6 and IE7 > > > pretty much hangs. I traced the delay to the following line of code in > > > jQuery init method: > > > > var m = quickExpr.exec(selector); > > > > So it seems that jQuery is to blame for the performance. Is there > > > something I can do to improve it? Is this a bug/issue that needs to be > > > resolved? I'd like to help fix it but I'm not familiar with jQuery > > > design well enough to know why the regexp is there and how we can > > > simplify/remove it. Here's my update code: > > > > var $component = $(state.html); > > > $component.appendTo(parent); > > > > And the HTML that takes particularly long is pasted below (it may look > > > like a large page but it isn't. It loads into the browser without > > > jQuery AJAX in less then a second): > > > >> > \"position:absolute;left:0px;top:46px;width:884px;height:644px\" > > > tabbedPane=\"true\"> > > > > > > Button > > > Demo > > > Source > > > Code > > > > > >> > \"position:absolute;left:2px;top:26px;width:874px;height:585px\"> > > id=\"JPanel12136681\" style=\"position:absolute;left:2px;top:1px;width: > > > 874px;height:611px;clip:rect(0px 874px 611px 0px)\" class=\" border\"> > > > > > \"position:absolute;left:2px;top:2px;width:874px;height: > > > 611px;clip:rect(0px 874px 611px 0px)\"> > > > > > \"position:absolute;left:0px;top:0px;width:874px;height:611px\" > > > tabbedPane=\"true\"> > > > > > > > > tab-0\">Buttons > > > > > tab-1\">Radio Buttons > > > > > tab-2\">Check Boxes > > > > > > > > \"position:absolute;left:2px;top:26px;width:868px;height:555px\"> > > id=\"JPanel5403403\" style=\"position:absolute;left:2px;top:1px;width: > > > 868px;height:581px;clip:rect(0px 868px 581px 0px)\"> > > >> > \"position:absolute;left:5px;top:5px;width:548px;height: > > > 567px;clip:rect(0px 548px 567px 0p
[jQuery] Re: Extremely poor performance of jQuery on AJAX partial page updates
With no indication of what either the 'parent' HTML structure or the
JSON structure is like, is it possible to switch from ...
var $component = $(state.html);
$component.appendTo(parent);
...to...
$(parent).html(state.html);
(You wouldn't need to empty parent first - html() does that for you)
On Oct 13, 9:33 pm, koollx <[EMAIL PROTECTED]> wrote:
> I can use PasteMonkey but I don't see how it can help in this case -
> what exactly do you want me to paste in it? The line that takes over
> 20 seconds to execute is the regexp applied to the HTML that's passed
> to jQuery constructor. There is no point in editing HTML (I think)
> because it is automatically generated by the server and is very
> dynamic. I just pasted one example of it. There is no way to predict
> all possible combinations of that HTML.
>
> The issue I think is in regexp, or IE performance when applying
> regexp. The regexp is in jquery.js.
>
> Are you suggesting that the problem is in the HTML markup I'm trying
> to insert into the page?
>
> On Oct 12, 7:12 pm, polyrhythmic <[EMAIL PROTECTED]> wrote:
>
> > Alex,
>
> > May I recommend to you PasteMonkey?
>
> >http://pastemonkey.org/
>
> > Charles
> > doublerebel.com
>
> > On Oct 12, 11:42 am, koollx <[EMAIL PROTECTED]> wrote:
>
> > > I'm trying to use jQuery 1.2.1 to add AJAX functionality to my web
> > > application. I am using jQuery Form plugin to submit te form via AJAX
> > > and have a server-side algorithm that returns page updates. The server
> > > returns a JSON array with HTML elements to be updated and then I loop
> > > through that array and process each item. For update, I first remove
> > > the existing DOM element, then recreate it using jQuery constructor,
> > > and then append it to the parent. It works find in FireFox, but in IE
> > > the performance is horrendous. It takes 25 seconds in IE6 and IE7
> > > pretty much hangs. I traced the delay to the following line of code in
> > > jQuery init method:
>
> > > var m = quickExpr.exec(selector);
>
> > > So it seems that jQuery is to blame for the performance. Is there
> > > something I can do to improve it? Is this a bug/issue that needs to be
> > > resolved? I'd like to help fix it but I'm not familiar with jQuery
> > > design well enough to know why the regexp is there and how we can
> > > simplify/remove it. Here's my update code:
>
> > > var $component = $(state.html);
> > > $component.appendTo(parent);
>
> > > And the HTML that takes particularly long is pasted below (it may look
> > > like a large page but it isn't. It loads into the browser without
> > > jQuery AJAX in less then a second):
>
> > >> > \"position:absolute;left:0px;top:46px;width:884px;height:644px\"
> > > tabbedPane=\"true\">
> > >
> > > Button
> > > Demo
> > > Source
> > > Code
> > >
> > >> > \"position:absolute;left:2px;top:26px;width:874px;height:585px\"> > > id=\"JPanel12136681\" style=\"position:absolute;left:2px;top:1px;width:
> > > 874px;height:611px;clip:rect(0px 874px 611px 0px)\" class=\" border\">
> > > > > \"position:absolute;left:2px;top:2px;width:874px;height:
> > > 611px;clip:rect(0px 874px 611px 0px)\">
> > > > > \"position:absolute;left:0px;top:0px;width:874px;height:611px\"
> > > tabbedPane=\"true\">
> > >
> > > > > tab-0\">Buttons
> > > > > tab-1\">Radio Buttons
> > > > > tab-2\">Check Boxes
> > >
> > > > > \"position:absolute;left:2px;top:26px;width:868px;height:555px\"> > > id=\"JPanel5403403\" style=\"position:absolute;left:2px;top:1px;width:
> > > 868px;height:581px;clip:rect(0px 868px 581px 0px)\">
> > >> > \"position:absolute;left:5px;top:5px;width:548px;height:
> > > 567px;clip:rect(0px 548px 567px 0px)\" class=\" border\">
> > > > > 9px;top:8px;width:529px;height:61px;clip:rect(0px 549px 81px 0px)\"
> > > class=\" border\">
> > > Text Buttons
> > > > > \"JButton7715289\" name=\"JButton7715289\" value=\"One \" class=
> > > \"button\" onClick=\"return doSubmit('/button/JButton7715289')\" style=
> > > \"position:absolute;left:11px;top:21px;width:69px;height:27px\">
> > > > > 10;position:absolute;left:80px;top:34px;width:11px;height:1px
> > > \">
> > > > > \"JButton5689693\" name=\"JButton5689693\" value=\"Two\" class=\"button
> > > \" onClick=\"return doSubmit('/button/JButton5689693')\" style=
> > > \"position:absolute;left:92px;top:21px;width:66px;height:27px\">
> > > > > 10;position:absolute;left:158px;top:34px;width:11px;height:1px
> > > \">
> > > > > cellspacing=0 cla
[jQuery] Re: Extremely poor performance of jQuery on AJAX partial page updates
I can use PasteMonkey but I don't see how it can help in this case -
what exactly do you want me to paste in it? The line that takes over
20 seconds to execute is the regexp applied to the HTML that's passed
to jQuery constructor. There is no point in editing HTML (I think)
because it is automatically generated by the server and is very
dynamic. I just pasted one example of it. There is no way to predict
all possible combinations of that HTML.
The issue I think is in regexp, or IE performance when applying
regexp. The regexp is in jquery.js.
Are you suggesting that the problem is in the HTML markup I'm trying
to insert into the page?
On Oct 12, 7:12 pm, polyrhythmic <[EMAIL PROTECTED]> wrote:
> Alex,
>
> May I recommend to you PasteMonkey?
>
> http://pastemonkey.org/
>
> Charles
> doublerebel.com
>
> On Oct 12, 11:42 am, koollx <[EMAIL PROTECTED]> wrote:
>
> > I'm trying to use jQuery 1.2.1 to add AJAX functionality to my web
> > application. I am using jQuery Form plugin to submit te form via AJAX
> > and have a server-side algorithm that returns page updates. The server
> > returns a JSON array with HTML elements to be updated and then I loop
> > through that array and process each item. For update, I first remove
> > the existing DOM element, then recreate it using jQuery constructor,
> > and then append it to the parent. It works find in FireFox, but in IE
> > the performance is horrendous. It takes 25 seconds in IE6 and IE7
> > pretty much hangs. I traced the delay to the following line of code in
> > jQuery init method:
>
> > var m = quickExpr.exec(selector);
>
> > So it seems that jQuery is to blame for the performance. Is there
> > something I can do to improve it? Is this a bug/issue that needs to be
> > resolved? I'd like to help fix it but I'm not familiar with jQuery
> > design well enough to know why the regexp is there and how we can
> > simplify/remove it. Here's my update code:
>
> > var $component = $(state.html);
> > $component.appendTo(parent);
>
> > And the HTML that takes particularly long is pasted below (it may look
> > like a large page but it isn't. It loads into the browser without
> > jQuery AJAX in less then a second):
>
> >> \"position:absolute;left:0px;top:46px;width:884px;height:644px\"
> > tabbedPane=\"true\">
> >
> > Button
> > Demo
> > Source
> > Code
> >
> >> \"position:absolute;left:2px;top:26px;width:874px;height:585px\"> > id=\"JPanel12136681\" style=\"position:absolute;left:2px;top:1px;width:
> > 874px;height:611px;clip:rect(0px 874px 611px 0px)\" class=\" border\">
> > > \"position:absolute;left:2px;top:2px;width:874px;height:
> > 611px;clip:rect(0px 874px 611px 0px)\">
> > > \"position:absolute;left:0px;top:0px;width:874px;height:611px\"
> > tabbedPane=\"true\">
> >
> > > tab-0\">Buttons
> > > tab-1\">Radio Buttons
> > > tab-2\">Check Boxes
> >
> > > \"position:absolute;left:2px;top:26px;width:868px;height:555px\"> > id=\"JPanel5403403\" style=\"position:absolute;left:2px;top:1px;width:
> > 868px;height:581px;clip:rect(0px 868px 581px 0px)\">
> >> \"position:absolute;left:5px;top:5px;width:548px;height:
> > 567px;clip:rect(0px 548px 567px 0px)\" class=\" border\">
> > > 9px;top:8px;width:529px;height:61px;clip:rect(0px 549px 81px 0px)\"
> > class=\" border\">
> > Text Buttons
> > > \"JButton7715289\" name=\"JButton7715289\" value=\"One \" class=
> > \"button\" onClick=\"return doSubmit('/button/JButton7715289')\" style=
> > \"position:absolute;left:11px;top:21px;width:69px;height:27px\">
> > > 10;position:absolute;left:80px;top:34px;width:11px;height:1px
> > \">
> > > \"JButton5689693\" name=\"JButton5689693\" value=\"Two\" class=\"button
> > \" onClick=\"return doSubmit('/button/JButton5689693')\" style=
> > \"position:absolute;left:92px;top:21px;width:66px;height:27px\">
> > > 10;position:absolute;left:158px;top:34px;width:11px;height:1px
> > \">
> > > cellspacing=0 class=\"button\" onclick=\"return doSubmit('/button/
> > JButton7083822')\" id=\"JButton7083822\" style=\"border-width:
> > 1px;border-style:outset;position:absolute;left:170px;top:22px;width:
> > 351px;height:25px\">
> >
> >
> > > cellspacing=0>
> >
> > > color=red>Three!
> >
> >
> >
